Skip navigation
Currently Being Moderated

Sidebar problem

Feb 10, 2013 7:15 AM

DR01.png

In the picture to the left my sidebar is going outside the bottom of the container div, but I want it to go up beside the main content at the right. Any help would be great.

 
Replies
  • Currently Being Moderated
    Feb 10, 2013 7:32 AM   in reply to jughead77a

    The solution is in the code and you haven't posted it here so it won't be possible to help you.

     

    Can you provide a link to your test site so that somebody can have a look at it and advice you further.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 8:07 AM   in reply to jughead77a

    What people normally do is to copy the code to a blank document and then upload it to a web server and the link to that test page is posted here.

     

    If you can't do this then the second best option is to post your code to these forums or to pastebin.  If you post your code to paste bin then you also need to post a link here for us to have a look at it.

     

    Paste bin is a free service for everybody to use it without creating an account.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 8:45 AM   in reply to jughead77a

    jughead77a wrote:

     

    Here is my html/css. http://pastebin.com/bvWn1nWH

     

    OK got it.  i have noticed that the mathematics of your dimensions needs to be changed slightly and also you need to introduce floats.  for example, this CSS will put the sidebar where it should be but your screen is too wide so please change it:

     

     

    #container {

        height: 1080px;

        width: 1920px;

    }

    #header {

        height: 180px;

        width: 1100px;

        margin-right: 410px;

        margin-left: 410px;

        background-color: blue;

    }

    #main {

        height: 785px;

        width: 730px;

        margin-right: 410px;

        margin-left: 600px;

        margin-top: 10px;

        float: left;

        background-color: orange;

    }

    #sidebar {

        height: 785px;

        width: 180px;

        float: left;

        background-color: red;

    }

    Hope this helps but post back for further clarification.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 10:46 AM   in reply to jughead77a

    Google labs - Browser Size

    http://browsersize.googlelabs.com/

     

    A width under 1000px will work for most average laptops & desktops.   1900+ is too wide for average users.

     

    Also, don't use the height property. You don't need it because height is always determined by content; not explicit height values. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 11:37 AM   in reply to jughead77a

    jughead77a wrote:

     

    Do you mean change the width of the container div? If so to what size?

     

    Use this code as your starting point and this can be improved upon as you go along:

     

     

    <!DOCTYPE html>

    <html>

     

    <head>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <title>Header</title>

    <style type="text/css" media="all">

    body {

        margin: 0;

        padding: 0;

        text-align: center;

    }

    #container {

        width: 960px;

        text-align: left;

        background-color: silver;

        margin: 0 auto;

    }

    #header {

        background: red;

        min-height: 100px;

    }

    #main {

        width: 740px;

        float: left;

        margin-left: 0;

        margin-right: 10px;

        background-color: blue;

        min-height: 600px;

    }

    #sidebar {

        width: 180px;

        margin-left: 10px;

        margin-right: 0;

        float: right;

        background-color: orange;

        min-height: 600px;

    }

    </style>

    </head>

     

    <body>

    <div id="container">

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

        <div id="wrapper">

            <div id="main">Main</div>

            <div id="sidebar">Sidebar</div>

        </div>

    </div>

    </body>

     

    </html>

    Hope this helps.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points