Databases
StackOverflow2013
Postsdbo
POParent div not growing with floated children
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POParent div not growing with floated children
    text
    copied!<p>I have an issue with my floated child divs not growing with my parent div. Is there a way to fix this? I need the wrapper to be 100% of the content in either div. Here is the html;</p> <pre><code>&lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="leftpane"&gt; &lt;div id="lefthead"&gt; &lt;div id="leftheadfiller"&gt; &lt;/div&gt; &lt;div id="leftheadlogo"&gt; &lt;/div&gt; &lt;div id="leftheaddivider"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="leftcontent"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="rightpane"&gt; &lt;div id="righthead"&gt; &lt;div id="rightheadfiller"&gt; &lt;/div&gt; &lt;div id="rightheadlogo"&gt; &lt;/div&gt; &lt;div id="rightheaddivider"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="navigation"&gt; Properties Careers About Blog Advertise Contact &lt;/div&gt; &lt;div id="rightcontent"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="close"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>And here is the css;</p> <pre><code>html,body { background-image:url('images/background.gif'); background-repeat: repeat-y; background-position: center; background-attachment: fixed; height: 100%; width: 100%; margin: 0px; } #wrapper { background-color: aqua; height: 100%; width: 866px; margin-left: auto; margin-right: auto; } #leftpane { background-image: url('images/darkbackground.gif'); width: 326px; height: 100%; float: left; } #lefthead { height: 132px; width: 100%; } #leftheadfiller { height: 75px; width: 100%; } #leftheadlogo { background-image: url('images/index_07.gif'); width: 71px; height: 56px; float: right; } #leftheaddivider { height: 1px; width: 100%; background-image: url('images/lightbackground.gif'); float: right; } #lefttcontent { height: 100%; background-color: fuchsia; } #rightpane { background-image: url('images/lightbackground.gif'); width: 540px; height: 100%; float: right; } #righthead { height: 132px; width: 100%; } #rightheadfiller { height: 75px; width: 100%; } #rightheadlogo { background-image:url('images/index_09.gif'); width: 109px; height: 56px; float: right; } #rightheaddivider { height: 1px; width: 100%; background-image: url('images/darkbackground.gif'); float: right; } #navigation { margin-top: 2px; font-family: Arial, Helvetica, sans-serif; color: #A3A3A3; font-size: 14px; word-spacing: 44px; text-align: center; width: 100%; height: 18px; } #rightcontent { padding-left: 6px; background-color: fuchsia; } #close { clear: both; } </code></pre> <p>Is there a way to fix this? I have this set up on a temporary folder on my local server at:</p> <p><a href="http://68.113.27.229/test" rel="nofollow">http://68.113.27.229/test</a></p> <p>The two divs that I need to force the wrapper to grow are Leftcontent and Rightcontent.</p> <p>Thanks!</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