SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Newbie with float problem

    I have a containing div and in that I have div which is now set float left (so out of the flow so the 'next div' moves up and its content goes around the shape of the floating div.

    This is fine, but only when the items contained in the 'next div' have boarders around them. If I remove their borders then the two divs seem to behave like block boxes and the 'next div' and its contents are below the first div.

    I realise this is not the full story, but can any one advise me of any general reason why adding borders to items might have an impact on the positioning of their containing block?

    What is the best stratefy to debug this? I have Vis Studio 2008 CSS Propertes, but after adding the borders through a class, or removing I can see no change to what is inherited and what is not, to be able to identify the cause. Are there any tools out there that will provide some kind of cause/effect presentation so you could know what set of conditions lead to the positioning and thereby identify the link to the borders?

    Any help or advice for this css newbie greatly appreciated.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Borders will have no reason to make elements behave like blocks.

    I'm assuming that what you mean is when you apply borders it drops the next div down? When you add borders it adds to the total width of an element.

    Say you have 2 columns, both floated and the parent is 800px wide.

    You set them both to 400px and then you set one column to have border:1px solid red;.

    That's 2px total borders and thus the width of both columns = 802px. Thus since it doesn't have room to fit it will drop dwon thus a float drop.

    Count your widths on the columns, borders/margins/paddings add to the total width of the element. Make sure they all match up and there is enough room .

    If not you can post a link to the page in question and we will sort this out for you

    Firebug is a great tool for debugging.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I shall take a look at fire bug. I'm looking to understand CSS and debug rules and reasons, not ustogenerate. Hopefully it will do the job.

    The page&css need a little (lot of) tidying, though I could post as is if you feel appropriate. However my problem seems to be the other way around, when the borders are ADED the 'next div' moves up and drops below the floated div when borders removed. The borders however are on the content of 'next div'.

    I thought once the first div is floated it is actually out of the flow and the second div moved up is actually taking up the entire width of the container, but it's just that its contents flow around the shape of the floated div.

    Thank you again.

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

    As Ryan said borders on static elements will have no effect on a float and in fact should slide under the float while the foreground content is repelled.

    Here is a basic floated block - can you adjust it to show the effect you were seeing so that we can see what you were doing.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0 0 1em;
    }
    #wrap {
        width:800px;
        margin:auto;
        background:#fffccc;
        padding:5px;
    overflow:hidden;
    }
    .fl {
        float:left;
        width:300px;
        background:blue;
        border:1px solid #000;
        height:200px;
        margin:5px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div class="fl">Float</div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet diam lacus, sit amet facilisis turpis. Mauris posuere viverra bibendum. Pellentesque gravida vehicula sollicitudin. Pellentesque tellus ligula, dignissim in viverra sed, euismod sit amet erat. Ut dapibus risus nec lorem semper consequat vestibulum eros consectetur. Suspendisse tempus quam sit amet turpis auctor sed adipiscing sem placerat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet diam lacus, sit amet facilisis turpis. Mauris posuere viverra bibendum. Pellentesque gravida vehicula sollicitudin. Pellentesque tellus ligula, dignissim in viverra sed, euismod sit amet erat. Ut dapibus risus nec lorem semper consequat vestibulum eros consectetur. Suspendisse tempus quam sit amet turpis auctor sed adipiscing sem placerat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet diam lacus, sit amet facilisis turpis. Mauris posuere viverra bibendum. Pellentesque gravida vehicula sollicitudin. Pellentesque tellus ligula, dignissim in viverra sed, euismod sit amet erat. Ut dapibus risus nec lorem semper consequat vestibulum eros consectetur. Suspendisse tempus quam sit amet turpis auctor sed adipiscing sem placerat.</p>
        </div>
    </div>
    </body>
    </html>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hardya View Post
    Thank you. I shall take a look at fire bug. I'm looking to understand CSS and debug rules and reasons, not ustogenerate. Hopefully it will do the job.

    The page&css need a little (lot of) tidying, though I could post as is if you feel appropriate. However my problem seems to be the other way around, when the borders are ADED the 'next div' moves up and drops below the floated div when borders removed. The borders however are on the content of 'next div'.

    I thought once the first div is floated it is actually out of the flow and the second div moved up is actually taking up the entire width of the container, but it's just that its contents flow around the shape of the floated div.

    Thank you again.
    As Paul asid, we would need to see a page in question, and tell us where to add the borders so we can replicate the effect . Without your full code our efforts will probably be folly.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I shall post the code when I have tidied it up.

    By the way. I downloaded firebug with firefox, but this doesn't help me because I discover this problem (which I wouldnt expect to happen any way) that I am seeing in IE 8 does NOT occurr in Firefox 3.6

    Not sure if that gives any clues. But yes I shall provide (such as it is) code. It may have other errors, but possibly it ought not do what it is doing despite those.

    Is there a tool that is highlites browser anomolies?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    IE has a developer toolbar but I just use firebug to look at the code and then I do a test in IE (or whatever browser has the quirk) and that's generally good enough for me.

    The developer toolbar should have what you need but it's a tad bit low tech
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •