Results 1 to 2 of 2

Thread: div positioning not as seen with borders

  1. #1
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default div positioning not as seen with borders

    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.

    HTML Code:
    <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.

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default CSS box model

    Some results searching for "CSS box model":
    http://www.w3.org/TR/CSS2/box.html
    http://www.addedbytes.com/for-beginn...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>
    Code:
     
    <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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •