How to divide a webpage horizontally with pixels? - css

Question

I want to divide my webpage horizontally in to 2 parts, my monitor layout is 1410 X 752, if I write css code like this
.left{
width:210px;
}
.right{
width:1200px;
}
it wont work correctly in other monitors and also when I zoom in/out the browser the page structure will be totally out of order I mean the left DIV moves down and it will be to under the right DIV !
I know I must use % but when zoom in/out the browser scroll bar doesn't appear, please check this address to see what I said. what shall I do ?
thanks.

Answer 1

First of all, you aren't telling your divs to go anywhere. They are just stacking themselves on-top of each other.
You do however have the correct start and methodology, though it should be modified to fit current best practices. Let me elaborate...
To make your code work you need to add a float property change your code to this:
.left{
float: left;
width:210px;
}
.right{
float: left; /* could also put "right" here as a value */
width:1200px;
}
Now with that said... a better option that will produce the same result is this:
.left{
display: inline-block;
width:210px;
}
.right{
display: inline-block;
width:1200px;
}
Let's go a step further.... While this will "work" it will look terrible on other peoples screens. What if my resolution is 1280x1024, which isn't as wide as yours. I'll have to scroll to the right to see your site. That will encourage people to LEAVE your site. We can fix this though...
.left{
display: inline-block;
width: 20%;
}
.right{
display: inline-block;
width: 80%;
}
Now, no matter how big your browser window is your divs will take up 80% of the right side of the screen, and 20% of the left side of the screen. NOTE This will depend on a good reset.css as the width of an element is by default does not include any padding, margin or border space. If you add a padding or margin or border, the above method will break. To get around that there are a few options. You can use % values for your padding and margins but that breaks if you add a border.
A common solution is to add this property to your css:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
}
.right{
display: inline-block;
width: 80%;
box-sizing: border-box;
}
This will fix any padding or margin space issues mentioned above, but you still have to account for margin space. Let's say you want a 5% gutter between the two, then you need this code:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
margin-right: 5%;
}
.right{
display: inline-block;
width: 75%;
box-sizing: border-box;
}
Notice how I subtracted 5% from the right column to incorporate the margin space. if you add it all up 20+5=25 25+75=100% 100% means it works, if its more than 100% it will break.
For additional reading so some research (google) Responsive Layout/Web Design.
Info on float property -> http://www.w3.org/wiki/CSS/Properties/float
Info on display property -> http://www.w3.org/wiki/CSS/Properties/display
Info on box-sizing property -> http://www.w3.org/TR/css3-ui/#box-sizing
A good resource to determine browser compatibility is http://caniuse.com/

Answer 2

You should be using % instead of px here is a simple example.
If you are using 1200 of a 1410 monitor then we use math to get the % relative to that width
(1200 * 100) / 1410 = 85% (more or less... the right answer will be 85.71428571428571 %, but really don't matter).
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
float: left;
width: 15%;
background: green;
height: 300px;
}
.right {
float: left;
width: 85%;
background: blue;
height: 300px;
}
Live example.

Answer 3

As everyone says , you should use percentage, cause your window browser will never do the size of your screen, unless it is set on full screen.
Then scrollbars might show up.
% percentage are quiet safe if you manage a little less than 100% all together (calculation from percentage dow to pixels, can add extra pixels).
Differents ways to build ypour layout can help to use pixels, as :
display: table-cell:
you need to set the size of the smallest in pixel and set others to 100% to shrink small one to its size.
float:
set float and width on first element. second element can remain in the flow with no size and overflow:hidden; to keep aside float element and use all space left.
If you need a fiddle to get the idea, ask.