ansaurus

Question

Help with CSS layout

Answer 1

A:

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

2010-08-14 19:58:49

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

2010-08-14 20:01:42

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.

2010-08-14 20:01:47

Answer 2

A:

I think an

#header {
  overflow:hidden
}

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

zeroathome 2010-08-14 19:59:40

Answer 3

+1 A:

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 Fohl 2010-08-14 20:00:08

Answer 4

A:

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.

PC2st 2010-08-14 20:04:45

ansaurus

tags:

views:

answers:

Help with CSS layout

related questions