Helpful Information
 
 
Category: CSS Help
Getting colours to fill columns using css

Yes that is how we spell colour in this part of the world, but that is not the issue.

OK, here is the problem: I have three columns of information on a page, positioned within divs using css (code to follow). One contains more content than the other. The problem is that the background colour only fills to the bottom of the content, not to the bottom of the page. How can I make it go to the bottom, without going back to tables?

HTML:


<div width="100%">
<div class="leftnav">
Navigation stuff goes here
</div>
<div class="bodytext">
The main body text goes in here. This is the heaps longer than the nav content
</div>
<div class="quicklinks">
Some more stuff here
</div>
</div>


CSS:



.leftnav{
position:absolute;
top:50px;
left:0px;
width:150px;
background-color:#ececdd;
}

.bodytext{
position:absolute;
top:60px;
margin-left:165px;
margin-right:160px;
}

.quicklinks{
position:absolute;
top:60px;
right:5px;
}


Thanks in advance.

Really!? You spell kolour with a c!? ;)

Add a border. Make the border the same kolour as the background.

NZ Joe, I see this posting is over two years old. Did you ever get your problem sorted? I have the same problem so if anyone out there can help...

add in a {code} display: Block {code} at the end of your <div> definition in your style, like:

#somthing { background-color: green; display: Block }


and if you didn't know
<div id="somthing"></div>
you can also try
<span id="somthing"></span>


and that should work...










privacy (GDPR)