Databases
StackOverflow2013
Postsdbo
POcss layout issue with aligning my boxes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss layout issue with aligning my boxes
    text
    copied!<p>I'm trying to create a css template here using div tags.</p> <p>What I'm trying to do is shown in this image:</p> <p><a href="http://i42.tinypic.com/9blvnp.png" rel="nofollow noreferrer">http://i42.tinypic.com/9blvnp.png</a></p> <p>however im having some issues. I can get box 1 to work well, and when i put box 2,3 and 4 in position they go where I want them.</p> <p>However with box 5, it goes in the right position however it also forces box 4 to start from the same height as it. As shown in this image:</p> <p><a href="http://i41.tinypic.com/344zgnc.png" rel="nofollow noreferrer">http://i41.tinypic.com/344zgnc.png</a></p> <p>my code is:</p> <p>I couldn't find a html live demo but copying and pasting this to one should work</p> <pre><code> &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Leopold Planning &lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untited Document&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0 auto; } body { background-image:url(background.png); background-color:#1f54bd; background-repeat:repeat-x; background-attachment:fixed; margin-top:0px; text-align: center; font-family:Lucinda Bright; font-size: 14px; } .contain { width:1000px; margin: 0 auto; } .info { width: 500px; background-color: white; float: right; margin-top: 10px; padding: 5px; margin-right: 300px; } .info1 { width: 990px; background-color: white; float: right; margin-top: 10px; padding: 5px; } .contact { width: 200px; background-color: white; float: right; margin-top: 10px; padding: 5px; } #navigation { font-size:1.2em; width:180px; margin-left: 0px; margin-top: 10px; float:left; overflow: hidden; } #navigation ul { margin:0px; padding:0px; } #navigation li { list-style: none; } ul.top-level { background:#ffffff } ul.top-level li { border-bottom: #C0C0C0 solid; border-width: 1px; } #navigation a { color: #D4A017; cursor: pointer; display:block; line-height: 25px; text-indent: 0px; text-decoration:none; width:100%; } #navigation a:hover{ color: #fff; text-decoration:none; } #navigation li:hover { background: #2554C7; position: relative; } .contact_info { width:180px; background-color: white; float: left; margin-top: 5px; overflow: hidden; } .mainbody { width: 500px; background-color: white; float:left; margin-top: 10px; margin-left: 10px; overflow: hidden; padding: 5px; } .phone { width: 280px; background-color: white; float: right; margin-top: 10px; margin-left: 10px; overflow: hidden; padding: 5px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- banner removed --&gt; &lt;!-- container --&gt; &lt;div class="contain"&gt; &lt;!-- WELCOME MESSAGE --&gt; &lt;div class="info1"&gt; &lt;h2&gt; Welcome to Leopold Planning&lt;/h2&gt; &lt;p&gt;Thank you for visiting Leopold Planning, we hope you find what you are looking for and we are always willing to help!&lt;/p&gt; &lt;/div&gt; &lt;!-- NAVIGATION --&gt; &lt;div id="navigation"&gt; &lt;ul class="top-level"&gt; &lt;li&gt;&lt;a id="displayText2" href="javascript:App();"&gt;&lt;b&gt;Planning Application&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="displayText3" href="javascript:cert();"&gt;&lt;b&gt;Certificate of Lawfulness Applications&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="displayText1" href="javascript:Appeal();"&gt;&lt;b&gt;Planning Appeals&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="displayText" href="javascript:statement();"&gt;&lt;b&gt;Planning Statements&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Site Appraisals/Stalled Sites&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- Main Body --&gt; &lt;div class="mainbody"&gt; &lt;!-- top navigation --&gt; &lt;div id="navigation1"&gt; going to have three links here &lt;/div&gt; &lt;/div&gt; &lt;!-- main content --&gt; &lt;div class="mainbody"&gt; sadas &lt;/div&gt; &lt;!-- Phone back --&gt; &lt;div class="phone"&gt; &lt;h3&gt;Phone Back&lt;/h3&gt; &lt;table align="center"&gt; &lt;form action="" method="post"&gt; &lt;tr&gt;&lt;td align="left"&gt;Name:&lt;font color="red"&gt;*&lt;/font&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="name_p" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td align="left"&gt;Number:&lt;font color="red"&gt;*&lt;/font&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="number_p" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td colspan="2"&gt;&lt;input type="submit" name="p_submit" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/form&gt; &lt;/table&gt; &lt;/div&gt; &lt;!-- Contact --&gt; &lt;!-- Twitter --&gt; &lt;/div&gt; &lt;/div&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