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!

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

您正在谈论“圣杯”，就像这篇“ A List Apart”文章中一样

Answer 6

3列布局生成器

Answer 7

“中间”必须位于其自身的div中，否则可能会影响您的显示效果

Answer 8

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>

Answer 9

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>

Answer 10

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.