I have searched the web and just cannot seem to find a clean, simple, all browser friendly 3 column layout.
I am looking to have 3 column layout, the left column being 200px fixed with, the right column being 200px fixed with and the centre column the remaining width, but with a min-width of 600px. so the overall min-width is 200px + 600px + 200px = 1000px.
I have seen a lot of examples where the columns seem to overlap each other when resizing the browser, which is a problem.
Thanks
If source order does not matter then one simple solution is to use display table/table cell. Make the wrapper 100% wide with desired minimum width. Specify widths for fixed width columns. With table display, all columns will have equal height.
#wrapper {
display: table;
width: 100%;
min-width: 1000px;
min-height: 400px;
}
#column-1 {
display: table-cell;
background: #DDF;
width: 200px;
}
#column-2 {
display: table-cell;
background: #EEE;
}
#column-3 {
display: table-cell;
background: #DDF;
width: 200px;
}
<div id="wrapper">
<div id="column-1">= 200px</div>
<div id="column-2">>= 600px</div>
<div id="column-3">= 200px</div>
</div>
Try media queries in screen resolution < 1000 px use const values. This can help you.