erratic <div>

[Bill]

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]

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]

Hi

#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.

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]

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

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

[snip]

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.

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.