6

I read somewhere (on Stack Overflow as a matter of fact!) that it's a bad idea to use tables to layout pages in html.

I have an HTML page that needs to be "divided" down the middle with some content going on the left and some content going on the right. At fist I would have thought to use nested tables with each of their widths being 50%. Can I do the same thing using div? Or some other html construct?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jan Tacci
  • 3,131
  • 16
  • 63
  • 83

4 Answers4

10
<div style="float:left; width:50%;">
Left  <!-- Set Div As your requirement -->
</div>
<div style="float:left; width:50%;">
Right  <!-- Set Div As your requirement -->
</div>
Akhil
  • 1,073
  • 1
  • 9
  • 28
0

This should achieve (very basically) what you want.

body,html{height:100%}
div.mainLayout{float:left;width:50%}
div.clearFlt{clear:both}

<html>
<head>

</head>
<body>
    <div class="mainLayout">LeftContent
        <div class="clearFlt"></div>
    </div>
    <div class="mainLayout">LeftContent
        <div class="clearFlt"></div>
    </div>
</body>
</html>
George
  • 36,413
  • 9
  • 66
  • 103
0

One common way for a base layout is to wrap your areas into div containers. Those containers are positioned and sized using CSS.

Michel Feldheim
  • 17,625
  • 5
  • 60
  • 77
0

If you'll inspect the stackoverflow page (if using firefox, right-click on any element on the sidebar on the right, and select 'Inspect Element'), you'll see that the sidebar is a div element with a float attribute. No tables on the Inspector stack at the bottom of the page!

Ronaldo Nazarea
  • 356
  • 1
  • 7