CODEWITHSUNDEEP
csssizezooming
RicardoE
RicardoE

Reputation: 1725

page looks bigger than it should

I've designed a web page with 3 columns arranged like this:

[[left] [content] [right]]

and it is showing like this:

[[left]      [right]]
    [content]

wehn I ctrd+scroll down, it looks ok, how can I fix this?

the css is:

.advert_panel_right{
width:250px;
height:100%;
float:left;
}

.advert_panel_left{
    width:250px;
    height:100%;
    float:right;
}

.content_wraper{
    width:902px;
    margin: 0px auto;
}

.content{   
    font-family: Verdana, Geneva, sans-serif;
    width:100%;
    margin-left:25px;
}

Upvotes: 0

Views: 104

Answers (3)

Etienne Dupuis
Etienne Dupuis

Reputation: 13806

EXAMPLE: http://jsfiddle.net/GN8RL/

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="content"></div>
    <div id="right"></div>
</div>

CSS

#left, #content, #right {
  float:left;
  height:100px;
  border:1px solid red;
}

#left, #right {
   width:100px;
}    
#content {
   width:200px;
}
#wrapper {
    width:406px; /* 400 + borders */
    margin:0 auto;
}

​

Upvotes: 2

Bram Vanroy
Bram Vanroy

Reputation: 28534

I needed to edit some things (and a typo), but here is a test case. Works fine: http://jsfiddle.net/UZfBc/

First of all: float your right panel right, and your left panel left. Get rid of the typo 'content_wraper'. I assumed that .content is the middle div and that .content_wrapper is the wrapper.

Your .content CANNOT be 100% width, because it will take its parent's value and use that. This means that you have three divs, respectively 250px, 902px (+25px margin) and 250px, which you want to put in one div of 902px. That will never work. Just calculate the size of the .content div: 902 - 250 - 250 - 25 = 377px. Then let it float: left;. It will work (as it does in my example)

Upvotes: 0

Etienne Dupuis
Etienne Dupuis

Reputation: 13806

.content_wraper{
    width:802px;
    margin: 0px auto;
}

does reducing the width of the wrapper helps? i belive it is too large.

Upvotes: 1

Related Questions