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!

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?

Couldn't you make their position absolute?

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>

---

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?

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).

So the way you kept it in the document flow was to not position it absolutely? See that is the thing that confuses me. :)

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.

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.

Quote:

---

You must spread some Reputation around before giving it to vgarcia again.

---

:(

Thanks for the explanation! :D

Quote:

---

Originally Posted by Hartmann

:(

Thanks for the explanation! :D

---

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.

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.

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.

But then what happens if the left or right column is larger than the middle one? Use Javascript?

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

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

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.