Positioning Div's question - Newbie alert!

Discussion in 'CSS' started by pictureboarduk, Oct 2, 2008.

0
  1. #1
    (I have attatched a picture of how the layout looks, the arrow shows where I want to move it to.)

    Hi,

    I am trying to position the green "leftnavbar" div both under the "header" div, and to the left of the "maincontent" div, but being new to CSS, am having a little trouble.

    Currently I created the "container" div, for the purpose of holding all the divs I plan to use on the page together.

    Currently all three divs ("header", "leftnavbar" and "maincontent" are children of the "container" div.

    I have tried nesting the "maincontent" div as a child of the "leftnavbar" div, but as the maincontent div is wider than leftnavbar, it has it's right side cutoff.

    I'm new to CSS, so this maybe a simple mistake, but I'm trying to keep my code proper and clean, so welcome any advice.

    Many thanks!

    My code:

    HTML:
    CSS:
     

    Attached Files:

    pictureboarduk, Oct 2, 2008 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If you remove the padding on your container, does the problem resolve?
     
    steelfrog, Oct 2, 2008 IP
    pictureboarduk likes this.
  3. ChrisTaylor

    ChrisTaylor Guest

    Messages:
    60
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    try floating the navigation bar "left" and the content "right." Steelfrog is probably correct aswell with the padding, you've done maximum width, but then not taken into account the padding.
     
    ChrisTaylor, Oct 3, 2008 IP
    pictureboarduk likes this.
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    #leftnavbar {
    width: 25%;
    height: 200px;
    background-color: #33FF99;
    }

    #maincontent {
    float:left;
    width: 75%;
    height: 400px;
    background-color: #3399CC;
    }

    Try the above, afaik there's no need for position: relative; on anything at the moment with your layout. Also all you need to do is float the main container to the left, theres no need for the margin-left as you are having the left nav bar first. Also close left nav bar DIV before opening Main Content DIV.

    But I think when you progress with your layout your going to want to set a width on your sidebar and keep the main content fluid, and also want the main content to open before the left nav.
     
    wd_2k6, Oct 4, 2008 IP
    pictureboarduk likes this.
  5. chelvanweb

    chelvanweb Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    HI this will fix your problem.

    ----html code ---
    <body>

    <div id="container">
    container

    <div id="header">
    header
    </div>

    <div id="leftnavbar">
    leftnavbar</div>

    <div id="maincontent"> maincontent </div>
    </div>

    </body>
    ---end of html code---

    ----css---
    body {
    background-color: #FF3333;
    }

    #container {
    margin:0px auto;
    width: 800px;
    height: 600px;
    padding: 5px;
    }

    #header {
    position: relative;
    width: 100%;
    background-color: #33ccff;
    }

    #leftnavbar {
    position: relative;
    width: 25%;
    height: 200px;
    background-color: #33FF99;
    float: left;
    }

    #maincontent {
    position: relative;
    margin-left: 25%;
    width: 75%;
    height: 400px;
    background-color: #3399CC;
    }
    ---css --
     
    chelvanweb, Oct 4, 2008 IP
    pictureboarduk likes this.