CSS layout isn't right and I can't work out why :'(

kthnx · 15th June 2010, 3:01 AM

Here's my cunning plan:

and through the power of fail, I present:

For the life of me, I can't figure out why the gap above the right column is appearing? I suspect it's related to the banner div but I just can't work out what precisely I need to do to fix that.

Here's my HTML:

HTML Code:

<div id="content-container">
    	<div id="banner">
<img src="images/banner.jpg" width="660" height="120" />
	</div>
		<div id="content">
        
			<h2>
				Page heading
			</h2>
			<p>
                                Ipsum
			</p>
	  </div>
		<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
		</div>
	</div>

And the CSS:

Code:

#content-container
{
	float: left;
	width: 950px;
	background-color: #FFF;
	padding:10px;
}
#banner
{
	clear: left;
	float: left;
	width: 660px;
	height: 120px;
	display: inline;
}
#content
{
	float: left;
	width: 660px;
	background-color:#EAEAEA;
	display: inline;
	margin-top:10px;
}
#aside
{
	float: right;
	width: 280px;
	display: inline;
	background-color:#EAEAEA;
}

Can someone deploy their css-fu and tell me what I'm missing here?

stocky · 15th June 2010, 3:09 AM

I made another div for the left hand side. Probably a better way to do it but I'm tired and can't think.

Code:

<head><link rel="stylesheet" type="text/css" href="style.css"></head>
<body><div id="content-container">
	<div id=left-container>
    	<div id="banner">
<img src="images/banner.jpg" width="660" height="120" />
	</div>
	
		<div id="content">
        
			<h2>
				Page heading
			</h2>
			<p>
                                Ipsum
			</p>
	  </div>
	</div>
		<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
		</div>
	</div></body>

Code:

#content-container
{
	float: left;
	width: 950px;
	background-color: #FFF;
	padding:10px;
}
#left-container
{
	clear: left;
	float: left;
	width: 660px;
	display: inline;
}
#banner
{
	clear: left;
	float: left;
	width: 660px;
	height: 120px;
	display: inline;
}
#content
{
	float: left;
	width: 660px;
	background-color:#EAEAEA;
	display: inline;
	margin-top:10px;
}
#aside
{
	float: right;
	width: 280px;
	display: inline;
	background-color:#EAEAEA;
}

stocky · 15th June 2010, 3:18 AM

Ok scratch that. Just flip around the order of your divs in your html.

Code:

<div id="content-container">
	
    	<div id="banner">
<img src="images/banner.jpg" width="660" height="120" />
	</div>
	<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
		</div>
		<div id="content">
        
			<h2>
				Page heading
			</h2>
			<p>
                                Ipsum
			</p>
	  </div>
	
		
	</div>

kthnx · 15th June 2010, 3:22 AM

Quote:

Originally Posted by stocky

Ok scratch that. Just flip around the order of your divs in your html.

Well, I have no idea why that worked but it did the trick nicely

Thanks for the after hours assist! Will check back tomorrow and see if someone can shed light on how this particular bit of CSS black magic was accomplished.

Primüs · 15th June 2010, 9:07 PM

Here's my theory, which im pretty sure is correct:

Because you have both Banner and Content float: left;, and your aside float:right;, since you had them in that order and Banner + Content side by side = wider then page, it dropped to new line. After that it had to start the 3rd div you mentioned in line to where it was up to.

So by changing it around, the Banner and the Aside DIV now fit on that top line, then you declare your Content DIV which drops down to the next line (on the left as its float left).

Does that make sense to you? Meaning i hope i explained it right. lol.

15th June 2010, 3:18 AM	#3
stocky Member Join Date: Feb 2006 Location: Canberra Posts: 726	Ok scratch that. Just flip around the order of your divs in your html. Code: <div id="content-container"> <div id="banner"> <img src="images/banner.jpg" width="660" height="120" /> </div> <div id="aside"> <h3> Aside heading </h3> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. </p> </div> <div id="content"> <h2> Page heading </h2> <p> Ipsum </p> </div> </div> __________________ E8400 @ 3.87GHz \| Gigabyte EP45-DS3L \| Corsair 4GB DDR2-800 \| HIS 4870 1GB \| 5.5 TB \| CoolerMaster CM690 \| Dell 2408WFP \| Dell 248WFP \| Logitech G19, G25, M950, X530 Dell XPS 15 \| i7-2630QM \| Nvidia GT 525M 1GB \| 1080p

15th June 2010, 9:07 PM	#5
Primüs Member Join Date: Oct 2005 Location: Coffs Harbour, NSW Posts: 2,712	Here's my theory, which im pretty sure is correct: Because you have both Banner and Content float: left;, and your aside float:right;, since you had them in that order and Banner + Content side by side = wider then page, it dropped to new line. After that it had to start the 3rd div you mentioned in line to where it was up to. So by changing it around, the Banner and the Aside DIV now fit on that top line, then you declare your Content DIV which drops down to the next line (on the left as its float left). Does that make sense to you? Meaning i hope i explained it right. lol. __________________ I has blog!