CODEWITHSUNDEEP
css
MozazDesign
MozazDesign

Reputation: 617

Help with CSS layout

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

Upvotes: 0

Views: 85

Answers (4)

Sadeq
Sadeq

Reputation: 8043

It take 2 steps:

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

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.

Upvotes: 0

Jeff Fohl
Jeff Fohl

Reputation: 2076

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

Upvotes: 1

benzimmer
benzimmer

Reputation: 298

I think an

#header {
  overflow:hidden
}

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

Upvotes: 0

Jeff Mattfield
Jeff Mattfield

Reputation:

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

Upvotes: 0

Related Questions