By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,317 Members | 1,314 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,317 IT Pros & Developers. It's quick & easy.

Div width problem with CSS

P: 12
Ok, I have a very basic page that I am trying to set up. I have a div called wrapper to contain the entire page content. Then I have two divs inside of the wrapper, the main content (on the left) and a sidebar (on the right).

I am floating the sidebar to the right of the main content section. That is working fine. What I want to do is to have the sidebar a fixed width of 200px and the main section automatically resize based on the users browser size. I want this main section to stretch up to the sidebar then stop. I tried setting it to 100% width hoping that it would just stretch to the sidebar. This didn't work and the two divs overlapped. I tried the "auto" setting for the width but that didn't work either. Again, it ran over.

I am missing something easy I think. Can you help?
Jan 7 '09 #1
Share this Question
Share on Google+
2 Replies

Death Slaught
P: 1,137
Please post your code, or a link to a sample/test page, so that we may help you more accurately.

(' . ')
Jan 7 '09 #2

P: 88
Try this template. I've tested it with Internet Explorer 7, Firefox, Opera and Safari.

Notice the negative margin in #sidebar and padding in #content.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <style>
  4.             body{margin:0; padding:0;}
  5.             p, h1, h2 {margin:0; padding:0;}
  6.             #wrapper {background:#888; width:100%; height:100%; margin:0 auto;}
  7.             #content {background:#ccc; float:left; margin:0; padding:0 200px 0 0;}
  8.             #sidebar {background:#ddd; width:200px; float:right; margin:0 0 0 -200px; padding:0;}
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <div id="wrapper">    
  13.             <h1>Header</h1>
  14.             <div id="content">
  15.                 <h2>Content</h2>
  16.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  17.             </div>
  18.             <div id="sidebar">
  19.                 <h2>Sidebar</h2>
  20.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  21.             </div>
  22.         </div>
  23.     </body>
  24. </html>
Attached Images
File Type: jpg template.jpg (16.1 KB, 112 views)
Jan 7 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.