CODEWITHSUNDEEP
htmlcss
Naresh UI Designer
Naresh UI Designer

Reputation: 1

3 column layout issue

i have issue with three column layout.

Issue: i have set "position:fixed" for "left" and "right" div. when i re-size the window the "right" div is overlapping to "center" div.

i need the "right" div should not overlap to "center" div.

is this possible?

HTML:

<div id="master">
<div class="left-div">Lorem ipsum..</div>
<div class="center-div">Lorem ipsum..</div>
<div class="right-div">Lorem ipsum..</div>
</div>

css:

#master{
    width:100%;     
    }

.left-div{
    width:150px;
    background:red; 
    height:500px;
    position:fixed;
    left:0;
    top:0;      
    }

.center-div{
    width:640px;    
    background:yellow;
    height:500px;
    margin-left:170px;
    float:left; 
    }

.right-div{
    width:300px;
    background:green;
    height:500px;
    position:fixed;
    right:0;
    top:0;
    }

Upvotes: 0

Views: 62

Answers (3)

Roy Sonasish
Roy Sonasish

Reputation: 4609

you can adjust your center div with following

.center-div{  
    background:yellow;
    height:500px;
    margin-left:170px;
    margin-right:320px;
    }

but this will overlap in small screen, for small screen you need to use media-query

working jsFiddle File

Upvotes: 1

micaro
micaro

Reputation: 976

You have to specify the exact position and size of every element (using the same attributes like left and top) in order to preserve the original positions and sizes of elements without overlapping. This is not wise due to different screen sizes. You should use position: absolute instead of fixed. With javascript (or jquery) you can get the current screen width and give every element a prefered part of it.

Upvotes: 0

Gibbs
Gibbs

Reputation: 22974

[Check this link-DEMO] http://jsfiddle.net/GopsAB/XL4Y4/

Specify width in percentage. It ll solve your problem.

#master
{
width:100%;     
}

.left-div
{
 width:20%;
 background:red; 
 height:500px;
 position:fixed;
 left:0;
 top:0;    
}

.center-div
{
 width:50%;    
 background:yellow;
 height:500px;
 margin-left:20%;
 float:left; 
}

.right-div
{
  width:30%;
  background:green;
  height:500px;
  position:fixed;
  right:0;
  top:0;
}

It will fit for all sized windows since width is specified in percentage.

Upvotes: 0

Related Questions