stacking divs in columns

Question

I have a three column layout where I float the left column left, float the middle column left and the right column I float right. I am not sure if this a good way of laying the page out, but it has worked in the past. What I would like to do now though is giving me trouble. I want to stack a couple of divs in the center and right columns, but I can't seem to make it happen.

So instead of the center column being one column from top to bottom of the page I now want the center column to be two panels, one stacked above the other, not overlapping. Overlapping I seem to have no problem with ;)

Any suggestions or references would be greatly appreciated.

I'm a little confused on what exactly you are trying to do. Any chance you could upload an image where you draw your desired outcome? — Ted A., Apr 08 '14 at 19:33

codefreaK · Answer 1 · 2014-04-08T19:56:03.530

If you haven't already checked out A List Apart Apart you should, as it contains some excellent tutorials and guidelines for website design.

THis article in particular should help you out.

Css

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}/*** IE Fix ***/
* html #left {
  left: 150px;           /* RC fullwidth */
}

Html

<div id="header"></div><div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div><div id="footer"></div>

if this is what you were looking for accept it as answer or upvote it — codefreaK, Apr 12 '14 at 06:24

Neel · Answer 2 · 2014-04-08T20:06:43.970

0

You need to set the height of your both of your middle divs to 50%. The width of each column div should be 33%.

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="middleColumn">
        <div id="middleTop"></div>
        <div id="middleBottom"></div>
    </div>
    <div id="right"></div>
</div>

CSS:

#wrapper{height:300px;width:300px;}
#left,#middleColumn,#right{height:100%;width:33.33%;float:left;}
#middleTop,#middleBottom{height:50%;width:100%;}

Here is a JSFiddle describing what I'm saying.

edited Apr 08 '14 at 20:06

answered Apr 08 '14 at 19:35

Neel

597
6
19

Thanks. You know, I have cross browser problems with dynamic div sizing. If I set all of my columns at 33%, the one on the right get squeezed down. I end up making one of the columns 30% to work around this issue. It is especially a problem when the browser window is not maximized. Obviously 33% works for you, so what am I doing wrong? – MJMacarty Apr 11 '14 at 22:22
Have you checked padding? – Neel Apr 12 '14 at 09:04

score 0 · Answer 3 · edited May 23 '17 at 11:44

Here is what I would do for this situation:

HTML

<div class="wrapper">
    <div class="sidebar-left"></div>
    <div class="main">
        <div class="sidebar-right"></div>
        <div class="content top"></div>
        <div class="content bottom"></div>
    </div>
</div>

CSS

.wrapper { width: 1000px; margin: 0 auto; } // Whatever width you want
.main { width: 75%; float: right; }
.sidebar-left { width: 25%; float: left; }
.sidebar-right { width: 25%; float: right; }
.content { width: 50%; float: left; clear: left; }

This will give you something like this:

format for layout

Here is a JSfiddle that you can play with. I added some color and heights so you can see whats going happening with the CSS. You may want to also look into a clearfix for the wrapper div so that you don't have issues with positioning.

Thanks yes, this is exactly what I am trying to do. – MJMacarty Apr 11 '14 at 22:18 — MJMacarty, Apr 11 '14 at 22:18

stacking divs in columns

3 Answers3

Css

Html