Sun, 2004-03-28 22:05
So, you have a DIV element of a certain width. You also have two other DIV elements, roughly 40% of the width of the first, nested within. What you need is for the two to be side by side inside the first one. Should you try floating them, you would see that while in IE everything is just peachy, compliant agents like those that are Gecko-based (Mozilla, etc.) will refuse to resize the container just because a floated element is growing big. Tried inlining them. Doesn't seem to do a trick for mozilla. Ideas?
Sun, 2004-03-28 22:29
#1
Fighting a compliant agent
Floating is the way to go, but it will require a {clear:both;}
For example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Floating </title>
<style type="text/css">
#container {width:500px; border:1px solid #000; background:#eee; padding:5px;}
#leftcol {width:40%; float:left; background:#ddd;}
#rightcol {width:40%; float:left; background:#ccc;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="rightcol">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div class="clear"></div>
</div>
</body>
</html>
Mon, 2004-03-29 22:15
#2
Fighting a compliant agent
Thanks. How come I didn't think of it, I don't know. It's a nice way to get out of this jam. Thanks again.