0

Related (possibly duplicate) questions:

How do I achieve equal height divs with HTML / CSS ?

Make Two Floated CSS Elements the Same Height

Hello, every one,

I tried for hours to create a stretchable 2 columns div but without any luck. here is my html code and my css code below it

<div class="two_cols_container">
  <div class="two_cols">
    <div class="left-col">
      test
    </div>
    <div class="right-col">
      test
    </div>
  </div>
</div>

my css code is

.two_cols_container {
  width: 100%;
  height: 100%;
} 
.two_cols {
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  height: 100%;
  height: auto !important;
  min-height: 100%; 
}
.two_cols .left-col {
  /*position: absolute;
    left: 0;*/
  float: left;
}
.two_cols .right-col {
  /*position: absolute;
    right: 0;*/
  float: right;
}

any idea?

Community
  • 1
  • 1
Mo J. Mughrabi
  • 6,747
  • 16
  • 85
  • 143

5 Answers5

2

There's

  1. Tables ( you probably wouldn't want to rely on this )
  2. Faux Columns ( the most practical way, faking columns going down using images - see http://www.alistapart.com/articles/fauxcolumns/ )
  3. Border Trick ( a little complex but this only works for solid colors )
  4. Padding / Margin / Clipping ( another complex one I wouldn't recommend )

I'd go with #2. If you need colors that are backgrounds of those columns to go all the way down, set a background on the container of those columns and make sure it repeats vertically, e.g,

div#wrapper { background:url(/images/faux.gif) repeat-y; }

If the columns are floated make sure to have overflow:hidden and a hasLayout trigger for IE like a width.

By the way since you have floats, apply overflow:hidden to .two_cols selector and add this rule:

html, body { height:100%; }

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
2

A: either use float OR absolute positioning to make your columns. not both. You can just float both the columns to the left and it should be ok with no absolute positioning.

B: you're big problem is the columns can't be next to each other if both of their' widths are 100%. There's no way they can sit side by side in their containing element when they both take up the whole width. Set the width to at most 50%, but I'd go with a little lower to account for some browser bugs.

EDIT: I agree with Sneakiness, wet the width to something lower than 50%, because the margins and padding have to fit too.

Gordon Gustafson
  • 40,133
  • 25
  • 115
  • 157
  • You also have to go below 50% if you use borders or padding on those two divs, as they make the div bigger. If you need to use padding, put a div inside the div, and assign the padding to innermost div. – Sneakyness Jul 26 '09 at 13:06
0

I found this method to be the simplest and most effective of all equal-height two-column layouts. You don't have to fake anything, and it Just Works.

Steve Landey
  • 2,609
  • 25
  • 25
-1

If you mean that you want a fluid two-column layout, you need to set margins for both columns separately to position them both on the page.

zacharyliu
  • 25,578
  • 4
  • 21
  • 15
-1

You can use div style property to create as many columns you need, with what ever CSS effect you need :

<div style=”width: 100%;”>

<div id=”left” style=”float: left;">

<--! your text here -->

</div>

<div id=”right” style=”float: right;">

<--! your text here -->

</div>

</div>

Source and example : WordPress Tutorial Series - Basics about HTML and CSS

Dhiraj
  • 1