div positioning not as seen with borders [Archive]

3dkingpin

01-27-2012, 10:17 PM

when i position two divs next to each other without borders they position a expected.

When i add a 5px border then the two divs seem to overlap and dont look as wanted.

<DIV id="newdiv1" title="" align="center" style="border: 5px solid #000000 ;overflow:auto; white-space:wrap; top: 5; left: 5; position: absolute; z-index: 101; visibility: show; background-color: #FF00FF; width: 983px; height: 100px; font-size: 20pt; font-family: TIMES NEW ROMAN; color: #000000;"><div style="position: relative; top: 34.50;">DIV1</div></DIV>

<DIV id="newdiv112034" title="" align="center" style="border: 5px solid #000000 ;overflow:auto; white-space:wrap; top: 110; left: 5; position: absolute; z-index: 102; visibility: show; background-color: #FF00FF; width: 983px; height: 100px; font-size: 20pt; font-family: TIMES NEW ROMAN; color: #000000;"><div style="position: relative; top: 34.50;">DIV2</div></DIV>

The problem seems to be that the border is drawn ROUND the div not INSIDE the div so now the div is not h pixels high but h+(border thickness) high.

So is there anyway to draw the border inside the div.

auntnini

01-27-2012, 11:36 PM

Some results searching for "CSS box model":
http://www.w3.org/TR/CSS2/box.html
http://www.addedbytes.com/for-beginners/the-box-model-for-beginners/
http://reference.sitepoint.com/css/boxmodel
http://www.brainjar.com/css/positioning/
http://css-tricks.com/the-css-box-model/

The size of the box itself is calculated like this:
Width: width + padding-left + padding-right + border-left + border-right
Height: height + padding-top + padding-bottom + border-top + border-bottom

There are several errors in your CSS, but, mostly, using an in-line style="..." attribute="value" is inefficient -- especially with duplicated values.

<DIV id="newdiv1" title=""
align="center" style="border: 5px solid #000000; overflow:auto; white-space:wrap;
top: 5[PX]; left: 5[PX]; position: absolute; z-index: 101; visibility: [visible NOT show]; background-color: #FF00FF; width: 983px; height: 100px;
font-size: 20pt [em px of % relative values better]; font-family: TIMES NEW ROMAN; color: #000000;">
<div style="position: relative; top: 34.50[?];">DIV1</div></DIV>
<DIV id="newdiv112034" title="" align="center" style="border: 5px solid #000000; overflow:auto; white-space:wrap;
top: 110[PX]; left: 5[PX]; position: absolute; z-index: 102; visibility: show; background-color: #FF00FF; width: 983px; height: 100px;
font-size: 20pt; font-family: TIMES NEW ROMAN; color: #000000;">
<div style="position: relative; top: 34.50;">DIV2</div></DIV>

Instead, create an external/linked or embedded style sheet with .class or #id style rules -- which you then apply to element like you did for id <div class=""newdiv"> An element can have more than one space-separated class applied to it, and (I believe) both an ID and CLASS.

For instance embedded in in <HEAD>

<style type="text/css">
.newdiv { background-color: #FF00FF; color: #000000; width: 983px; height: 100px; font-size: 1.5em ; font-family: Georgia, Times New Roman, Times, serif; border: 5px solid #000000; overflow: auto; white-space:wrap; ... [and so forth] }
</style>

Remember also position: absolute takes element out of HTML flow.