SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Colum Layout -

    Hi I'm working on a two column layout for a site and found this example:

    http://www.mezzoblue.com/archives/20...once/index.php

    Now that works fine for a liquid layout, but when I tried to use that layout using a "container" DIV (to set the width), IE seems to add a pixel or two of white space, pushing the "content" DIV below the "nav" DIV, though the widths total the "container":

    Code:
    div#container {
    	width: 746px;
    	padding: 0;
    	margin: 0;
    	border: 0;
    }
    
    div#header {
    	height: 114px;
    	background-color: #396886;
    }
    
    div#nav {
    	width: 195px;
    	float: left;
    	background-color: #F8F7F3;
    }
    
    div#content {
    	width: 551px;	
    	margin-left: 195px;
    	background-color: #fff;
    }
    The "content" DIV get's pushed down below the "nav" DIV. I thought if I added "clear:right" to the "nav" DIV that would work...

    Also I searched through the other posts and found one that Paul O'B had answered with this example: http://www.pmob.co.uk/temp/2coltest.htm

    Any suggestions, or links to other resources..

    Thanks, Jamie
    ----
    Cheers, Jamie

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I forgot to add:

    I took out the margin for the content DIV, and and both align up the way I intended, but is there a different way that this can be accomplished>

    -jamie
    ----
    Cheers, Jamie

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

    Ie adds 3 pixels of space on static content alongside floats and this is the infamous 3 pixel jog. If you read the faq on floats there are long explanations and a full solution to this problem.

    You could simply have left a width out of your content and it should have slotted in ok but would still have the 3 pixel jog. However in a 2 column layout of fixed width you are probably better off floating both elements. float one left and the other right and the three pixel jog disappears.

    Paul

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. Always a great help!

    -J
    ----
    Cheers, Jamie


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
  •