Home/ Questions/Q 1006629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:29:28+00:00

I’m currently coding my design portfolio and have encountered a problem with the layout.

  • 0

I’m currently coding my design portfolio and have encountered a problem with the layout.

Here is a link to my website so you can see the problem: http://www.mozazdesign.co.cc/

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.

Here’s the code:

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>

<body>

<div id="container">
    <div id="header">
        <div id="logo">

        </div><!--end logo-->

        <div id="nav">
            <ul id="main_nav">
                <li><a href="#">home</a></li>
                <li><a href="#">about me</a></li>
                <li><a href="#">gallery</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">contact</a></li>
            </ul><!--end main nav-->
        </div><!--end nav-->
    </div><!--end header-->

    <div id="main_content">
        <div id="contact">

        </div><!--end contact"-->
    </div><!--end main content-->
</div><!--end container-->

</body>

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;  <!--check-->
}

#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;
}

I would really appreciate any help! Thanks in advance! 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One of the problems you had was that your floated elements were not being contained inside the parent element (#header). You can use overflow:auto; on the parent element to contain floated elements inside. But, for a header like this, I usually opt to just position everything absolutely, since the content is not dynamic.

    I am not sure if this is exactly what you are looking for, but this CSS will make it look like what you are looking for, I think.

    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 {
height:200px;
position:relative;
}

#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}

#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
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 {

}

#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
    • 0