Question

I would like some help with my three column layout.
I am not satisfied with the behaviour off the right column, because it effects the center column if the browser is not maximized.
The right column needs to get smaller if the browser is made smaller, and not directly clip the center column.

---

I got the css from this website and I use it for this index page
I already try’d to adjust it, but it’s kind of confusing.
Two containers are aligned from the right side and the others are aligned from the left side?

I have to say, this is a huge pain in the ass for me, because I need it fixed without screwing up the rest of the layout.
Also the overflow hidden is not working in the right column, because the text jumps out?

Any help is appreciated!

This is some off the css
( except for the header and footer )

/* column container */
.colmask { position:relative; clear:both; float:left; width:100%; overflow:hidden; }

/* general */
.colright,
.colmid,
.colleft {float:left;width:100%;position:relative;}


.col1,
.col2,
.col3 {float:left;position:relative;padding:0 0 1em 0;overflow:hidden;}

.threecol {background:#eee; }

/* width rightr column*/
.threecol .colmid {right:33.4%; background:#fff;}

/* width center column*/
.threecol .colleft {right:33%;  background:#f4f4f4; }

/* width center column content */
.threecol .col1 {width:30%; left:101.5%;/*background:#fff004;*/}

/* width left column content */
.threecol .col2 {width:32.2%;   left:37.8%; /*background:#fff004;*/}

/* width right column content*/  
.threecol .col3 { left:70.8%;   /*width:31.9%;*/ /*background:#fff004;*/}

thanks, Richard

Answer 1

They’re all percentage widths, so set the col1 div to a fixed width and this should give you what you want.

/* width center column content */
.threecol .col1 
{
  width:400px; 
  margin-right:50px; /*or percentage eqivalent*/
left:101.5%;
/*background:#fff004;*/
}

Tried in firebug, works fine 🙂