SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie: I guess I don't understand DIV! Please explain example

    I thought that each "simple" DIV started with a new line. Please explain why the second DIV in the example positions itself after ("to the right of...") the first DIV if I include a "float:left" as the CSS for the left DIV. IOW, I don't understand why the second DIV is affected by the positioning of the first DIV.

    TIA

    Example Page:


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <style>
    #colA {
    float: left;
    }
    </style>
    </head>
    <body>
    <div id="colA">This is the first column</div>
    <div id="colB">This is the second column</div>
    </body>
    </html>

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first DIV is floated to the left. A floated element is taken out of the normal document flow, and doesn't affect its parent element or subsequent block-level elements. Think of it as if the floated element is lifted up and floats above the rest of the document.

    The only effect a floated element has on non-floated content is that lines of text (technically 'line boxes') are shortened next to it, so that they won't end up underneath the float.

    What happens in your example is that the first DIV will reside on top of the second DIV. Set some borders or a background colour for #colB and you'll see what I mean. The line boxes in the second DIV that are adjacent to the floating DIV will be shortened, so the content at the top of the second DIV will appear to the right of the first DIV.

    If the second DIV is taller than the first, the text will flow back to the left edge below the floating DIV. (In this case; there are ways to prevent that.)

    Note that this isn't specific to DIVs. All visible element types in HTML can be floated.
    Birnam wood is come to Dunsinane

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you want to prevent #colB from being alongside the floated content then use the clear property on it. e.g. #colB {clear:both}. The clear property will ensure that elements have no floated content alongside them (i.e. to the left or right or both).

    Of course this begs the question as to why did you float #colA in the first place as one of the main reasons for floating is to allow other content to wrap alongside!

  4. #4
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Tommy,

    A-1 explanation...I think! Where I am going with this is setting up a header/footer 3-col page layout and find it confusing. I added a "float:left" to my "ColB" and it positions after ColA and added the borders so I could see what was going on. ColB posioned itself horizontally after ColA. So, then "float's" position themselves after one another? IOW, the ColB "float:left" doesn't float to the left of the page, but the float starts after the previous element, right?

    TIA

  5. #5
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Paul,

    From my comment to Tommy you can see where I am going. Also, just printed off your "2-Column" article so I'll probably get answers there.

    Larry

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have several floats side-by-side. The reason yours aren't, is probably because you haven't specified any width for them.

    If you float an element to the left, it will shift as far to the left as possible. That means until it touches the parent's 'padding edge' (the outer limit of the parent's padding area) or until it touches another element that has already been floated to the left.

    If there isn't room for a floated element because there are other floats in the way, it will drop down as far as is necessary to make room for it. That doesn't necessarily mean that it will drop below all floated predecessors, though.

    We're not allowed to link to our own articles here, but if you search for "float layouts" (without the quotes) in Google or Yahoo!, you'll probably find an article I wrote about floats. (It's #1 in both right now.) Quite a few people have said they found it useful.

    Floats is a complicated issue, so don't feel bad if you have to read the article a few times to get it. There are also lots of float-related browser bugs, especially in IE. There are known workarounds for most of them, though, which you can find at Position Is Everything.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow!!! Just about 1-2 more hours of this BS and I'm back to tables! Lot's of work for next to nothing, IMHO! I had a page working great... Looked "perfect" in IE, and then I fired up Firefox. Now, back to the drawing board. (And, no, I am not defending IE. Probably after the FF change, the IE page will look like crap!)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Wow!!! Just about 1-2 more hours of this BS
    Sorry but you can't learn CSS in 1 to 2 hours .

    It's such a rich medium that it requires a good understanding before you can apply the concepts efficiently. You wouldn't expect to learn anything else without studying it so why think that CSS can be applied without learning the basic concepts.

    You will get expert help here with the right attitude but denigrating CSS isn't the right way to go about it

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul's right. A more realistic expectation would be one to two years to really grasp most of what CSS can do, and then, if you spend enough time with it, you'll find that you're spending the rest of your life trying to figure out how far you can really push its limits.

  10. #10
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are probably right, but I gave up, created a table and have already presented my invoice to the customer. When you are doing this stuff for $$$ the name of the game is to get the work out. But, I'll keep working at it in my spare time.


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
  •