Div alignment within a container

**MathewHood** · 05-28-2010, 01:08 AM

Hey everyone,

First of all thank you to everyone who helped me fix my last issue, I have done a fair bit more work (and hair pulling) since then!

My new issue is an issue that I seem to have fairly often and that is having two divs align side by side.

I have tried using the float:left; and float:right; code but it messes with the white padding underneath.

I'm sure there is some simple fix or my code is slightly wrong so I will post it here in hopes that someone can pick up what I seem to be missing.

I have also uploaded this to a server and included a screenshot of what I plan to have the finished site look like.

Live: http://simul-tech.com.au/test/

Screenshot: http://img191.imageshack.us/img191/9...nixpreview.jpg

CSS

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	background-color: #5b5a5c;
	font-family: Century Gothic, Tahoma, Verdana, Arial;
}

#whiteContainer {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}


#whiteBox {
	background-color: #FFFFFF;
	width: 980px;
	padding-bottom:20px;
	padding-left:20px;
}

#test {
	background-color: #FFFFFF;	
}

.nav ul{
	color:#FFF;
	height:65px;
	width:960px;
	
}

.nav ul li{
	list-style: none;
	display:inline;
	width:192px;
	height:40px;
	text-align:center;
}

.nav ul li a {
	background-color:#333333;
	color:#FFFFFF;
	float:left;
	height:40px;
	padding-top:25px;
	text-decoration:none;
	width:192px;
}

.nav ul li a:hover{
	background-color: #000000;
	width:192px;
	height:40px;
}

#navContainer {
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding-top:20px;
	width:980px;
	padding-bottom:10px;
}

#imageContainer{
	width: 980px;
	padding-top:10px;
	padding-bottom:10px;
}

#image {
	width:960px;
	height:400px;
	background-color:#b8bbbd;
}

#search {
	width: 960px;
	text-align:right;
	height:55px;
	padding-top:23px;
}

#searchBackground {
	width: 960px;
	height:55px;
	padding-bottom:10px;
	background-color:#e2e2e2;
}

#searchContainer {
	width:960px;
	padding-bottom:10px;
}

#contentContainer {
	width:960px;
	padding-bottom:10px;
}

#rightContainer {
	width: 200px;
}

#rightHeader {
	width:200px;
	background-color:#e2e2e2;
	height:50px;
}

#rightContent {
	width:200px;
	padding-left:10px;
	padding-right:10px;
}

#leftContainer {
	width: 760px;
}

#leftContent {
	width:760px;
}

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Taranix Pty Ltd - 2010</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="whiteContainer">
	<div id="whiteBox">
    	<div id="navContainer">
			<div class="nav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Partners</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
            </div>    
		</div>
        
 		<div id="imageContainer">
    		<div id="image">
        	</div>
    	</div>
        
        <div id="searchContainer">
        	<div id="searchBackground">
        		<div id="search">
            		Search:
        		</div>
            </div>
        </div>
        
        <div id="contentContainer">
        
        	<div id="leftContainer">
            	<div id="leftContent">
                	Test Content
                </div>
            </div>
        
        	<div id="rightContainer">
            	<div id="rightHeader">
                Placeholder Text
                	<div id="rightContent">
                    	Test
                    </div>
                </div>
            </div>
            
        </div>
        
	</div>
</div>
</body>
</html>

Thanks for taking the time to look at this

Regards,

Mathew Hood

**MathewHood** · 05-28-2010, 01:35 AM

Hey,

Sorry I couldn't figure out how to change it to solved.

I had to add float:left; to the leftContainer and rightContainer, also to the whiteBox.

I will leave this here should anyone have a similar issue

**azoomer** · 05-28-2010, 01:59 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Taranix Pty Ltd - 2010</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="whiteContainer">
	<div id="whiteBox">
    	<div id="navContainer">
			<div class="nav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Partners</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
            </div>    
		</div>
        
 		<div id="imageContainer">
    		<div id="image">
        	</div>
    	</div>
        
        <div id="searchContainer">
        	<div id="searchBackground">
        		<div id="search">
            		Search:
        		</div>
            </div>
        </div>
        
        <div id="contentContainer">
        
        	<div id="leftContainer">
            	<div id="leftContent">
                	Test Content
                </div>
            </div>
        
        	<div id="rightContainer">
            	<div class="rightHeader">
                Placeholder Text 1
                	<div class="rightContent">
                    	Test 1
                    </div>
                </div>
                <div class="rightHeader">
                Placeholder Text 2
                	<div class="rightContent">
                    	Test 2
                    </div>
                </div>
                
                
            </div>
            
            <div id="footer">  footer content  </div>
            
        </div>
        
	</div>
</div>
</body>
</html>

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	background-color: #5b5a5c;
	font-family: Century Gothic, Tahoma, Verdana, Arial;
}

#whiteContainer {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}


#whiteBox {
	background-color: #FFFFFF;
	width: 980px;
	padding-bottom:20px;
	padding-left:20px;
}

#test {
	background-color: #FFFFFF;	
}

.nav ul{
	color:#FFF;
	height:65px;
	width:960px;
	
}

.nav ul li{
	list-style: none;
	display:inline;
	width:192px;
	height:40px;
	text-align:center;
}

.nav ul li a {
	background-color:#333333;
	color:#FFFFFF;
	float:left;
	height:40px;
	padding-top:25px;
	text-decoration:none;
	width:192px;
}

.nav ul li a:hover{
	background-color: #000000;
	width:192px;
	height:40px;
}

#navContainer {
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding-top:20px;
	width:980px;
	padding-bottom:10px;
}

#imageContainer{
	width: 980px;
	padding-top:10px;
	padding-bottom:10px;
}

#image {
	width:960px;
	height:400px;
	background-color:#b8bbbd;
}

#search {
	width: 960px;
	text-align:right;
	height:55px;
	padding-top:23px;	
}

#searchBackground {
	width: 960px;
	height:55px;
	padding-bottom:10px;
	background-color:#e2e2e2;
}

#searchContainer {
	width:960px;
	padding-bottom:10px; 	
}

#contentContainer {
	width:960px;
	padding-bottom:10px;
}

#rightContainer {
	width: 200px; 
	float:right;
	margin-bottom:20px;
}

.rightHeader {
	width:200px;
	background-color:#e2e2e2;
	height:50px;
    margin-bottom:20px;
}

.rightContent {
	width:200px;
	padding-left:10px;
	padding-right:10px;
}

#leftContainer {
	width: 760px;
}

#leftContent {
	width:760px;
}
#footer{ clear:both; width:950px; height:40px; position:relative; margin-left:auto; margin-right:auto; padding-top:16px; padding-left:10px; text-align:left; background-color:#333333; color:#CCC;}

Thread: Div alignment within a container

Thread Tools

Search Thread

Div alignment within a container

Bookmarks

Bookmarks

Posting Permissions