Hi,
I still don't quite fully understand how to handle mixing border/margin
pixel width with percentage width.
In the example below, I want to place side-by-side two DIV boxes inside
a box.
1. Each box takes up 50% of the parent.
2. One of the box has a border width of 1px.
In Firefox 2.0, if I position the two boxes both using "float: left"
(like the codes below,) the right box will have to be squeezed
underneath. They will be position side-by-side only if I remove the
border.
=============== =============== =============== ===========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.s1 {
height:500px;
width:100%;
background: gray;
}
.s2 {
height:50%;
width:50%;
background: yellow;
float: left;
border: 1px solid red;
}
.s3 {
height:50%;
width:50%;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="s1">
<div class="s2">
</div>
<div class="s3">
</div>
</div>
</body>
</html>
=============== =============== =========
I also tried:
.s2 {
height:50%;
width:50%;
background: yellow;
float: left;
border: 1px solid red; /*don't work*/
}
.s3 {
height:50%;
width:50%;
float: right;
background: blue;
}
But the following CSS would work
.s2 {
height:50%;
width:50%;
background: yellow;
float: right;
}
.s3 {
height:50%;
width:50%;
background: blue;
border: 1px solid red; /*OK */
}
A lot of times, I have to use pixel width for borders and margins but
percentage width for the whole box (because the paremt/browser window
has various width.) Can anyone explain how to mix them properly in CSS?
(I saw many web pages discussing the border/margin and width but
couldn't find one that talk about the mixing of pixel/percentae width.)
(Also I really feel the CSS box model should treat the box's width =
margin + border + padding + content instead of just the content width.
[Same for height.] That seems more logical and easier to work with.)
