keeping div containers the same length

paulbok · 06-11-2012 12:06AM #1

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 · 06-11-2012 07:09PM

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 · 07-11-2012 08:32PM

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 · 11-11-2012 02:22AM

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 · 11-11-2012 11:16PM

Cheers Feathers, that's worked for me.

keeping div containers the same length

Comments