Stylesheets - erratic <div>

Author

erratic <div>

Bill

2005-09-21, 7:34 pm

Hi

Testing in IE6

I have the following

doctype is xhtml strict

============

<div id="middlebox">
<div id="mnup">
<ul>.....</ul>
</div>
<div id="contentbox">
some text written
</div>
</div>
==============
where:
#middlebox {
width: 760px;
height: 300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}

#mnup {
position: relative;
width: 150px;
padding-top: 20px;
float: left;
}

#contentbox {
background-color: white;
width: 605px;
height: 400px;
padding: 10px;
border: 1px solid black;
}

I want a padding in #contentbox. But when I do the div goes under #mnup
instead of on it's right, why ? Removing the padding places the div at the
right of #mnup.

Thanks

Michael Winter

2005-09-21, 7:34 pm

On 21/09/2005 22:29, Bill wrote:

[snip]

> #middlebox {
> width: 760px;
> height: 300px;
> margin-left: auto;
> margin-right: auto;
> background-color: white;

The background and color properties should be paired. Not everyone may
have the same colour preferences as you (think desktop themes, for a start).

> }
>
> #mnup {
> position: relative;
> width: 150px;
> padding-top: 20px;
> float: left;
> }
>
> #contentbox {
> background-color: white;
> width: 605px;
> height: 400px;
> padding: 10px;
> border: 1px solid black;
> }

605 + 10 + 10 + 150 > 760

The width property applies to the content of an element. The padding,
border, and margin regions are added outside this area.

[snip]

Do you know that your content (#contentbox) is taller than your
container (#middlebox)?

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Bill

2005-09-21, 7:34 pm

Hi

>
> 605 + 10 + 10 + 150 > 760
>
> The width property applies to the content of an element. The padding,
> border, and margin regions are added outside this area.

That's what I discovered yeah. Had to reduce width so it fits into 605px.

I began working with CSS a couple of days ago. I must build reflexes and
understanding of a lot of things we don't care in html.

Thanks

Michael Winter

2005-09-21, 7:34 pm

On 21/09/2005 23:00, Michael Winter wrote:

> On 21/09/2005 22:29, Bill wrote:

[snip]

>
> 605 + 10 + 10 + 150 > 760
>
> The width property applies to the content of an element. The padding,
> border, and margin regions are added outside this area.

And despite saying that, I overlooked the border myself. Add two more
pixels to the left-hand side.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.