Div width problem with CSS

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • djminus1
    New Member
    • Oct 2008
    • 12
    #1

    Div width problem with CSS

    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?
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      Please post your code, or a link to a sample/test page, so that we may help you more accurately.

      Thanks,
      {\_/}
      (' . ')
      (")[DEATH](")
      (")(")

        Comment

        • serdar
          New Member
          • Nov 2008
          • 88
          #3
          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.

          Code:
          <html>
	<head>
		<style>
			body{margin:0; padding:0;}
			p, h1, h2 {margin:0; padding:0;}
			#wrapper {background:#888; width:100%; height:100%; margin:0 auto;}
			#content {background:#ccc; float:left; margin:0; padding:0 200px 0 0;}
			#sidebar {background:#ddd; width:200px; float:right; margin:0 0 0 -200px; padding:0;}
		</style>
	</head>
	<body>
		<div id="wrapper">	
			<h1>Header</h1>
			<div id="content">
				<h2>Content</h2>
				<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>
			</div>
			<div id="sidebar">
				<h2>Sidebar</h2>
				<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>
			</div>
		</div>
	</body>
</html>
          Attached Files

            Comment

            Previous template Next
            Working...