SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css template-2 col fixed width float

    Link: http://www.mimbee.net/test/Generic/generic2.dwt

    I have based this template on the css template-"2 col fixed width float" from the Sitepoint CSS Anthlology By Rachel Andrew. It looks as it should in the design view in Dreamweaver MX2004, but as you see, when published the right column which should float right, displays under the left column instead.
    Can any one help please?

  2. #2
    SitePoint Member pubsinbgk's Avatar
    Join Date
    Apr 2005
    Location
    Den,Heaven.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mimbee
    Link: http://www.mimbee.net/test/Generic/generic2.dwt

    I have based this template on the css template-"2 col fixed width float" from the Sitepoint CSS Anthlology By Rachel Andrew. It looks as it should in the design view in Dreamweaver MX2004, but as you see, when published the right column which should float right, displays under the left column instead.
    Can any one help please?
    Hi,

    In Dreamweaver it floats to the left as i do not have the CSS file, but with the link you have specified above it shows to the right. I use IE 6.0.

    Pubsinbgk

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

    Unless I've added up incorrectly then you seem to be a pixel out anyway. the width of the container is 728px mins 4px for borders = 724px. The content is 515 +10px =525 and the right is 200px. Therefore 515 + 10 + 200 = 725px which is 1 px too large.

    the other problem is ie's layout bug and can be fixed with the height:1% hack as follows.

    Code:
    #content {
     width: 514px;
     float: left;
     padding: 5px 10px 0 0;
    }
    #textArea {
     background-color: #ffffff;
     width:500px;
     padding-right:4px;
    }
     
    /* mac hide \*/
    * html #nav, * html #googleTower{height:1%}
    /* end hide */
    Hope that helps.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - it worked! I can understand the first bit - I forgot to add the 4px for the borders. However the second bit, the height:1% hack has got me. Can you explain how it works and why it is needed please?

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

    The height:1% hack is needed to force ie into "layout" mode. This is an internal part of IE that msn seems to have implemented without really telling anyone.

    http://msdn.microsoft.com/workshop/a...tion.asp#intro
    http://msdn.microsoft.com/workshop/a.../haslayout.asp

    Elements without dimensions don't produce layout and as a consequence behave differently than they should. Suffice to say that elements without layout don't really know what their dimensions are and leads to all sorts of guillotine and peek-a-boo bugs.

    There are number or properties that will force layout as you can see from the links above but the safest is to use the height:1% hack because ie treats height as a minimum and will always expand to accept the content (if overflow hasn't been set of course).

    You only need to use the hack if you notice that the element isn't behaving properly and other browers are displaying it properly. You can almost be sure to require it when setting an elements dimensions by using margins alone as this confuses ie completely.

    Hopefully this will be fixed in ie7 but we will have to wait and see


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
  •