Note that there are some explanatory texts on larger screens.

plurals
  1. POArranging three rectangles using html/css
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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