Avoiding table for html 5 layout

Question

The question is very simple: how to PROPERLY avoid table for layout. Problems: DIV layout with float:left is not always useful because often at browser stretch all divs pile one over the other...

I have a container div

<div id="container"> 
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>

Container 100% page. child 1, 2 width fixed width ( exampe 300px) and the 3rd width variable width 30%

I whant them not to pile one over the other on browser stretch. Is it posible ? Thank you

Create some examples of the problems you're having and we'll help. Check out [jsfiddle](http://jsfiddle.net). — MiniRagnarok, Mar 26 '13 at 16:32

score 1 · Accepted Answer · answered Mar 26 '13 at 16:36

1

http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/

don't use tables for layouts. maybe the link can help you.

answered Mar 26 '13 at 16:36

roman

889
9
16

score 1 · Answer 2 · edited May 23 '17 at 12:11

You should ALWAYS avoid using <table> for layout. <table> is made to display tabular data. That is it's purpose. If you use it outside of that purpose, then you are using it wrong. Additionally, if you can't achieve the layout you want using float's or display: inline, then you are most likely doing it wrong, or need a little bit of javascript to help you out until the flexbox functionality is fully implemented and supported.

See this post here for further explanation: Why not use tables for layout in HTML?

Avoiding table for html 5 layout

2 Answers2