SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image drops down in IE 6

    Hi there as I stated above I would like the map image in this layout.

    Can anyone give me a tip as too would that is happening?

    thanx in advance

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not had time to really investigate this but if you change you're right column to this then it will work.

    Code:
    #rightColumn {
    	padding-top:0;
    	background-image: url('../images/lightBlu_bak.gif');
    	background-repeat: repeat;
    	float: right;
    	width: 574px;
    }

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

    Its the 3px jog on static content that is alongside floats (see faq on floats).

    When you have a 2column fixed width layout then its best to float both columns and avoid the 3px jog completely, which is what Dave's solution above will do nicely for you

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for explaining further that Paul, I wasn't sure whether it was a haslayout problem or the 3px jog without having a play around with it.

    I've not tested this but I think you may have problems with haslayout as well once both columns are floated so you'll probably need to apply overflow:auto; to the contain <div> or float the parent items and give them a width so they expand (in height) to include the children.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floating the right column did result in the haslayout problem but was fixed by applying a width and overflow auto to the contain div parent.

    Thanx for your replies guys.
    Last edited by webberoo; Oct 16, 2007 at 17:03.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Floating the right column did result in the haslayout problem
    No that was a clearing problem because floated elements take up no space in the parent container. You will always need to clear floats if there is no other content in the container that can be used as a clearer.

    BTW floats have "layout" by default and don't suffer from "haslayout" problems (although they still do have bugs - confusing isn't it )

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    -You will always need to clear floats if there is no other content in the container that can be used as a clearer.

    Paul I'm not sure what you mean by using content as a clearer?

    And yes, css can be confusing at times but then again also quite straight forward :O

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Paul I'm not sure what you mean by using content as a clearer?
    If you have other content in the same content as the float then you can set that to clear both.
    Code:
    <div class="float-container">
        <p class="floated-element">I am a float</p>
        <p class="clearer">I am set to clear:both and will clear the float and make the container wrap around me.</p>
    </div>
    In the above example the content is used to clear the float but if the container had no other content except floats the you would need to use a clearing technique. The most basic of which would be to put an empty div after the float and set it to clear:both (see faq on floats).


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
  •