473,322 Members | 1,566 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

CSS border/margin width and percentage width

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
6 28056
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

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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Andy Moss | last post by:
I have a table wrapped in a div like this: <div id="content"><table id="calendar"> <tr> <th id="caldate"><span>Date</span></th> <th id="caltitle"><span>Title</span></th> <th...
1
by: lostinspace | last post by:
Can somebody tell me if it is possible to define a border margin width in the following? h3 { border-style: solid; border-width: 5px; } That is, I only desire the border to expand across...
7
by: Bob Bedford | last post by:
I've an image in a cell of a table. I've this CSS: ..dbtable{ width: 600px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-collapse: collapse; border: 1px solid #000000;
1
by: yb | last post by:
Hello, I've been trying to emulate css min-width and max-width in IE. I've looked at various methods on the web, but none seemed to truly emulate min-width / max-width, or at least not very...
4
by: Ward Germonpré | last post by:
Hello, I have a <table> within a <div> that I populate with a js array. An eventhandler changes the data displayed. I'd like the row width to remain equal to the div width, although the...
2
by: mark4asp | last post by:
What is the best way to write a page that uses min-width and max-width and will work IE6, IE7 and other modern browsers? I realise that I need a hack for IE6 but not for IE7 so what is the...
2
by: jackgeek | last post by:
I am trying to create a film strip of thumbnails in a photo gallery type page. I have an idea to create a div with all the thumbnails in it and then use another div to contain that so it can be...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.