CSS: Three Column Layout problem

Question

How can I modify this:

<div style="border: solid 1px red; text-align: center">
    <div style="background-color: yellow; float: left">left</div>
    middle
    <div style="float:right; background-color: yellow">right</div>
</div>

So that "right" is in line vertically with "left"?

Here's what my bad css looks like rendered:

left                 middle
                                            right

thanks!

So you want right above or below left? Not sure I understand the question. Got a picture? — Kyle Trauberman, Feb 10 '09 at 18:46
I want them both on the same level vertically, so it would look like: |right|middle|left|, all in a row. — morgancodes, Feb 10 '09 at 18:59

score 21 · Accepted Answer · edited Jun 16 '11 at 20:38

If you use a ‘float: right’, make it the first thing on the line:

<div style="border: solid 1px red; text-align: center">
    <div style="float:right; background-color: yellow">right</div>
    <div style="background-color: yellow; float: left">left</div>
    middle
</div>

Otherwise it always falls into the next text line.

but why!!!!!

(1) Because once you've started putting static text on a line, you've got an indeterminate width to fit a floated element into. Say you wrote:

abc abc abc <div style="float: left">xyz xyz</div> abc abc abc

Now imagine you start resizing that window down so that “abc abc abc” just fits on the first line. Now you meet a float, and try to include it on the line you're on. But it doesn't fit: to fit it on, you'd have to have “abc xyz xyz” on the line, reflowing the remaining “abc” to the next line. But! Now you've moved the float's insertion point down a line, so the float has to drop down a line too. But! Now the first line isn't wrapped properly, because there's room for three “abc”s, but the line has been ended prematurely to make way for a float that actually occurs further down the page...

The CSS standard solves this logical impasse by making a float on a line with inline text before it wait for the next line.

(2) Because that's what Netscape did with <img float="right"> many, many years ago.

Think this: 1) floats are "out of flow" 2) "in flow" text moves pen down so that next line goes below previous line. 3) "out of flow" elements are positioned using current pen position. It's more complex than that, but for starters... — buti-oxa, Feb 10 '09 at 19:30
The "float" property only pushes elements to the left or right; it does not change their vertical position. By placing your "right" element after your "middle" element, the middle one pushed it down. "Right" doesn't actually have to be before "left", but both need to be before "middle". — Ben Blank, Feb 10 '09 at 19:31
Could you please answer http://stackoverflow.com/questions/10141148/css-two-column-div-layout-misaligns-when-zoom-changes ? — LCJ, Apr 13 '12 at 12:53

score 3 · Answer 2 · edited Jun 16 '11 at 20:54

3

I got what you need*:

<table style='border: 1px solid red; width: 100%; border-collapse: collapse;'>
  <tr>
    <td style='background-color: yellow; width: 25%;'>left</td>
    <td style='text-align: center;'>middle</td>
    <td style='background-color: yellow; width: 25%; text-align: right;'>right</td>
  </tr>
</table>

Thank me later!

* disclaimer: I am only 95% serious.

edited Jun 16 '11 at 20:54

SamB

9,039
5
49
56

answered Feb 10 '09 at 18:54

Paolo Bergantino

480,997
81
517
436

@paolo, see my comment to Dreas Grech. I want to do things the "right" way, but it's SO HARD. – morgancodes Feb 10 '09 at 18:56
I know. That's why I suggested this. I'm half joking and half serious. Sometimes you just gotta give in. I know what you mean, though. – Paolo Bergantino Feb 10 '09 at 18:58
I think it's okay for a few cases (very few) to use tables for layout, 3-columns are one of them. – mbillard Feb 10 '09 at 19:11
Could you please answer http://stackoverflow.com/questions/10141148/css-two-column-div-layout-misaligns-when-zoom-changes ? – LCJ Apr 13 '12 at 12:53

score 2 · Answer 3 · edited Jun 16 '11 at 20:37

This works without re-arranging the order of the content

<style type="text/css">
    .column
    {
    float: left;
    width:33.3%;
    }

    #container
    {
    text-align: center; 
    width:100%;
    }

    .clearfix 
    {
    display: inline-block; 
    }
</style>
<div id="container" class="clearfix">
      <div class="column">left</div>
      <div class="column">middle</div>
      <div class="column">right</div>
</div>

You can also drop the 33% and make them representative of your design, or even do a fixed width on the columns. In that cause, use IDs instead of classes.

score 1 · Answer 4 · answered Feb 10 '09 at 18:50

1

Make middle a div, float it to the left and specify widths for all three containers. Also, you migth make the surrounding div overflow: auto, else it will collapse on itself.

answered Feb 10 '09 at 18:50

Konrad Rudolph

530,221
131
937
1,214

score 1 · Answer 5 · answered Feb 10 '09 at 19:41

1

You're talking about the "holy grail" as in this A List Apart article

answered Feb 10 '09 at 19:41

dirq

968
2
11
26

score 0 · Answer 6 · answered Feb 10 '09 at 18:46

0

"middle" needs to be in a div of its own or can throw off your display

answered Feb 10 '09 at 18:46

Chris Ballance

33,810
26
104
151

thanks. this doesn't solve it.
left
middle
right
If I float the "middle" div left, then I lose the centering. – morgancodes Feb 10 '09 at 18:51

Paul G. · Answer 7 · 2009-02-10T19:02:06.333

0

Updated:

<div style="border: solid 1px red; text-align: center">
   <div style="background-color: yellow; float: left">left</div>
   <div style="float:right" background-color: yellow">right</div>
   <div style="float:none">middle</div>
</div>

edited Feb 10 '09 at 19:02

answered Feb 10 '09 at 18:48

Paul G.

489
2
7

ugh. Is there no tidier way? Thanks despite my "ugh". – morgancodes Feb 10 '09 at 18:52
actually, this doesn't work. I want "left" and "right" to be on the same baseline, not stacked. – morgancodes Feb 10 '09 at 18:54

score 0 · Answer 8 · answered Feb 10 '09 at 18:51

0

Try something of the sort:

<div style="border: solid 1px red; text-align: centerl width:100px">
          <div style="background-color: yellow; float: left; width:30px">left</div>
          <div style="background-color: yellow; float: left; width:30px">middle</div>
          <div style="background-color: yellow; float: left; width:30px">right</div>
</div>

answered Feb 10 '09 at 18:51

Andreas Grech

105,982
98
297
360

1

absolute widths is not ideal. My "just use a table" itch is starting to flare up! – morgancodes Feb 10 '09 at 18:55
When working with floats, normally you will need to use specific widths, so that everything will float beside each other nicely – Andreas Grech Feb 10 '09 at 19:03

score 0 · Answer 9 · answered Feb 10 '09 at 19:13

To accomplish what you're trying to do, you should put the right column before the middle column.

<div style="border: solid 1px red; text-align: center">
      <div style="background-color: yellow; float: left">left</div>
      <div style="float:right; background-color: yellow">right</div>
      middle
</div>

Because the right column is positioned relatively to its context which is a line below the middle content.

CSS: Three Column Layout problem

9 Answers9

Linked