Databases
StackOverflow2013
Postsdbo
POHow to layout my website to have 4 rows and 1 column?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to layout my website to have 4 rows and 1 column?
    text
    copied!<p>I expect my page to be similar to <a href="http://au.yahoo.com/?p=us" rel="nofollow">Yahoo</a> my expected result and the code are as following. I have tried different method but does not work. It should be in the middle and has the following sections.</p> <p><strong>Expected result</strong></p> <pre><code> 50% |LeftHeader middleHeader RightHeade| 50% 50% | 50% Menu1 Menu2 Menu3 50% | 50% 50% |Content goes here ***********************************************| 50% |*****************************************************************| 50% | 50% text of Footer goes here 50% | 50% </code></pre> <p>These lines >> | show the border sections for example footer is that big but its text should be in center.</p> <p>My code is as following</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;style&gt; #wrapper { margin: 0 auto; width:50%; } #header { background-color:#faa; height:50px; font-size: 0; } #header &gt; div { display: inline-block; width: 33.3333%; font-size: 12pt; height: 100%; } #left { background-color:red; height:20px; } #middle { background-color:yellow; height:20px; } #right { background-color:green; height:20px; } #menu { width: 100%; margin: 0 auto; background-color:#faa; height: 20px; font-size: 0; } #menu &gt; a { display: inline-block; font-size: 12pt; width: 33.333% } #content { top:50px; bottom:150px; overflow:auto; } #footer { bottom: 0; width: 100%; background-color:#afa; height:150px; } #footer &gt; div { margin-left: 50%; } &lt;/style &gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="header"&gt; &lt;div id="left"&gt; left header &lt;/div&gt; &lt;div id="middle"&gt; middle &lt;/div&gt; &lt;div id="right"&gt; right header &lt;/div&gt; &lt;/div&gt; &lt;div id="menu"&gt; &lt;a href="#"&gt;menu1&lt;/a&gt; &lt;a href="#"&gt;menu2&lt;/a&gt; &lt;a href="#"&gt;menu3&lt;/a&gt; &lt;/div&gt; &lt;div id="content"&gt; content &lt;/div&gt; &lt;div id="footer"&gt; footer is here &lt;/div&gt; &lt;/div&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