Responsive layout

[rasu]

Hi!

i want to two fixed width colum and one colum flexiable(responsive div),(http://oi42.tinypic.com/dwmcw.jpg) how to write css, plz help me

[Paulie_D]

What have you tried so far?

[Billy]

I have done something similar in the past (two fixed columns on the left).
Both fixed-width columns were floated left and all columns had were `position: relative`.
I tried this but for some reason it wasn’t working; the floats were acting weirdly…

What might be easier for you is to position them both absolutely or fixed and then just give the underlying div 160px left and right padding.

http://codepen.io/Druid-of-Luhn/pen/zwfEg

[rasu]

Hi cynewatch,

Thanks yours code :)
Fixed this way

**My Html**

`

left

right

`

**My CSS**

.g_container{width:100%;
height:auto;
margin:0 auto;
display:block;
position:relative;
}
.g_left{
width:160px;
height:600px;
position:fixed;
background:#F00;
top:0;
left:0;
}
.g_right{width:160px;
height:600px;
position:fixed;
background:#F00;
top:0;
right:20px;}

.g_middle{
width:100%;
padding:0px 180px;
height:auto;
min-height:600px;

}
.g_middle img{max-width:100%;
height:auto;
}

[rasu]

Sorry, previous css not working

**This css working**

.g_container{width:100%;
height:auto;
margin:0 auto;
display:block;
position:relative;
}
.g_left{
width:160px;
height:600px;
position:fixed;
background:#F00;
top:0;
left:0;
}
.g_right{width:160px;
height:600px;
position:fixed;
background:#F00;
top:0;
right:20px;}

.g_middle{

padding:0px 180px;
height:auto;
min-height:600px;

}
.g_middle img{max-width:100%;
height:auto;
}

[Author]

Posts