CSS SOS

[GiffordS]

I have three divisions in a document that are giving me trouble...

#con {margin-top: 120px;
    width: 600px;
    float: left;}
#tos {margin-top: 20px;
      width: 300px;
      height: 250px;
      padding: 10px;
      float: left;
      overflow: auto;
      text-align: left;
      scrollbar-base-color: #786440;}
#ups {position: relative;
      margin-top: 20px;
      width: 299px;
      height: 250px;
      padding: 10px;
      float: left;
      overflow: auto;
      text-align: left;
      scrollbar-base-color: #786440;}

and in the document they appear as...

<div id="con">content
<div id="tos">content</div>
<div id="ups">content</div></div>

The intention was to have the content in the con division appear at 600px width, and beneath that the contents of tos div on the left and ups div on the right, all within the 600px width of the con div. What I have instead is that the content of the con div and tos div appear as planned, but the ups div, rather than rendering to the right of the con div, renders below it. I tried aligning the left margin of the ups div to 301px, and that makes it render correctly horizontally, but it is still below the tos div. What am I missing?

 

[mkrausnick]

It's too tight. Back off the 300 a bit and eventually it will float like you want. I tried it at width=200 in TOS and it worked.

Mike Krausnick
Dublin, California

 

[Vragabond]

Mike is right. You are not grasping the box model yet. Let's review:
Parent is 600px.
First child is 300px + 10px * 2 (for padding on both sides) = 320px
Second child is 299px + 10px * 2 (again for padding) = 319px

319px + 320px = 639px and definitely cannot fit into 600px. I think you should know enough math to figure out how to do it the best way.

 

[GiffordS]

vrag, I thought that the padding worked like table cells, where padding refers to the distance from the outer edge of the div to the point where the content is displayed, and spacing would refer to a space between the two divs. My mistake.

 

[Vragabond]

Gifford, it is. But the width that you specify applies only to the content itself. Thus, to get the relevant width of the whole element, all margins, borders and padding must be added to it. Check it here:

http://www.w3.org/TR/CSS21/box.html