Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups

web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





  Last Thread  Next Thread
Author
Thread Post New Thread   

erratic <div>
 

Bill




quote this post edit post

IP Loged report this post

Old Post  09-22-05 - 12:34 AM  
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




Post Follow-Up to this message ]
Re: erratic <div>
 

Michael Winter




quote this post edit post

IP Loged report this post

Old Post  09-22-05 - 12:34 AM  
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.


Post Follow-Up to this message ]
Re: erratic <div>
 

Bill




quote this post edit post

IP Loged report this post

Old Post  09-22-05 - 12:34 AM  
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




Post Follow-Up to this message ]
Re: erratic <div>
 

Michael Winter




quote this post edit post

IP Loged report this post

Old Post  09-22-05 - 12:34 AM  
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.


Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 08:02 AM. Post New Thread   
  Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top