Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Border problem

  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    22
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Border problem

    here is the html code


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="container">
    <div id="header">
    </div>
    <div id="leftpart">
    </div>
    <div id="rightpart">
    </div>
    <div id="footer">
    </div>
    </div>

    </body>
    </html>


    And here is the CSS code

    @charset "utf-8";
    /* CSS Document */

    #container
    {
    width:900px;
    margin:0 auto;
    }

    #header
    {
    background-color:#960;
    height:140px;
    width:100%;
    }

    #leftpart
    {
    background-color:#06C;
    height:500px;
    width:50%;
    float:left;

    }

    #rightpart
    {
    background-color:#060;
    height:500px;
    width:50%;
    float:right;
    }

    #footer
    {
    background-color:#F00;
    height:120px;
    clear:both;
    }


    Now the Question is When I put this code in the #leftpart
    border-right:1px dashed;

    the whole page breaks and footer moves down.
    Could somebody Explain why???
    Please bear with the question as i am very novice.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,333
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Could it be that the border is taking up 1px and you have set widths to exactly 50% to your divs which leaves no room for anything else. Try changing #leftpart to width: 49%;

    Thats just a guess, but its worth a try.


    btw I just confirmed that thats what is going on. If you have two divs floated side by side and they both take up 100% of the space, then adding a border of even 1 px will force the div next to it down, since there is no more room for it there. Do some reading on the box model. You can google it.

    You should probably consider using pixels for your widths for right and left part divs.

    Also. please use the # button when posting code. Makes it much easier to read when surrounding your code with code tags. Thanks
    Last edited by teedoff; 12-15-2010 at 02:58 PM.

  • Users who have thanked teedoff for this post:

    muzammil (12-16-2010)


  •  

    Posting Permissions

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