Topic: Balancing Columns Using DIV's (Page 1 of 1)

I'm hoping someone can help me with the following: I have a fairly standard looking page layout - a sidebar DIV and a main content DIV contained within a wrapper DIV to center them on the page, all followed by a footer DIV which spans the whole page. The main content DIV has a border defined down the left side to separate it from the sidebar - the resultant page looks like this. Just what I want. The problem occurs when the mian content is shorter than the sidebar - in that case the page looks like this. As you can see, the separating border only goes to the end of the main content DIV, not all the way to the footer. Can anyone tell me if it's possible to force the main content DIV to be at least as long as the sidebar? The CSS I'm using is as follows:

body {
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
#mainwrapper {
width: 720px;
margin: 0px auto;
padding: 0 12px;
}
#maincontent {
float: left;
width: 520px;
margin: 0;
padding: 0 0 18px 18px;
border-left: 2px dotted #FF9B00;
text-align: justify;
}
#sidebar {
float: left;
width: 160px;
padding: 0 18px 0 0;
}
#footer {
clear: both;
padding: 0px;
border-top: 2px dashed #FF9B00;
}


I'd really appreciate a solution to this - many thanks,

Simon

(Edited by Simon Figg on 02-09-2005 18:55)

(Edited by Simon Figg on 02-09-2005 18:56)

Well, one possiblity is to place the sidebar DIV inside the main content DIV. Then if the text overflows the minimum size of the sidebar DIV that DIV will stretch, taking the main content DIV with it, then you define your right border on the sidebar DIV instead of left border on the main. Other than that without changing your markup the only way to 'force' two DIVs to be the same size is using javascript to either change the size of one to match the other or to use javascirpt ot alter the stlyes, giving whichever one is longer the border.


Justice 4 Pat Richard

I have found when creating a web page that the CSS coding can often cause the page to go everywhere. Try making the sidebar an absolute and not float it. it may help with this problem

Well this is not possible how you have it to my understanding. The content will only start to expand once it is passed the viewport (what you see before scrolling). There is a way around it that is a little more complicated..but can be done =D

Read this:
http://www.sitepoint.com/forums/showpost.php?p=1243541&postcount=8

At the end of it there is a link to an example that you could modify or look at to get the effect you want..here's that link:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Hope this helps

Edit:
Oh yea, if you are just concerned about the dashed line not going down all the way when the content is small..you can make that part of the bkg img and it will give you the same effect. Course I dont know what your final layout will look like so not sure if this applies.

Good luck!

(Edited by Shifter on 02-10-2005 05:34)

Thanks for all the suggestions. In the end, the quickest and easiest way turned out to be putting a background image in the wrapper - thanks Shifter! It's not ideal, because I'll have to edit the background image if the width of the sidebar changes, but it will do until I have time to try the other solutions.

Cheers,

Simon