Floating my content boxes messes up my layout

Discussion in 'General Computer Support' started by amlania, Oct 3, 2009.

  1. amlania

    amlania

    Joined:
    Oct 3, 2009
    Messages:
    1
    Hi there,

    I have a two boxes in a wrapper and i floated one left and one right so they are side by side. Since i have done that the border has moved half way up the page as if the boxes are not within them. I would like the boxes to be contained within my border without me having to set a height for the wrapper.

    The code is as follows:

    </head>

    <body>


    <div id="wrapper" align="center">

    <div id="border">

    <div id="navigation">

    <ul>
    <li>Location</li>
    <li>Service</li>
    <li>The Development</li>
    <li>Specification & Features</li>
    <li>Latest News</li>

    </ul>

    </div><!--main navigation ends-->

    <div id="subNavigation">

    <ul>
    <li>Agios Tychonas</li>
    <li>Local Area</li>
    <li>Going Places</li>
    <li>Views</li>
    <li>Beaches</li>

    </ul>

    </div>

    <!--sub-navigation ends-->


    <div id="leftBox">



    </div> <!--leftbox ends-->


    <div id="rightBox">

    </div> <!--rightbox ends-->



    <div id="logo">

    <p><img src="assets/location_agios/lemesos_logo.jpg" /></p>

    </div><!--logo ends-->



    </div><!--border ends-->

    </div><!--wrapper ends-->



    </body>
    </html>

    And the CSS is as follows:

    #wrapper {
    border: 3px solid #CBCBCB;
    width: 1070px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    }
    #border {
    margin: 5px;
    border: 1px solid #CBCBCB;
    }
    #navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    #navigation ul {
    }
    #navigation ul li {
    display: inline;
    border: 1px solid #999;
    margin-right: 3px;
    margin-left: 3px;
    padding-top: 4px;
    padding-right: 30px;
    padding-bottom: 4px;
    padding-left: 30px;
    }
    #subNavigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin: 0px;
    padding: 0px;
    }
    #subNavigation ul li{
    display: inline;
    float: none;
    padding-right: 40px;
    padding-left: 40px;
    }
    #leftBox {
    height: 350px;
    width: 490px;
    float: left;
    border: 2px solid #999;
    padding: 0px;
    margin-top: 25px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 153px;
    }
    #rightBox {
    height: 350px;
    width: 275px;
    border: 2px solid #999;
    float: right;
    margin-top: 25px;
    margin-right: 114px;
    padding: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
    }

    Your help is much appreciated!!!
     
    amlania, Oct 3, 2009
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DVD Verdict
    Replies:
    0
    Views:
    547
    DVD Verdict
    Apr 20, 2004
  2. jsmith54@gmx.net
    Replies:
    2
    Views:
    727
    jsmith54@gmx.net
    Aug 25, 2006
  3. Atreju
    Replies:
    0
    Views:
    435
    Atreju
    Mar 20, 2006
  4. =?Utf-8?B?TGFFc21lcmFsZGE=?=

    Windows XP x64 messes up other OS

    =?Utf-8?B?TGFFc21lcmFsZGE=?=, Oct 23, 2006, in forum: Windows 64bit
    Replies:
    1
    Views:
    403
    Tom Ferguson
    Oct 23, 2006
  5. Richard M. Hartman

    WinXP, switching users messes up network connection

    Richard M. Hartman, May 25, 2007, in forum: Wireless Networking
    Replies:
    4
    Views:
    453
    Richard M. Hartman
    May 31, 2007
Loading...

Share This Page