Databases
StackOverflow2013
Postsdbo
POHow to get a floating-DIV to fill available space within its parent DIV?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get a floating-DIV to fill available space within its parent DIV?
    text
    copied!<p>How can I get the right floating DIVs to fill their available space?</p> <p><a href="http://tanguay.info/web/external/cssRightSide.png">alt text http://tanguay.info/web/external/cssRightSide.png</a></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .content{ background-color: #fff; margin: 0px auto; width: 760px; border: 1px solid blue; font-size: 10pt; } .content .leftSide { background-color: yellow; float: left; padding: 5px; } .content .rightSide { background-color: orange; float: left; width: *; padding: 5px; text-align: center; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="content"&gt; &lt;div class="leftSide"&gt;&lt;img src="test.jpg"/&gt;&lt;/div&gt; &lt;div class="rightSide"&gt;Right side text should be centered.&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div class="leftSide"&gt;&lt;img src="test2.jpg"/&gt;&lt;/div&gt; &lt;div class="rightSide"&gt;And the background should fill the DIV of course.&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><H2>INTERMEDIATE ANSWER:</H2></p> <p>Thanks Guffa and Rich, taking float:left off the right side allowed the text to be centered, but to get the background color to extend down, I had to also make the background color of the parent DIV.</p> <p>However, <strong>I still can't get the text to align in the middle vertically since the DIV doesn't actually go all the way down</strong>, is there an "auto" for that too? e.g. height:*, or float-down:auto? As Cletus mentioned below, this would all be trivial in HTML tables, the CSS designers surely included some property to "make the vertical space fill downward".</p> <p><a href="http://tanguay.info/web/external/cssRightFixed.png">alt text http://tanguay.info/web/external/cssRightFixed.png</a></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .content{ background-color: orange; margin: 0px auto; width: 760px; border: 1px solid blue; font-size: 10pt; } .content .leftSide { background-color: yellow; float: left; padding: 5px; } .content .rightSide { background-color: orange; padding: 5px; text-align: center; vertical-align: middle; /* DOESN'T WORK SINCE THE DIV DOES NOT ACTUALLY GO ALL THE WAY DOWN */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="content"&gt; &lt;div class="leftSide"&gt;&lt;img src="test.jpg"/&gt;&lt;/div&gt; &lt;div class="rightSide"&gt;Right side text should be centered.&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div class="leftSide"&gt;&lt;img src="test2.jpg"/&gt;&lt;/div&gt; &lt;div class="rightSide"&gt;And the background should fill the DIV of course.&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div class="leftSide"&gt;&lt;img src="test3.jpg"/&gt;&lt;/div&gt; &lt;div class="rightSide"&gt;And the background should fill the DIV of course.&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div class="leftSide"&gt;this is a text on the left with no image&lt;/div&gt; &lt;div class="rightSide"&gt;And the background should fill the DIV of course.&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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