8 Replies Latest reply: Feb 10, 2013 11:37 AM by mytaxsite.co.uk RSS

    Sidebar problem

    jughead77a

      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.

        • 1. Re: Sidebar problem
          mytaxsite.co.uk MVP

          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.

          • 2. Re: Sidebar problem
            jughead77a Community Member

            Hi, how do you do a test site? Sorry I'm new to this.

            • 3. Re: Sidebar problem
              mytaxsite.co.uk MVP

              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.

              • 4. Re: Sidebar problem
                jughead77a Community Member

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

                • 5. Re: Sidebar problem
                  mytaxsite.co.uk MVP

                  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.

                  • 6. Re: Sidebar problem
                    jughead77a Community Member

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

                    • 7. Re: Sidebar problem
                      Nancy O. MVP

                      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.

                      • 8. Re: Sidebar problem
                        mytaxsite.co.uk MVP

                        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.