Databases
StackOverflow2013
Postsdbo
POWhy is my main content div not extending to fit child divs inside of it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is my main content div not extending to fit child divs inside of it?
    text
    copied!<p>I've been working on a new website with a modern-ish look. I wanted to have two columns inside of a single content div. However, after hours of trial and error with various bit of code I've found online, I come to no avail. My HTML looks like this:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Unnamed Website&lt;/title&gt; &lt;link rel="stylesheet" href="../_css/websitename.css" type="text/css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrap"&gt; &lt;div id="header"&gt; &lt;div id="logo"&gt; &lt;/div&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;h2&gt;Header Level Two&lt;/h2&gt; &lt;div id="columnleft"&gt; Hello &lt;/div&gt; &lt;div id="columnright"&gt; Hello &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;p&gt;Copyright &amp;copy; 2013 BlahBlahBlah.com&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I honestly don't see anything wrong with the HTML. However, the CSS is where it gets confusing:</p> <pre><code>body{ background-color:#333333; font-family:Helvetica; } div#wrap{ width:1000px; height:auto; margin-top:20px; margin-right:auto; margin-left:auto; } div#header{ width:980px; height:130px; margin-top:10px; margin-right:auto; margin-left:auto; } div#content{ background-color:#ffffff; border-color:#ffffff; border-width:1px; border-style:solid; border-top-left-radius:5px; -moz-border-top-left-radius:5px; -webkit-border-top-left-radius:5px; -o-border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px; -o-border-top-right-radius:5px; width:950px; height:auto; margin-right:auto; margin-left:auto; padding:0 15px; } div#footer{ background-color:#eeeeee; border-color:#eeeeee; border-width:1px; border-style:solid; border-bottom-left-radius:5px; -moz-border-bottom-left-radius:5px; -webkit-border-bottom-left-radius:5px; -o-border-bottom-left-radius:5px; border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; -o-border-bottom-right-radius:5px; width:980px; height:40px; margin-bottom:10px; margin-right:auto; margin-left:auto; box-shadow:5px 2px 10px #333333; clear:both; } #footer p{ text-align:center; font-family:Helvetica; font-size:13; line-height:7px; } h2{ background-color:#35586c; font-family:Helvetica; font-weight:bold; margin:15px auto; padding:10px; border-width:1px; border-color:#0b0b5b; border-style:solid; border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; text-align:center; box-shadow:0 0 1px #ffffff inset; -webkit-box-shadow:0 0 1px #ffffff inset; -moz-box-shadow:0 0 1px #ffffff inset; -o-box-shadow:0 0 1px #ffffff inset; text-shadow:1px 0 2px #222222; color:#fbfffb; } div#columnleft{ width:200px; height:auto; background-color:#35586c; font-family:Helvetica; font-weight:bold; margin-top:15px; margin-bottom:15px; margin-right:15px; padding:10px; border-width:1px; border-color:#0b0b5b; border-style:solid; border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; text-align:center; box-shadow:0 0 1px #ffffff inset; -webkit-box-shadow:0 0 1px #ffffff inset; -moz-box-shadow:0 0 1px #ffffff inset; -o-box-shadow:0 0 1px #ffffff inset; text-shadow:1px 0 2px #222222; color:#fbfffb; float:left; } div#columnright{ width:710px; height:auto; background-color:#ffffff; font-family:Helvetica; margin-top:15px; margin-bottom:15px; float:right; text-align:justify; } </code></pre> <p>Whenever I load up the page, the maincontent div doesn't expand with the column-divs inside it. I would like to stray away from table as much as possible so I can have better customization with each column, and I wouldn't like to use the tag. Is there any way I can fix this?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload