www.webdeveloper.com
Results 1 to 3 of 3

Thread: Float prevents background color from showing

Hybrid View

  1. #1
    Join Date
    Nov 2008
    Location
    NC, USA
    Posts
    29

    Float prevents background color from showing

    One of my students had an interesting problem that I was able to resolve the code, just would like some type of explanation as to why it happened. Here are excerpts of the code:

    body { background-color: orange;
    color: #d5e3ff;
    font-family: Verdana, Arial, sans-serif;}
    #wrapper { margin-left: auto;
    margin-right: auto;
    min-width: 700px;
    width: 80%;
    color: #000066;
    background-color: #ffffff; }
    #leftcolumn { float: left;
    width: 150px; }
    #rightcolumn { float: left;
    margin-left: 180px;
    padding-bottom: 20px; }

    <body>
    <div id="wrapper">
    <div id="leftcolumn">
    <ul><li> <a href="index.html">Home</a></li>
    <li> <a href="services.html">Services</a></li>
    <li><a href="askvet.html">Ask the Vet</a></li>
    <li><a href="contact.html">Contact</a></li></ul></div>
    <div id="rightcolumn">
    <dl><dt class="category" >Full Service Facility</dt>
    <dd>Vererines and staff are on duty 24 hours a day, 7 days a week.</dd>
    <dt class="category">Years of Experience</dt>
    <dd>Fish Creek Veterinarians have provided quality care for your beloved animals since 1984</dd>
    <dt class="category">Open Door Policy</dt>
    <dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd></dl>
    </div></div>
    </body>

    The content in the wrapper is supposed to show on a white background but because of the 2 float: left rules, the white background is ignored (or overwritten) and the orange background appears. If the float: left rule in the rightcolumn id is removed, the background appears white as it is supposed to. I have removed some code in order to post here, but this code will render with the problem.
    Thanks to anyone that can shed some light.
    Bob McP

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    The reason is that floated elements are removed from the normal document flow, so the other elements on the page do not automatically change to accommodate them. The upshot here is that the #wrapper effectively has no height - hence, its background color does not appear on the page. A good way to work in this situation is to apply the "clearfix" method. You enclose the floated elements in a block-level element like a <div> and use the CSS psuedo-class ":after" to apply a 'clear' property to a seemingly invisible element. As in:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body { background-color: orange;
    color: #d5e3ff;
    font-family: Verdana, Arial, sans-serif;}
    
    #wrapper { margin-left: auto;
    margin-right: auto;
    min-width: 700px;
    width: 80%;
    color: #000066;
    background-color: #ffffff; }
    
    #leftcolumn { float: left;
    width: 150px; }
    
    #rightcolumn { float: left;
    margin-left: 180px;
    padding-bottom: 20px; }
    
    #inner:after {
    	display: block;
    	content: "";
    	clear: both;
    	height: 1px;
    }
    
    </style>
    </head>
    <body>
    <div id="wrapper">
    
    <div id="inner">
    <div id="leftcolumn">
    <ul><li> <a href="index.html">Home</a></li>
    <li> <a href="services.html">Services</a></li>
    <li><a href="askvet.html">Ask the Vet</a></li>
    <li><a href="contact.html">Contact</a></li></ul>
    </div><!-- end #leftcolumn -->
    <div id="rightcolumn">
    <dl><dt class="category" >Full Service Facility</dt>
    <dd>Vererines and staff are on duty 24 hours a day, 7 days a week.</dd>
    <dt class="category">Years of Experience</dt>
    <dd>Fish Creek Veterinarians have provided quality care for your beloved animals since 1984</dd>
    <dt class="category">Open Door Policy</dt>
    <dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd></dl>
    </div><!-- end #rightcolumn -->
    </div><!-- end #inner -->
    
    </div><!-- end #wrapper -->
    </body>
    </html>
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2008
    Location
    NC, USA
    Posts
    29
    Thanks for the reply & info. Its good to have a legitimate resource that have valid responses.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles