Fill color in excess content box

[Shadow X]

Hey everyone!

I just started learning CSS to make website and I am now stuck in a problem. My CSS layout have a content area and a sidebar, but when the sidebar has much more content than the content area it height will increase. This cause an excess space at my content box. The same goes for the sidebar, when my content area has more content than my sidebar, this happens.

I guess looking at the image that I uploaded will help you to see a better picture (http://img708.imageshack.us/i/bgquestion1.jpg/) I would like to fill the excess area at my content box with white color until it reaches the footer of my layout or at the same height as my sidebar.

This is the URL that I am currently testing the code and layout with,
http://zn-mf1.webs.com/index.htm

Hope you guys understand what my problem is if not I will try to explain it again.

[mlegg]

If you add <div style="clear:both;"></div> under the container it will work. You can also add your padding into the css content.

<div id="content">
	<div class="padding">
	<h2>About</h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
        Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
	
	<h2>Contact Us</h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
        Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
	</div><div style="clear:both;"></div>

Here is what you can do with the CSS, see how the padding property is in with the div:

#sidebar-a {
	float: right;
	width: 280px;
	height:auto;
	background: #242426;
	line-height: 18px;
       padding: 25px;
}


#content {
	margin-right: 280px;
	background: #FFF;
	line-height: 17px; 
        padding: 25px;
}

[Shadow X]

Oh my gosh! <div style="clear:both;"></div> works! Thanks alot! I can finally continue working on the layout.

Once again, thanks.

[mlegg]

You're welcome, and funny but my 1st question here was almost identical to yours. It drove me nuts that the one part didn't fill the page

[Shadow X]

Indeed, this drove me mad for like 8 hours while I keep looking around the internet for a solution. I posted in other coding forums for help too. You are the first to reply and I it worked.

[Shadow X]

Ar damn! Sorry for the double post.

But my happiness was short lived. The code work perfectly on the content box, but now the side bar is having the same problem and it wouldn't fill up despite me adding the code.

This is the webpage http://zn-mf1.webs.com/index1.htm.

Need help please. Thanks!

[mlegg]

I'm sorry I haven't gotten back to you. I have serious family needs to take care of right now. Hopefully another person will get back to you.

[coothead]

Hi there Shadow X,

I have reworked your page slightly.

You can download the fruits of my labours here...

• Shadow X.zip

Further reading on the method used:-

• Faux columns

I trust that this will help to get you going again.

coothead

[ajfmrf]

megaupload.com

Never heard of it and I am suspicious of it???

Bud

[djr33]

Megaupload is a filesharing website. It allows users to upload files directly, so there is no reason to trust or not trust a file because it's on the site-- if you trust the user who uploaded it, then it's probably fine-- no different than a file attachment in a post here, really. (If anything, you might want to watch out for some of the ads, though. It's one of those sites that has lots of ads, so some of them might be the kind with strange cookies or something.)
Personally, I significantly prefer yousendit.com at least for files that fit within it's 50mb limit for free accounts. (Or whatever the limit is at the moment. It changes once in a while.)

coothead, you are welcome to attach a zip file up to 97kb here. It looks like that file is slightly larger, but keep that in mind for the future.