...

View Full Version : clearing floated divs: best practice



Fumigator
05-15-2009, 01:07 AM
I'm creating a div that I want to look like the attached image below. Here is the HTML and CSS that I ended up with, and Iím hoping someone can review it and make recommendations to see if I can make it more simple or use a different method of clearing the floated divs to achieve the look.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="hover.css" rel="stylesheet" type="text/css" />
<title>Test InfoHover Div</title>
</head>
<body>
<div id="container">
<div id="thetitle">
<div id="coords">
a45,b40,c38
</div>
<div id="tractdesc">
Farmland
</div>
<div id="upgradelevel">
Level 8
</div>
<div class="clearbox">&nbsp;</div>
</div>
<div id="content" class="clearbox">
<div id="icon">
<img src="field2.png" alt="Farmland" title="Farmland" width="53px" height="61px" style="border: 0px solid #ccc;" />
</div>
<div class="detail">
<p>Owner: Fumalot</p>
<p>Upgraded to Level 8 with Greenhouse Level 3</p>
<p>60/60 workers happily sew and reap</p>
<p>Food production/hr: 158</p>
</div>
<div class="detail">
<p class="bold">Next Upgrades</p>
<p>Farmland Level 9: +4 prod/hr</p>
<p>100 ore 100 lumber 100 clay 100 food
<input type="button" class="smallbtn" name="upgradetract" value="Upgrade" />
</p>
<p>Greenhouse Level 4: +3 prod/hr</p>
<p>100 ore 100 lumber 100 clay 100 food
<input type="button" class="smallbtn" name="upgradetract" value="Upgrade" />
</p>
</div>
<div class="clearbox">&nbsp;</div>
</div>
</div>
</body>
</html>




body{
font: 76% arial,sans-serif;
text-align:center;
background: #f8f6e4 url(img/back.png) top center repeat;
color: #631d14;
}

p {
margin:0 10px 10px;
}

div#container{
text-align:left;
width:275px;
/* height: 200px; */
margin:0 auto;
background: #f8f6e4;
color: #000;
border: 1px solid #000;
position:relative;
}

div#thetitle {
background: #e0e0f0;
color: #000;
border-bottom: 2px solid #888;
clear: both;
}

div#tractdesc {
float: left;
font-weight: bold;
margin: 0 0 0 3px;
}

div#upgradelevel {
float: left;
margin-left: 50px;
}

div#coords {
float: right;
margin: 0 3px 0 0;
}

div#icon {
float: right;
text-align: right;
}

.detail {
border-bottom: 2px solid #000;
padding-bottom: 3px;
}

.clearbox {
clear: both;
height: 0px;
/* border: 1px solid #66a; */
}

.detail p {
font-size: .9em;
line-height: 12px;
margin: 3px 0 2px 6px;
padding: 0 0 0 2px;
border-left: 4px solid #ccc;
}

div#content {
width: 100%;
background: #fafaf5;
color: #555;
text-align: left;
padding: 0px;
clear: both;
}

html>body #content {
height: auto; /* for not-IE */
}

.bold {
font-weight: bold;
}

.smallbtn {
font-size: .9em;
font-weight: normal;
border: 1px solid #99f;
background: #ddf;
}



In regards to div c, which can be shorter than div d, which when optional div e and f are not there causes div aís bottom to appear above div dís bottom. I thought I understood the whole "clear" thing when dealing with floated divs, but I had to resort to using a fake div with style of clear:both;height:0px; to get the clear to actually work (look for the CSS class clearbox).

All suggestions welcome.

_Aerospace_Eng_
05-15-2009, 01:19 AM
IE6 and sometimes IE7 tend to play nicer when you have the "fake" clearing div in there but many times they don't care. The "new" method of clearing is

http://www.quirksmode.org/css/clearing.html

I use both but never at the same time.

abduraooft
05-15-2009, 11:20 AM
The "new" method of clearing is

http://www.quirksmode.org/css/clearing.html Adding overflow:auto; to the container may bring an unwanted scroll bars, in some cases. So, whenever I hesitate to add the extra html markup, I prefer the method used in the bonrouge layouts (http://bonrouge.com/3c-hf-fluid.php)

#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
along with giving a Layout to the container adding height:1%; for IE (zoom property is invalid as per css validator).
ie a slight variation of the method at www.positioniseverything.net/easyclearing.html

Fumigator
05-18-2009, 06:50 PM
Hey thanks guys for the info-- with the available solutions I'll probably keep the bullcrap clearing divs in for now, as I don't like extensive CSS trickery (especially conditional comments, ew) so even though my HTML markup will be a little more bloated, at least it will make sense to me 2 years later when I try to figure out my own mess.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum