CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: div positioning not as seen with borders

  1. 01-27-2012, 10:17 PM #1
    3dkingpin
    3dkingpin is offline Junior Coders
    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.
    Reply With Quote Reply With Quote
  2. 01-27-2012, 11:36 PM #2
    auntnini
    auntnini is offline Regular Coders
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    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.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules