1 Reply Latest reply on Sep 1, 2008 4:40 AM by Newsgroup_User

    I want my content div to the right of sidebar

    Rock_Artist Level 1
      I'm building a page from scratch (to my specs for layout of other pages in my site), blank HTML, fixed at 780 pixels. I have all of my divs in place but I want my sidebar (which will be my nav bar) to the left of the page and all the way down, and to the left of my content, but my content is positioned under my sidebar and spans across the width of the page. I want my content to the right of the sidebar and under the header. Can someone tell me what rules I should edit to get this to happen.

      I attached my code. Thanks.
        • 1. Re: I want my content div to the right of sidebar
          Level 7
          Hello,

          Float the sidebar left, like so:

          #sidebar {
          font-family: Arial, Helvetica, sans-serif;
          background-color: #e8e8e8;
          width: 200px;
          float: left;
          }

          Give the content div a left margin of 210px.
          I also added some padding. Adjust as needed.

          #content {
          background-color: #121922;
          padding: 10px;
          margin: 0px 0px 0px 210px;
          font-family: Arial, Helvetica, sans-serif;
          color: #e8e8e8;
          }

          The content of the divs will determine the height.
          If you want the sidebar to appear to be the same height as the content div,
          check out this technique:
          http://www.alistapart.com/articles/fauxcolumns/


          Take care,
          Tim



          "Rock Artist" <webforumsuser@macromedia.com> wrote in message
          news:g9fohp$576$1@forums.macromedia.com...
          > I'm building a page from scratch (to my specs for layout of other pages in
          > my
          > site), blank HTML, fixed at 780 pixels. I have all of my divs in place but
          > I
          > want my sidebar (which will be my nav bar) to the left of the page and all
          > the
          > way down, and to the left of my content, but my content is positioned
          > under my
          > sidebar and spans across the width of the page. I want my content to the
          > right
          > of the sidebar and under the header. Can someone tell me what rules I
          > should
          > edit to get this to happen.
          >
          > I attached my code. Thanks.
          >
          > <!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>Photo Gallery</title>
          > <style type="text/css">
          > <!--
          > body {
          > background-color: #e8e8e8;
          > text-align: center;
          > margin: 0px;
          > padding: 0px;
          > }
          > #wrapper {
          > text-align: left;
          > width: 780px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0px;
          > margin-left: auto;
          > }
          > #header {
          > height: 180px;
          > background-color: #121922;
          > }
          > #sidebar {
          > font-family: Arial, Helvetica, sans-serif;
          > background-color: #e8e8e8;
          > width: 200px;
          > }
          > #content {
          > background-color: #121922;
          > margin-top: 0px;
          > padding-top: 0px;
          > padding-left: 200px;
          > font-family: Arial, Helvetica, sans-serif;
          > color: #e8e8e8;
          > }
          > #footer {
          > margin-top: 12px;
          > margin-bottom: 12px;
          > clear: both;
          > }
          > -->
          > </style>
          > </head>
          >
          > <body>
          > <div id="wrapper">
          > <div id="header"></div>
          > <div id="sidebar">This will be my navigation bar with all of my pages
          > listed............right here.........</div>
          > <div id="content">Content for id "content" Goes Here and I wonder if I
          > fill
          > this up some that it will actually move to the right off my sidebar and it
          > did,
          > but why is my content section not going all the way to the top next to the
          > header div? Maybe I should give it a fixed size and float it to the right.
          > </div>
          > <div id="footer">Content for id "footer" Goes Here</div>
          > </div>
          > </body>
          > </html>
          >