simple padding question for CSS DIV box

[Glen_S]

I have 2 boxes side by side fitting in a 800 px wide container. The boxes are set so they just fit, one on the left houses a css menu and the one right of it holds text and images. I want the text to be about 20px from the edges of the box it is in. The box is defined in an external css file as "box6" with no padding as the defualt. When I enter: <div id="box6" style="padding-left:20px; padding-right:10px;"> to over ride it for this one page, it pushes the box down below the box it is supposed to be beside (to the right of).

I thought that the internal padding should not affect how the box is positioned. What am I doing wrong here?

[Tristan S.S.]

I could help, but could you supply the code on your page and the external css sheet.

[Glen_S]

I could help, but could you supply the code on your page and the external css sheet.

CSS file:

#box6 { border: none;
margin-left: 0px;
margin-top: 0px;
border-width: 0px;
height: 400px;
width: 671px;
padding: 0px;
float: left;
background-image:url(../images/bkrnd6.jpg)

Whats in web page:

<div id="box6" style="padding-left:20px; padding-right:10px;">

I think I found a work around, but setting the padding to 20px in the CSS file and reducing the width by 40px to 631px. But I thought that putting the "padding-left:20px" etc.. in the web page itself would over ride it, but it didnt seem to work.

[BLiZZaRD]

The lower elements win in CSS so if I have something like:

body{
background: url(http://mysite.com/image.jpg);
}


and then later declare another image as a background the image.jpg won't ever show up.

What you are doing in your #box6 is declaring the layout of the box, not the contents.

You could do something like .box6 (also, not instead of) then declare the left margin 20px in that, then call it by <div id="box6"><div class="box6">content....</div></div>

or similar.