ansaurus

Question

Css - How should we make 3-6 column layouts with css without table?

Answer 1

+1 A:

try to use some generators online like this: http://csscreator.com/version2/pagelayout.php or this http://www.cssportal.com/layout-generator/

Dobiatowski 2010-07-02 15:14:58

Answer 2

+2 A:

What I tend to do is float all but one of my columns left and the final one right. I then apply a right margin to all of the columns except the final two. This is because the gutter between them is created by the difference in the float, but also gives different browsers a bit of leeway so the layout doesn't break.

As for the layer below (I guess you mean a footer) you use

clear: both;

For example if my page was 65em wide (I tend to work in ems), and I wanted 6 columns, I give all my columns a width of 10em, and I float columns 1-5 left and I float column 6 right. I then give columns 1-4 a right margin of 1em.

chrism 2010-07-02 15:19:33

its only for 3 columns or also for 6 columns will work?

Yosef 2010-07-02 15:23:13

will work with any number, you'll need to do a bit of maths to work out width for your columns (in ems, px or %, whatever floats your boat), but the number of columns shouldn't make a difference

chrism 2010-07-02 15:26:14

Answer 3

+4 A:

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.

Dominic Cooney 2010-07-02 15:21:12

I guess if you added margin/padding to create the gutters in a div inside the column divs this would work, except I would use 32.9% or similar to deal with rounding issues

chrism 2010-07-02 15:23:10

Yes. As written, the columns are slammed right up against one another. Adding some margins and/or padding and changing the borders to suit your design is a good idea. Also backing the widths off slightly might be good (although this works for me in Firefox 3.6 and Chrome 5.)

Dominic Cooney 2010-07-02 15:30:15

Since when was `float` a valid value for the `position` property? At least not in [CSS 2.1](http://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#propdef-position)

jensgram 2010-10-26 07:27:56

Answer 4

+2 A:

Even easier than fighting with floats and clear floats and the like is going to a CSS layout framework like Blueprint (http://www.blueprintcss.org/) or 960 grids (http://960.gs/). If you've never been exposed before, they work by creating a virtual grid system on your page--to get something to be 6 columns, you'd divide the total number of grids on the screen (or on your container) by 6 and voila, perfect grids every time with no overlap and no bugs.

Even if you're well-versed in floats, there are some pretty crazy quirks that you can avoid altogether with a framework that already has the brain damage done. Bonus points to those frameworks with a CSS "reset" that essentially makes all browsers the "same".

bpeterson76 2010-07-02 16:08:06

Answer 5

+2 A:

you should use "ul"/

<header></header>
<ul id="columner">
 <li>
  <ul> 
    <li class="one"></li> 
    <li class="two"></li> 
    <li class="thr"></li> 
    <li class="fou"></li> 
    <li class="fiv"></li> 
    <li class="six"></li> 
  </ul>
 </li>
 <li>
  <ul> 
    <li class="one"></li> 
    <li class="two"></li> 
    <li class="thr"></li> 
    <li class="fou"></li> 
    <li class="fiv"></li> 
    <li class="six"></li> 
  </ul>
 </li>
</ul>
<footer></footer>

spielersun 2010-07-02 16:36:55

ansaurus

tags:

views:

answers:

Css - How should we make 3-6 column layouts with css without table?

related questions