SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2002
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm Sorry...But One Last Thing With Mozilla

    Again, I'm sorry for all these layout problems. This is the last thing, I promise!

    http://www.thebigtymer.com/demo/monkeyradioquirks.html

    I have 3 divs, side-by-side, within a container div. The container div is supposed to have a background that stretches all the way down. However, in Mozilla, it only encompasses the padding right now, because the 3 divs within are FLOATED, therefore not taking up space.

    If I unfloat those divs, the background works, but the divs just stack up on top of each other.

    How do I unfloat these divs, yet keep them side-by-side?

    Thanks!

  2. #2
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could try adding a transparent spacer image thats say 1px wide by whatever height you want the background to extend...that should work......and also...im assuming you've already tried specifing the height of the container div correct?

  3. #3
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Couldn't you make their position absolute?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hartmann
    Couldn't you make their position absolute?
    Ding ding ding, we have a winner! However, absolute positioning will also remove the <div>s from the document flow. Instead, you can do something like this:
    Code:
    #container {
      position: relative;
    }
    #left {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
    }
    #middle {
      margin-left: 200px;
      margin-right: 200px;
    }
    #right {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
    }
    HTML Code:
    <div id="container">
      <div id="left">left column</div>
      <div id="middle">Middle column. Still in document flow :)</div>
      <div id="right">right column</div>
    </div>

  5. #5
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Ding ding ding, we have a winner! However, absolute positioning will also remove the <div>s from the document flow.
    See, I am learning, slowly but surely. By removing the <div>s from the document flow you mean that you will not list the <div>s in the order they appear correct?

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hartmann
    See, I am learning, slowly but surely. By removing the <div>s from the document flow you mean that you will not list the <div>s in the order they appear correct?
    Well yes, you can place those <div>s anywhere you want within its container since you're removing them from the normal document flow. However, removing EVERY child element would effectively render the container's height to nothing, so the background image won't show (since there's no inner content keeping it open). Using my approach listed above, one of the elements, the center column, is still in the document flow. Because it's still in the document flow, the container's background image and background colors can still show through (because the container has some dimension to it).

  7. #7
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    So the way you kept it in the document flow was to not position it absolutely? See that is the thing that confuses me.

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hartmann
    So the way you kept it in the document flow was to not position it absolutely? See that is the thing that confuses me.
    There are 4 ways to remove an element from a document's normal flow:
    • Relative positioning - This will position an element relative to where it would normally be placed. So if you gave a <div> relative positioning and values of "top: 4px;", it would be 4 pixels lower than it would appear if you had left its positioning to the defaults.
    • Absolute positioning - This will position an element absolutely in relation to its container. So if you specify a <div> with a position of absolute and values of "top: 0px; right: 0px;", it will be at the top right of its container (usually the <body> of the document unless you specify otherwise).
    • Fixed positioning - Same as absolute positioning, but fixed positions will be "locked" into the same spot in your browser window.
    • Floating - Floating moves an element as far as it can in the direction you specify. Imagine this as similar to <img align="left"> in the days of bad browsers. However, floating an element takes it out of the document flow (since you're telling it "go left" or "go right"), which can lead to unpredictable results.

    My descriptions here have been pretty simplistic, so if you want more detail or don't understand anything, just let me know.

    And to answer your question, I kept the #middle <div> in the document flow by not floating it or changing its positioning. All I did was give it margin values, which doesn't do anything to change its position. Since #middle is inside of #container, #container has some dimension to it because it inherits #middle's height/width.

  9. #9
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    There are 4 ways to remove an element from a document's normal flow:
    • Relative positioning - This will position an element relative to where it would normally be placed. So if you gave a <div> relative positioning and values of "top: 4px;", it would be 4 pixels lower than it would appear if you had left its positioning to the defaults.
    Relative positioning is still in the flow, just not where it was before.

    With absolute positioning, if you don't set a top it will move with your text up and down. Same if you don't set left. So it can be affected by the flow, but does not affect the flow itself.

    Also you may want to know that position: static is the default. You don't come across it very often, but it clears other things up (for example why you have to set position: relative if you want to set z-index: 5; etc)

    Finally, floating isn't a "real" positioning system (you might have guessed because it is float: left; not position: left; ). You can set position: relative; top: 100px; at the same time as setting float: left; etc. You can get some strange results though

    Later,
    Douglas
    Hello World

  10. #10
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or lastly of all you could add a 4th div with no content after the 3 floated divs which is clear: both

    Code:
    #container {
    }
     #left {
      width: 200px;
      float: left;
    }
    #middle {
      width: 200px;
      float: left;
    }
    #right {
      width: 200px;
      float: left;
    }
    
    #spacer {
      clear: both;
    }
    HTML Code:
    <div id="container">
      <div id="left">left column</div>
      <div id="middle">Middle column</div>
      <div id="right">right column</div>
      <div id="spacer"></div>
    </div>
    Because the spacer as to be below the floated divs but is still in the container div it forces the containers background to contain the floated divs.

  11. #11
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You must spread some Reputation around before giving it to vgarcia again.


    Thanks for the explanation!

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hartmann


    Thanks for the explanation!
    I know it's a lot to take in for those who are newish to CSS, but one day you'll just "get it" if you keep at it. Experience really is the best teacher with XHTML/CSS layouts.

  13. #13
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was a great explination, but BenANFA gave a much better answer. If they are all floated, then the container will stretch to the height of the tallest one, instead of the height of the middle column.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Travis
    That was a great explination, but BenANFA gave a much better answer. If they are all floated, then the container will stretch to the height of the tallest one, instead of the height of the middle column.
    Yes, but using floating you still have to worry about where your <div> is placed in the source code to get the proper effect. You don't have to worry about that with absolute positioning which can aid in building an accessible website. For example, you don't have to have "Skip navigation" links for text-only browsers if your nav appears after your content.

  15. #15
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But then what happens if the left or right column is larger than the middle one? Use Javascript?
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  16. #16
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Travis
    But then what happens if the left or right column is larger than the middle one? Use Javascript?
    The best fix is to not have a full width footer, but that seems to be mind blowing to most people

    Source ordered floats, another example (almost above, but better ) and there was another link I was going to give you but I've forgotten what it was

    Douglas
    Hello World

  17. #17
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Travis
    But then what happens if the left or right column is larger than the middle one? Use Javascript?
    Keep your right column as the non-positioned one then.


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
  •