2 replies [Last post]
parahumanoid
Offline
newbie
Izmail, Ukraine
Last seen: 16 years 49 weeks ago
Izmail, Ukraine
Joined: 2004-03-28
Posts: 10
Points: 0

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?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 6 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

parahumanoid
Offline
newbie
Izmail, Ukraine
Last seen: 16 years 49 weeks ago
Izmail, Ukraine
Joined: 2004-03-28
Posts: 10
Points: 0

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.