CSS Forum

**cfgcjm** · 12-05-2007, 03:16 PM

I've just started using CSS and i'm having trouble positioning layers. I would like both the white logo layer and the blue navigation layer to be inside the navy header layer. I've got the logo layer where i want it but i can't seem to get the blue layer on the same line. Below are both my html and css code as well as a link to the page to you can have a visual.

CSS

Code:

@charset "utf-8";
/* CSS Document */

body {
    margin:9px 9px 9px 9px;
    padding:0px;
    background:white;
}
#header{
    background:navy;
    width:775px;
    height:auto;
    margin-left:auto;
    margin-right:auto;    
}

#logobox{
    background:white;
    width:210px;
    height:40px;
    margin-left:10px;
    text-align:center;
}

#navbox{
    background:blue;
    width:500px;
    height:40px;
    position:inherit;
}

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Digicon Media : Home</title>
    <meta name="keywords" content="Digicon Media Group Web Design webdesign small business communication connect with customers">
    <meta name="description" content="Digicon Media Group specializes in connecting small business with customers via a digital medium. ">
    <link href="normal.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        a:link {color:navy;text-decoration:none;}
        a:visited {color:navy;text-decoration:none;}
        a:hover {color:blue;text-decoration:underline;}
        a:active {color:red;text-decoration:none;}
    </style>

</head>

<body>
    <div id="header">
        <div id="logobox"><img alt="" src="images/smlogo.gif" width="219" height="30">
        </div>
        <div id="navbox">
        </div>
    </div>
</body>
</html>

http://digiconmediagroup.com/new.htm

**LadynRed** · 12-05-2007, 03:36 PM

You need to use floats - float the logo and the navbox left, then clear the float after the closing div for #header.

Like this:

Quote:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digicon Media : Home</title>
<meta name="keywords" content="Digicon Media Group Web Design webdesign small business communication connect with customers">
<meta name="description" content="Digicon Media Group specializes in connecting small business with customers via a digital medium. ">
<link href="normal.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link {color:navy;text-decoration:none;}
a:visited {color:navy;text-decoration:none;}
a:hover {color:blue;text-decoration:underline;}
a:active {color:red;text-decoration:none;}
body {
margin:9px 9px 9px 9px;
padding:0px;
background:white;
}
#header{
background:navy;
width:775px;
/*height:auto;*/
margin: 0 auto;

}

#logobox{
background:white;
width:210px;
height:40px;
margin-left:10px;
text-align:center;
float: left;
}

#navbox{
background:blue;
width:500px;
height:40px;
float: left;

}

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
</style>

</head>

<body>
<div id="header">
<div id="logobox"><img alt="" src="http://www.webmaster-talk.com/images/smlogo.gif" width="219" height="30">
</div>
<div id="navbox">
</div>
<br class="brclear" />
</div>

</body>

If you add any LEFT margin to either floated box, you'll trigger a bug in IE6 and below that you will have to fix.