Databases
StackOverflow2013
Postsdbo
POArranging three rectangles using html/css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POArranging three rectangles using html/css
    text
    copied!<p>What's the simplest way to achieve the following with HTML/CSS:</p> <pre><code>+---------+---------------------------------------------------+ | my | Home About Categories Donate | | best +---------------------------------------------------+ | website | Search __________ | +---------+---------------------------------------------------+ </code></pre> <p>Constraints:</p> <ol> <li>"my best website" is text, not an image, so cannot specify height of "masthead" in px</li> <li>The height of each of the two long rectangles should take up 50% of the height of the square box</li> <li>The two long rectangles should stretch "all the way" to the right</li> </ol> <p>Here is my best attempt:</p> <pre class="lang-css prettyprint-override"><code>#masthead { background-color:red; } #masthead-sitename { font-size:3em; float:left; color:white; padding:20px; background-color:black; width:188px; } #masthead-twobars { float:left; background-color:green; } #masthead-menu { float:left; width:100%; font-size:x-large; color:white; padding:20px; background-color:gray; } #masthead-search { float:left; width:100%; font-size:x-large; color:white; padding:20px; background-color:yellow; } </code></pre> <pre class="lang-html prettyprint-override"><code>&lt;div id="masthead"&gt; &lt;div id="masthead-sitename" &gt; my&lt;br/&gt;best&lt;br/&gt;website &lt;/div&gt; &lt;div id="masthead-twobars" &gt; &lt;div id="masthead-menu"&gt; Home About Categories Donate &lt;/div&gt; &lt;div id="masthead-search"&gt; Search &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>It fails because the two long rectangles do not stretch all the way to the right, and the heights of the two long rectangles do not add up to the height of "masthead-sitename"</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