Home/ Questions/Q 895235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T14:31:38+00:00

How should we make 6 column layouts with css without tables and one layer

  • 0

How should we make 6 column layouts with css without tables and one layer above and one layer in buttom?
(with floats ? i try without success)

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a simple three-column layout with a header and a footer:

    <!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
  width: 33%;
  border: 1px solid gray;
  float: left;
}

#footer {
  clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>

    By floating the columns they appear next to each other. By using clear: both for the footer it sits below the columns.

    In recent browsers you can implement columns much more simply using CSS3 multi-column layout.

    If you want to vary the number of columns from three to six depending on the available space, you could try using a media query. Like multi-column layout, media queries are a relatively new feature. If you want to achieve this in older browsers, you will need to use JavaScript (or use floats very creatively.)

    For a more detailed discussion of cross-browser multi-column layouts, I highly recommend CSS Mastery: Advanced Web Standards Solutions. It is a great book.

    • 0