Databases
StackOverflow2013
Postsdbo
POGetting div to expand correctly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting div to expand correctly
    text
    copied!<p>I've spent the last couple hours researching every layout method I can think of to get this to work. The code I'm working with is below:</p> <pre><code>&lt;!-- Begin Wrap --&gt; &lt;div id="wrap"&gt; &lt;!-- Begin contentWrap --&gt; &lt;div id="contentWrap"&gt; &lt;!-- Begin statementDiv --&gt; &lt;div id="statementDiv" class="transparent blackText"&gt; &lt;p&gt; ART&lt;br&gt; CULTURE&lt;br&gt; F&lt;span class="miniMargin"&gt;A&lt;/span&gt;SHION&lt;br&gt; THEBLACK&lt;br&gt; COLLARWORKER&lt;br&gt; &lt;/p&gt; &lt;/div&gt; &lt;!-- End statementDiv --&gt; &lt;!-- Begin miniWrap --&gt; &lt;div id="miniWrap"&gt; &lt;!-- Begin socialDiv --&gt; &lt;div id="socialDiv" class="transparent marginRight"&gt; &lt;/div&gt; &lt;!-- End socialDiv --&gt; &lt;!-- Begin navButtons --&gt; &lt;div id="navButtons" class="floatLeft"&gt; &lt;img src="images/buttons/gallery.png" class="marginRight"&gt; &lt;img src="images/buttons/blog.png"&gt; &lt;/div&gt; &lt;!-- End navButtons --&gt; &lt;/div&gt; &lt;!-- End miniWrap --&gt; &lt;!-- Begin fillDiv --&gt; &lt;div class="fillDiv transparent blackBG"&gt;&lt;/div&gt; &lt;!-- End fillDiv --&gt; &lt;/div&gt; &lt;!-- End contentWrap --&gt; &lt;!-- Begin Footer --&gt; &lt;div id="footer"&gt; &lt;/div&gt; &lt;!-- End Footer --&gt; &lt;/div&gt; &lt;!-- End Wrap --&gt; </code></pre> <p>and the CSS is:</p> <pre><code>#wrap {height: 100%; width:100%; display: table;} #miniWrap {height: 41px; width: 362px; float: left; display: table-cell;} #navButtons {position: relative;height: 41px;float: left;} #contentWrap {position: absolute; bottom: 0; float: left; display: table-row;} #socialDiv {height: 41px;float: left;} #statementDiv {width: 365px; font-size: 42px; font-family: Arial Black, Gadget, sans-serif; line-height: .8; letter-spacing: -3px; display: table-cell;} .fillDiv {width: 100%;height: 41px;display: table-cell;} .miniMargin {margin: 0 -3px;} .marginRight {margin-right: 3px;} .floatLeft {float: left;} .blackText {color: #0d0601;} .blackBG {background: #0d0601;} </code></pre> <p>I've gone back and forth changing the layout so much I've inadvertently broken the design more. Any tips or suggestions would be greatly appreciated. </p> <p>What I am hoping to accomplish is to have statementDiv, miniWrap, and fillDiv to on the same horizontal line. The two left divs have a static size. I would like the third div (fillDiv) to auto expand to fill the remaining % needed. </p> <p>Auto makes the div go to 0 wide, and 100% causes the line to drop under the other divs. </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