Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    clearing floated divs: best practice

    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.

    Code:
    <!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>
    Code:
    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.
    Attached Thumbnails Attached Thumbnails clearing floated divs: best practice-hovercssplan.png   clearing floated divs: best practice-hovercssplan-2.png  

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Fumigator (05-18-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    Code:
    #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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Fumigator (05-18-2009)

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •