Help with CSS layout

Question

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! :)

Jeff Fohl · Accepted Answer · 2010-08-14 20:00:08Z

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

Jeff Mattfield · Accepted Answer · 2010-08-14 19:58:49Z

0

Looks like you need clear: both on your main_content div.

answered Aug 14, 2010 at 19:58

Jeff Mattfield

2 Comments

MozazDesign Over a year ago

Perfect! Thanks for your help. Although I've never seen that before, can you explain exactly what it does?

Jeff Mattfield Over a year ago

The problem is that the float: right for your #nav div causes everything below it to shift up and wrap around the left side of the #nav div. Using clear: both will make sure that everything stays below the #nav div.

benzimmer · Accepted Answer · 2010-08-14 19:59:40Z

0

I think an

#header {
  overflow:hidden
}

or anything else that clears the floats of div#nav and div#logo should help.

answered Aug 14, 2010 at 19:59

benzimmer

2982 silver badges5 bronze badges

Comments

Sadeq · Accepted Answer · 2010-08-14 20:04:45Z

0

It take 2 steps:

1) Move <div id="contact">...</div> into <div id="logo">...</div>.

2) Change the #contact style to:

background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative; 
float: right;
top: 200px;

You need to set position: relative, otherwise it is not working.

answered Aug 14, 2010 at 20:04

Sadeq

8,1035 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

Help with CSS layout

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related