3 replies [Last post]
mo.mughrabi
Offline
newbie
Last seen: 11 years 18 weeks ago
Joined: 2009-07-23
Posts: 2
Points: 0

Hi,
Am new to CSS and I have been trying for the past couple hours to create a stretchable height with two columns. I would appreciate it if someone could tell me what is it am doing is wrong.

Here is my HTML code

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

and this is what i wrote for the CSS

.two_cols {
   position: relative;
   min-height: 100%;
   margin: 0 auto;
   border: 1px solid black;
   }
.two_cols .left-col {
   position: absolute;
   left:0;
   }
.two_cols .right-col {
   position: absolute
   right: 0;
   }

the border i set in .two_cols shows a thin line, as if the right and left elements are not being contained inside the div. Any idea how could i solve this?

Lermentov
Offline
newbie
Chicago
Last seen: 11 years 17 weeks ago
Chicago
Timezone: GMT-5
Joined: 2009-07-26
Posts: 5
Points: 0

Hello, I'm new as well,

Hello,

I'm new as well, but I wonder if you shouldn't be floating those interior column divs inside of the containing div and setting your height to auto.

Just a thought

shawngoldw
Offline
newbie
Last seen: 11 years 16 weeks ago
Joined: 2009-07-05
Posts: 8
Points: 0

You have to set the width

To start, you have to set the width property of all 3 divs. There may be more to do too.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Faux columns is the name of

Faux columns is the name of the standard method used to do this with CSS.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.