Log in

View Full Version : Div Overlap Issue


benzoenator
09-07-2010, 01:57 AM
Hi guys,

First time poster, long time lurker.

I'm a complete novice when it comes to CSS, so I apologise if I've made a stupid mistake.

I'm trying to get a simple 2 column layout working - left hand column being navigation and right hand side being the content. I'm that the content div is going underneath the navigation div. When I do stretch the window out, it comes right, but if possible I'd like the two divs to remain to on the same line no matter what the size of the page. I've googled around for an hour and tried a whole bunch of things to no avail. I'm hoping I've made a stupid mistake, but if someone could take a look over my code, I'd be extremely appreciative :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color:#A5A5A5;
}

.container {
margin: 0 auto;
width:90%;
}

.navigation {
float: left;
clear: left;
margin-right: 30px;
}

.menuarea {
border: 1px solid black;
width: 200px;
}

.menuheading {
background-color:#069;
border-bottom: 1px solid black;
font-size:14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
color: white;
padding:2px;
}

.content {
float:left;
clear: right;
width:80%;
border: 1px solid black;

}

.contentheading {
padding:2px;
background-color:#069;
border-bottom: 1px solid black;
font-size:14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
color: white;
}


-->
</style></head>

<body>
<div align="center">{IMAGE}</div>
<br />
<div class="container">
<div class="navigation">
<div class="menuarea">
<div class="menuheading">{MENU TITLE}</div>
{MENU CONTENT}
</div>
</div>
<div class="content">
<div class="contentheading">{CONTENT TITLE}</div>
{CONTENT}
</div>

</body>
</html>
coothead
09-07-2010, 10:15 AM
Hi there benzoenator,

and a warm welcome to these forums. ;)

Here is one possible solution to your problem...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Untitled Document</title>

<style type="text/css">
body {
background-color:#a5a5a5;
font-family:verdana,geneva,sans-serif;
font-size:100%;
}
#image {
display:block;
width:80px; /*this is for testing only*/
height:80px; /*this is for testing only*/
margin:auto;
background-color:#fff; /*this is for testing only*/
}
#container {
width:90%;
border:1px solid #000;
margin:auto;
background-color:#fff;
overflow:hidden;
}
#navigation {
float:left;
width:20%;
border-right:1px solid #000;
margin-right:-1px;
}
.heading {
padding:2px;
border-bottom:1px solid #000;
background-color:#069;
font-size:90%;
font-weight:bold;
color:#fff;
}
#content {
float:left;
width:80%;
border-left:1px solid #000;
margin-right:-1px;
}
</style>

</head>
<body>

<div><img id="image" src="#" alt="{IMAGE}"></div>

<div id="container">

<div id="navigation">
<div class="heading">{MENU TITLE}</div>
{MENU CONTENT}
</div>

<div id="content">
<div class="heading">{CONTENT TITLE}</div>
{CONTENT}
</div>

</div><!-- end #container -->

</body>
</html>

coothead