Note that there are some explanatory texts on larger screens.

plurals
  1. POHelp with CSS layout
    primarykey
    data
    text
    <p>I'm currently coding my design portfolio and have encountered a problem with the layout. </p> <p>Here is a link to my website so you can see the problem: <a href="http://www.mozazdesign.co.cc/" rel="nofollow noreferrer">http://www.mozazdesign.co.cc/</a></p> <p>Basically, I want the contact me and the icons below to appear under the header and navigation. I have put them in separate containers but for some reason where ever I place the contact me div the header follows.</p> <p>Here's the code:</p> <pre><code>&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt; &lt;link href="styles.css" rel="stylesheet" type="text/css" /&gt; &lt;title&gt;MozazDesign Portfolio&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="header"&gt; &lt;div id="logo"&gt; &lt;/div&gt;&lt;!--end logo--&gt; &lt;div id="nav"&gt; &lt;ul id="main_nav"&gt; &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;about me&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;blog&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;!--end main nav--&gt; &lt;/div&gt;&lt;!--end nav--&gt; &lt;/div&gt;&lt;!--end header--&gt; &lt;div id="main_content"&gt; &lt;div id="contact"&gt; &lt;/div&gt;&lt;!--end contact"--&gt; &lt;/div&gt;&lt;!--end main content--&gt; &lt;/div&gt;&lt;!--end container--&gt; &lt;/body&gt; body { padding: 0px; margin: 0px; background:url('images/Background.png'); font-family: century gothic; } #nav a { text-decoration: none; color: white; } #container { margin: 0 auto; width: 960px; } #header { width: 960px; } #logo { background:url('images/Logo.png') no-repeat; height: 340px; width: 524px; float: left; margin-left: 0px; &lt;!--check--&gt; } #nav { background:url('images/Nav_Container.png') no-repeat; width: 435px; height: 33px; float: right; margin-top: 100px; padding: 0px;} #main_nav { padding: 0px; margin-left: 15px; margin-top: 5px; } #main_nav li { list-style: none; display: inline; font: 18px century gothic, sans-serif; color: white; margin-right: 18px; } #main_content { width: 960px; margin-top: 250px; } #contact { background: url('images/contact.png'); height: 274px; width: 295px; } </code></pre> <p>I would really appreciate any help! Thanks in advance! :)</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.
    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