Home/ Questions/Q 3443118
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:45:07+00:00

I have a really, really simple CSS question that has already been asked here

  • 0

I have a really, really simple CSS question that has already been asked here a thousand times already in different forms, and seems to have no definitive answer.

I just want to create three columns on an HTML page, using CSS. Doesn’t matter about fixed-width versus liquid: just need three columns.

Here’s a complete HTML page:

<html>
<body>
<div id="left" style="float:left; width:300px;">
<h3>Column 1</h3>
</div>
<div id="right" style="float:right; width:300px;">
<h3>Column 3</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
</body>
</html>

In Chrome, at least, this is pushing the left & right columns down below the middle. What is wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    • float is sensitive to order. Put the left, then middle, then right.

    • Have you tried floating the middle section too?

    You might try this

    <html>
 <body>
  <div id="left" style="float:left; width:300px;border:1px solid black;">
    <h3>Column 1</h3>
  </div>

  <div id="middle" style='float:left;width:600px;border:1px solid black;'>
    <h3>Column 2</h3>
  </div>

  <div id="right" style="float:left; width:300px;border:1px solid black;">
    <h3>Column 3</h3>
  </div>

 </body>
</html>
    • 0