Title: Multiple columns/rows in CSS
Last modified: August 18, 2016

---

# Multiple columns/rows in CSS

 *  [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/)
 * I’m trying to create a simple theme, but with a bit of, er, complexity. Here’s
   what I’m trying to do:
 * Row 1:
    Header image
 * Row 2:
    Specific content split into four bite size columns
 * Row 3:
    Single, latest post split into two columns – on the left the post, on
   the right the category image
 * Row 4:
 * Split into two columns – on the right recent comments, on the left recent posts
 * With specific content I want to split that particular row into four columns, 
   each one providing an excerpt from specific pages.
 * How can I go about this?
 * Can anyone help? How far I got was this:
 * I created two ids called precontent and postcontent and placed them above and
   below the main post area – I just don’t know how to add other columns to those
   rows if that makes sense. I know the plugins to use for the relevant feature (
   category image etc)
 * Thanks in advance

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/multiple-columnsrows-in-css/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/multiple-columnsrows-in-css/page/2/?output_format=md)

 *  [Joshua Sigar](https://wordpress.org/support/users/alphaoide/)
 * (@alphaoide)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179678)
 * Two columns are just two floated boxes. I don’t know exactly what your problem
   really is. Draw the layout and upload it, and I will advise you how to implement
   it.
 *  Thread Starter [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179680)
 * here’s the original rough outline I did.
 * [http://sekhu.net/stuff/blog_layout.jpg](http://sekhu.net/stuff/blog_layout.jpg)
 *  [Joshua Sigar](https://wordpress.org/support/users/alphaoide/)
 * (@alphaoide)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179681)
 * So, for the whole thing you will have four main boxes.
 * In box no. 2, you’ll have 4 floated-left sub-boxes with defined height and width.
   The width of each sub-boxes would be 1/4 the width of box no. 2; without margin
   nor padding.
 * Same thing for box no.3 and 4; just different size and number of sub-boxes.
 *  [Root](https://wordpress.org/support/users/root/)
 * (@root)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179682)
 * For the four box row – I would want to avoid float left on them all which is 
   unstable. I would have two floated containers. In each I would have two more 
   containers. Four cols in all. If you float left and right it will be rock solid.
 *  Thread Starter [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179684)
 * @ alphaoide – here’s what I’ve tried using the default WP theme. Just to see 
   how it works, I stripped most of the CSS and I’m just trying it out.
 * [http://sekhu.net/wp/](http://sekhu.net/wp/)
 * So it seems that the entire block is now far to the left,and there’s a gap between
   the first two and last two floats. How can I fix it – additionally, they’re awfully
   stretched (the content side is no bigger than 80% of the entire page) and I have
   set each block to be 20% of the total so where have I gone wrong?
 * @ Root – could you explain that a bit more or a link with a visual explanation,
   it seems to make some sense to me but not that much. Do you mean have #precontent1
   and #precontent2 as the main containers, then within #precontent1 have #box1 
   and #box2 and the same for #precontent2 with #box3 and #box4 but floated right
   instead of left? Would I apply any css to the main containers, or just the boxes?
 * Thanks guys
 *  [Joshua Sigar](https://wordpress.org/support/users/alphaoide/)
 * (@alphaoide)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179686)
 * Define the width of all 4 boxes in one place, by defining the width of `#rap`
   only. Don’t define width in any of 4 main boxes.
 * For the main box no. 3, apply `clear: both`.
 * The 4 sub-boxes’ width would be 25% each.
 *  [Root](https://wordpress.org/support/users/root/)
 * (@root)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179689)
 * You have got it Jinsan. Its just as you describe. On the clearers you need one
   in each container – 3 in total.CSS for everything. And no borders, padding or
   margins on the floated elements. No hacks needed.
 *  Thread Starter [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179697)
 * Ok, so I’ve done something wrong with trying the above, also the replies were
   a bit conflicting so I wasn’t sure if you guys were agreeing or offering differing
   advice.
 * Here’s the css:
 * `#rap {
    clear: both; width : 100%; }
 * #precontent {
    width: 50%; margin-right: auto; margin-left: auto; clear: both;
   float: left; }
 * #box1 {
    background-color : #ff3344; text-align : left; }
 * #box2 {
    background-color : #000; text-align : left;}
 * #precontent2 {
    width: 50%; clear: both; margin-right : auto; margin-left : auto;
   float: right; }
 * }
    #box3 { background-color : #cc3; text-align : left; } #box4 { background-color:#
   f66; text-align : left; }
 * The code in the header.php:
 * `<!----- the first precontent block ------->
    <div id="precontent"> <div id="
   box1"> <h2>Area for the about content</h2></div> <div id="box2"> <h2>Area for
   the about content</h2></div> </div>
 * <!----- the second precontent block ------->
    <div id="precontent2"> <div id="
   box3"> <h2>Area for the about content</h2></div> <div id="box4"> <h2>Area for
   the about content</h2></div> </div> <div id="content">
 * If you look at the site, I didn’t get it right, and the left floats have….gone
   into the void. Where did I go wrong in there?
 *  Thread Starter [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179704)
 * sorry couldn’t edit the above post – time to edit should be longer perhaps, saves
   bumping a thread.
 * Ok I’ve implemented roots suggestions to some extent by using containers within
   containers – it seems to work to a point but there’s two problems:
 * 1) the floats left and right are sitting on each other
    2) the two containers
   are seperated by a gaping hole
 * Here’s the edited code:
 * `/***** precontent ****/
    #rap { width : 80%; height: 40%; margin-right : auto;
   margin-left : auto; clear: both; }
 * #precontent1 {
    width: 25%; height: 40%; text-align : left; float: left; clear:
   both; }
 * #box1 {
    background-color : #ff3344; }
 * #box2 {
    background-color : #667; }
 * #precontent2 {
    width: 25%; height: 40%; text-align : left; float: right; clear:
   both; }
 * #box3 {
    background-color: #444; }
 * #box4 {
    background-color : #fff; }
 * The height didn’t work for some reason. In any case I’m getting closer to the
   point I want. What worries me now is, if I’m having this many problems just doing
   the CSS, when it comes to loading specific content into the block, it’s going
   to bork like hell isn’t it?
 * Well one step at a time. So I still have a few issues.
 * Thanks in advance
 *  [Root](https://wordpress.org/support/users/root/)
 * (@root)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179706)
 * _All_ the boxes need to be set at something like width : 47%.
 *  Thread Starter [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179711)
 * ok I set a width for all the boxes including the main container – it’s there 
   but not quite. The float on the left and right are now set side by side, but 
   one set is above and another below, with the gap in the middle still remaining.
 * What’ I’m essentially trying to do is place these boxes inbetween the header 
   and the content so do I need to apply clear both to either of those for the floats
   to align together?
 * It’s totally shagged in IE with the right floats disappearing to Neverland causing
   large scrolling and the main content shifting off to the left.
 * Cheers
 *  [Root](https://wordpress.org/support/users/root/)
 * (@root)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179712)
 * Both mid containers and the outer need clearers.
 *  Thread Starter [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179715)
 * I think I’ve added it to everything – I’ve now got the floats touching but still
   misaligned, I’ve been playing with the bottom floats as well and they’re proving
   the same problems.
 * What is actually the problem with the floats? Is it that I have made them too
   big, or the rap is too small? I don’t quite get it.
 * Thanks in advance
 *  Thread Starter [jinsan](https://wordpress.org/support/users/jinsan/)
 * (@jinsan)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179748)
 * Ok I’ve practicaly given up and am close to just picking another theme and playing
   with that but I’m having one last shot at this.
 * 1) At the very least, it seems I can have two working floats so let’s say instead
   of four at the top I go for two how would I ensure that it’s connected to both
   the header and the content – that is to say there are no gaps between the two.
 * 2) I still need to create another two floats below just above the footer – in
   fact I may get rid of the footer, because I don’t want it – can I remove it without
   killing the site, and will help fix the two floats below?
 * Thanks in advance, if I can’t even get this minimum working I’m giving up. It’s
   bad enough suffering from nervous breakdowns without being dumb enough not to
   understand simple instructions and induce one.
 * Cheers
 *  [Root](https://wordpress.org/support/users/root/)
 * (@root)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/#post-179749)
 * Jinsan you have got to admit this is a pretty ambitious scheme. Maybe once you
   get 2 columns header and footer buttoned down you can build up. If you take on
   too much it can make your head spin. 🙂

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/multiple-columnsrows-in-css/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/multiple-columnsrows-in-css/page/2/?output_format=md)

The topic ‘Multiple columns/rows in CSS’ is closed to new replies.

 * 21 replies
 * 5 participants
 * Last reply from: [jinsan](https://wordpress.org/support/users/jinsan/)
 * Last activity: [21 years, 2 months ago](https://wordpress.org/support/topic/multiple-columnsrows-in-css/page/2/#post-180279)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics