SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS layout help, please

    I'm doing a layout in four equal size boxe, a 2-by-2 grid effectively. I want the content of the bottom-right box to appear in the markup before the top-right box, so I decided to absolutely position the top-right box and float all the rest:
    HTML 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">
    <head>
    <title>Four Boxes</title>
    
    <style type="text/css">
    
    body {
    	text-align: center;
    	background: #fff;
    }
    
    #container {
    	margin: 0 auto;
    	width: 600px;
    	text-align: left;
    	position: relative;
    }
    
    #one, #two, #three, #four {
    	width: 300px;
    	height: 300px;
    	margin: 0;
    	padding: 0;
    }
    
    #one {
    	background: #fcf;
    	float: left;
    	width: 301px;
    }
    
    #two {
    	background: #ffc;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    }
    
    #three {
    	background: #cff;
    	float: left;
    	clear: left;
    }
    
    #four {
    	background: #cfc;
    	float: right;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="one">Logo</div>
    
    <div id="three">Navigation</div>
    
    <div id="four">Content</div>
    
    <div id="two">Picture</div>
    
    </div> <!-- /container -->
    
    </body>
    
    </html>
    In IE6, all the others are in their correct places, but the top-right box ("Picture") has vanished.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Another strange IE foible

    It can be fixed with adding clear:both:
    Code:
    #two {
     background: #ffc;
     position: absolute;
     top: 0px;
     right: 0px;
     clear:both;
    }
    I'm afraid theres no rhyme or reason to that bug as clear:both means nothing to that absolutely placed element, yet it seems to make ie work.

    Paul

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers mate.


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
  •