By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,337 Members | 2,084 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,337 IT Pros & Developers. It's quick & easy.

CSS border/margin width and percentage width

P: n/a
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.)

Nov 5 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
On 2006-11-05, Hacking Bear <ha*********@gmail.comwrote:
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 */
}
This case works because s3 isn't a float. It's a new block-level box
that starts at the left of its container, and is overrun by the yellow
float. If you make the border very fat, about 10px, it's clearer what's
happening.

Although the spec doesn't mention anonymous blocks being generated for
floats (only for inline boxes) it may be helpful to think of the float
as originating in an anonymous block box that is the preceding sibling
of .s3 (although if the Firefox were actually doing precisely this,
arguably the 50% height wouldn't work, since the float's container would
be an auto-height anonymous block. But I've found percentage heights and
anonymous blocks to behave a bit inconsistently in FF anyway).

Another way to see what's going on is to insert another <divaround .s2
and give it a green border, and also give .s2 a height in pixels, say
200px, rather than a percentage.

If you do this, you will see that the green div has height 0 (it doesn't
grow to enclose the float, because it isn't the "block formatting
context box" for the float), but the float overflows it to the bottom.
Overflowing floats go on top of subsequent block level boxes (this is
explained in section 9.5 of CSS 2.1).
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.)
You can solve your problem with another level of nesting. Have two 50%
floats with no borders padding or margin, and put divs with borders and
padding etc. as normal block boxes inside them. Not ideal, but the only
thing I can think of.
Nov 5 '06 #2

P: n/a

Ben C wrote:
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.)

You can solve your problem with another level of nesting. Have two 50%
floats with no borders padding or margin, and put divs with borders and
padding etc. as normal block boxes inside them. Not ideal, but the only
thing I can think of.
I tried this way. Doesn't quite work well either. Try the CSS and html
below and you see the the s4inset DIV would simply grows larger than
50% to accommodate the borders.

I haven't done a lot of CSS/HTML but almost every time I work on a
project, I have to deal with how to fill up the remainder space after
other pixel-width items are laid down. A good thing about the TABLE is
that you can just specify 100% and it will fill the remaining space. I
wish the CSS standard allow value "width: fill".

.s4 {
height:50%;
width:50%;
background: yellow;
float: left;
}
.s4inset {
height: 100%;
width: 100%;
border: 5px solid brown;
}
.s5 {
height:50%;
width:50%;
float: left;
background: blue;
}

<div class="s1">
<div class="s4">
<div class="s4inset"></div>
</div>
<div class="s5">
</div>
</div>

Nov 5 '06 #3

P: n/a
On 2006-11-05, Hacking Bear <ha*********@gmail.comwrote:
>
Ben C wrote:
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.)

You can solve your problem with another level of nesting. Have two 50%
floats with no borders padding or margin, and put divs with borders and
padding etc. as normal block boxes inside them. Not ideal, but the only
thing I can think of.

I tried this way. Doesn't quite work well either. Try the CSS and html
below and you see the the s4inset DIV would simply grows larger than
50% to accommodate the borders.
Take away the width: 100% on .s4inset, and leave it width: auto.

Width 100% makes the width of its content area 100% of the width
available to it, which means its outer margin width is greater the width
available to it if it has positive borders, padding or margins.

In fact I think a good CSS tip is that you don't very often need width:
100%. If you find yourself writing that stop and ask is width: auto
really what I want here.
I haven't done a lot of CSS/HTML but almost every time I work on a
project, I have to deal with how to fill up the remainder space after
other pixel-width items are laid down. A good thing about the TABLE is
that you can just specify 100% and it will fill the remaining space. I
wish the CSS standard allow value "width: fill".
width: auto actually pretty much means that on normal-flow box boxes.
The used value of an auto width is whatever solves the equation:

borders + margins + width = available_width

for width.

In other situations, absolute positioning can be a good way to fill
remaining space, because you can say you want a box 150px from the left
and 0px from the right, and the UA solves for the width in between.

It's quite easy I think once you know the rules. But for very complex
requirements, you are better off with tables (or relaxing the complex
requirements if you can).
.s4 {
height:50%;
width:50%;
background: yellow;
float: left;
}
.s4inset {
height: 100%;
width: 100%;
border: 5px solid brown;
}
.s5 {
height:50%;
width:50%;
float: left;
background: blue;
}

<div class="s1">
<div class="s4">
<div class="s4inset"></div>
</div>
<div class="s5">
</div>
</div>
Nov 5 '06 #4

P: n/a
Ben C wrote:
On 2006-11-05, Hacking Bear <ha*********@gmail.comwrote:
Take away the width: 100% on .s4inset, and leave it width: auto.
You are right about the "width: auto" but then "height: auto" would
mean 0px and so I have to set the height to 100% and bottom border
sticks out still.

Nov 6 '06 #5

P: n/a
Hacking Bear wrote:
You are right about the "width: auto" but then "height: auto" would
mean 0px and so I have to set the height to 100% and bottom border
sticks out still.
Height:auto does not mean 0px but means that the height will
automatically adjust itself to whatever the "content" is (no content,
then no height). See the 3rd example below.
I read the part in this thread about "anonymous blocks" and there is no
relevance that I can see. In any case, here is my take on the matter:

Regarding the 1st example:
Normally the blue div will be below the yellow div because they are
"block elements".
Here however they are floated left, so they want to try to be
side-by-side, if they fit.
The reason that the yellow and blue boxes end up being side-by-side when
they have no border is because their 50% + 50% = 100% width of the grey
container.
In other words, yellow takes up 50% of the total width, leaving 50% left
over and the blue div with its 50% width fits and they end up side-by-side.
The total width = left-border + left-padding + (width) + right-padding +
right-border.
So, in this example the blue div has no border and no padding. Its total
width = 0 + 0 + 50% + 0 + 0 = 50%
The yellow div has a 1 pixel border and no padding. Its total width =
1px + 0 + 50% + 0 + 1px = 50% + 2px
No way will 50% + 50% + 2px fit into 100%, so the second div (blue)
moves down to where it will fit - below the yellow div.

Regarding the 2nd example ("I also tried:"):
The same as the 1st example, except that the blue is now floated right.
It won't fit beside the yellow div, so it moves down to where it will
fit - below the yellow div and then floats to the right.

Regarding the 3rd example ("But the following CSS would work"):
Here we have a situation where the yellow div is floated right and the
blue div is not floated, but is Static.
The blue div has fixed dimensions which has greater width than the
available width, so the yellow div overlaps the blue portion.
If the blue div is given text content, the text will flow around the
yellow div and remain inside the visible blue portion.
Since the height of the blue div is fixed and if the text exceeds the
capacity of the blue div, it will then overflow below the blue box, so
it may be better to use the default height of auto; so that the
background follows the content.
If the blue div's dimensions are set at 75% for width and height each
and the yellow div is given opacity:.75; , then it is much easier to
understand by seeing the blue background and red border shining through
the yellow.
If the blue div is not given a width, then the default width is auto and
the blue background and text will extend the full container width.
If the blue div is not given a width, applying a margin-right value
will cause the same rendering as when applying a width, except that the
background follows. For IE support, this method must be used.

Regarding the 4th example ("I tried this way."):
It did nothing for me (defective markup?) so I ignored it.

--
Gus
Nov 6 '06 #6

P: n/a
On 2006-11-06, Hacking Bear <ha*********@gmail.comwrote:
Ben C wrote:
>On 2006-11-05, Hacking Bear <ha*********@gmail.comwrote:
Take away the width: 100% on .s4inset, and leave it width: auto.

You are right about the "width: auto" but then "height: auto" would
mean 0px and so I have to set the height to 100% and bottom border
sticks out still.
Yes.

You need to use absolute positioning if you want to "wedge" something
into its full available height:

e.g.:

<div style="height: 500px; position: relative">
<div style="position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
border: 5px solid red">
</div>
</div>

The containers can be floated and relatively positioned, and the
"insets" absolutely positioned relative to them.

We only set position: relative on the container so it becomes the
containing block for the insets. We don't actually give it an offset.

Or you can lose the floats altogether and do the whole thing with
absolute positioning. Then you don't need the insets any more. Something
like this:

<head>
<style>
div
{
height: 500px;
}
#left
{
position: absolute;
right: 50%;
left: 0;
border: 15px solid green;
}
#right
{
position: absolute;
left: 50%;
right: 0;
border: 15px solid blue;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
Nov 6 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.