keeping div containers the same length

paulbok

I have 2 div tags nested within a parent div.
they are for a main content section & a rhs side content.
I have them positioned correctly horizontally but the problem I'm having is than when the main content fills up more than the right content and expands down the page, the right hand content stays the same length.
How do I set them to keep the same length?

HTML

< div id="container">

<div id="main>
Lorem....
</div>

<div id="rightside">
lpsum...
</div>
</div>

CSS
#main {
float: left;
width: 760px;
height: 100%;
position: relative;
}
    
/* All Right side Styles */
#rightside {
float: right;
position: relative; 
width: 198px;
height: 100%;
}

#container {
clear:both;
}

COYW

Put the text inside paragraph or span tags, depending on how long the text is and set word-wrap:break-word; tag in your #main.

< div id="container">

<div id="main>
<span>Lorem....</span>
</div>

<div id="rightside">
<span>lpsum...</span>
</div>

</div>

CSS

#main {
float: left;
width: 760px;
height: 100%;
position: relative;
word-wrap:break-word;
}

mewso

Depends on how each div is distinguished. You don't have any background colour specified but if you are using colour then give the container the background colour you want for the left hand div and float it left. Then specify a bg colour for the right side div and when it stretches it stretches the container with it giving the illusion that the left hand div is expanding.

Feathers

From the sound of it, you're looking for a Faux Columns technique.

• Here's an (old) article on A List Apart outlining what most people do.
• As of a year ago, here's my new favourite technique for Faux Columns using negative margins

HTH.

paulbok

Cheers Feathers, that's worked for me.