SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 coloumns, 2 floats and one margin?

    Hi im trying to make a simple 3 col layout:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    	<title></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    	<link rel="stylesheet" type="text/css" href="styles.css">
    
    </head>
    <body>
    
    <div id="wrapper">
    
    	<div id="banner">
    		<img src="images/banner.jpg" alt="banner">
    	</div>
    
    	<div id="left">
    	hi
    	</div>
    
    	<div id="mid">
    	hi
    	</div>
    
    	<div id="right">
    	hi
    	</div>
    
    </div> <!-- end wapper -->
    
    </body>
    </html>
    Code:
    *
    {
    margin: 0;
    padding: 0;
    }
    
    body
    {
    font: 100.01%/1.17 Arial, Helvetica, sans-serif;
    background-color: #212020;
    color: #FFFFFF;
    }
    
    #wrapper
    {
    width: 800px;
    margin: 0 auto;
    background-color: #2E2E2E;
    }
    
    #banner img
    {
    width: 800px;
    height: 150px;
    }
    
    #left
    {
    width: 150px;
    float: left;
    }
    
    #mid
    {
    width: 500px;
    margin: 0 auto;
    }
    
    #right
    {
    width: 150px;
    float: right;
    }
    I thought using two floats and a auto margin would work.
    However the third 'hi' the one in the right div, jumps onto the next line and isnt even in the wrapper's backgrounf color. What am i doign wrong?

    thanks

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,

    For that model of 2 floats and 1 static column - The floats need to be first.
    So the order in the markup is:
    Left
    Right
    Middle

    But, IE6' 3px jog (see FAQ on floats) causes the column to drop anyway.

    Because you're model is fixed width just float everything left.
    Code:
    #left {
    	width: 150px;
    	float: left;
    }
    #mid {
    	width: 500px;
    	float: left;
    }
    #right {
    	width: 150px;
    	float: left;
    }
    Hope it helps

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey

    When I do that the divs are in the right position, however, they dont take the background color of the wrapper?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Because everything is floated - You'll need to clear them,
    setting width: 100&#37;; on the wrapper would clear them in IE.
    Setting overflow: auto on the wrapper will clear them in most other browsers.
    There's other clearing techniques in the FAQ.


Bookmarks

Posting Permissions

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