Log in

View Full Version : two div's side by side


jc_gmk
10-03-2007, 10:59 AM
I am trying to put two divs side by side, sounds simple enough but I cant get it to work.

The divs must be positioned relatively.

Neither of them can float or be absolutley positioned as they will contain dynamic content and are needed to stretch the parent div.

The left one will contain an image and the right will contain text of various lengths.

I've google'd it but all the answers tell me to use float, however if I do that the parent div shrinks behind the two divs in question.

Any ideas?
coothead
10-03-2007, 11:51 AM
Hi there jc_gmk,

...but all the answers tell me to use float, however if I do that the parent div shrinks behind the two divs in question.
Take a look at this example, which will show you how to rectify that problem...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#parent_div {
width:600px;
padding:6px 0;
border:1px solid #000;
margin:auto;
}
#parent_div:after {
content:'';
display:block;
clear:both;
}
#left_child {
float:left;
display:inline; /*required by IE6*/
width:289px;
border:1px solid #999;
margin:0 3px 0 6px;
}
#right_child {
float:left;
display:inline; /*required by IE6*/
width:289px;
border:1px solid #999;
margin:0 6px 0 3px;
}
#left_child p,#right_child p {
font-family:sans-serif;
font-size:0.8em;
text-align:justify;
margin:4px;
}
</style>

</head>
<body>

<div id="parent_div">

<div id="left_child">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
</div>

<div id="right_child">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p><p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
</p>
</div>

</div>

</body>
</html>
coothead
jc_gmk
10-03-2007, 01:53 PM
Perfect, Thanks!
boogyman
10-03-2007, 02:08 PM
#parent_div:after {
content:'';
display:block;
clear:both;
}


the psuedo selector :after is CSS 2 and is not supported in IE6 or previous... just to let you know

IE6 has a decent amount of support for CSS1 (but not all)
and limited support of CSS2
and to my knowledge no support of CSS3
coothead
10-03-2007, 02:24 PM
Hi there boogyman,

the psuedo selector :after is CSS 2 and is not supported in IE6 or previous... just to let you know
But, as IE stubbornly refuses to render many aspects of CSS correctly, IE6 will position the parent div, incorrectly of course, around the the floated child divs. :eek:
The end result of all this being, unless I am mistaken, cross-browser compatibility. ;)

coothead
Rain Lover
05-02-2011, 05:38 PM
Dear Coothead,

Very useful example! I have a questions please:

Instead of the psuedo selector :after, can we simply set a fixed height, e.g. height:414px, to the parent division style?

Thanks in advance!
Mike
coothead
05-02-2011, 10:05 PM
Hi there Rain Lover,

this thread is over three years old. :eek:

I no longer use the pseudo selector :after for clearing floats. ;)
Instead I prefer to simply apply overflow:hidden to the parent.

If your desire is a fixed height container you may, of course, specify
a height value, but if you do not want the contents to spill out, then
you must use overflow:auto applied to the parent.

coothead
Rain Lover
05-03-2011, 02:46 AM
If your desire is a fixed height container you may, of course, specify
a height value, but if you do not want the contents to spill out, then
you must use overflow:auto applied to the parent.


Actually my division content is fixed and doesn't grow. So I thought it would make sense to directly address the problem by setting a fixed height to the parent div.

Thanks for the answer! :)