Problem with divs

**kemkoi** · 12-10-2012 05:58 AM

Hello there, I have this problem with a "website" I'm creating. I've created a container with a Logo box, a navigation box and 2 boxes under the navigationbox who are placed right next to eachother. The problem is that the footer is bugging and gets placed over the 2 boxes. I want the below the 2 boxes.

This is how the "website" looks like live. I colored the different divs so you can see where they're placed.

Live image of the website.

I want the purple one to be on the bottom below the 2 divs that are next to eachother.

Here's the HTML code:

Code:

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Europa Hemsida</title>
</head>

<body>

<center>
<div class="container>
<div class="logo">
<img src="bilder/logga.jpg" />
</div>

<div class="link">
<a href="start.html" target="iframe" onMouseOver="document.hem.src='bilder/hem-mouseover.jpg';" onMouseOut="document.hem.src='bilder/hem.jpg';"> 
<img src="bilder/hem.jpg" name="hem">
</a>

<a href="italien.html" target="iframe" onMouseOver="document.italien.src='bilder/italien-mouseover.jpg';" onMouseOut="document.italien.src='bilder/italien.jpg';"> <img src="bilder/italien.jpg" name="italien">
</a>

<a href="tyskland.html" target="iframe" onMouseOver="document.tyskland.src='bilder/tyskland-mouseover.jpg';" onMouseOut="document.tyskland.src='bilder/tyskland.jpg';"> 
<img src="bilder/tyskland.jpg" name="tyskland">
</a>

<a href="frankrike.html" target="iframe" onMouseOver="document.frankrike.src='bilder/frankrike-mouseover.jpg';" onMouseOut="document.frankrike.src='bilder/frankrike.jpg';"> 
<img src="bilder/frankrike.jpg" name="frankrike">
</a>

<a href="england.html" target="iframe" onMouseOver="document.england.src='bilder/england-mouseover.jpg';" onMouseOut="document.england.src='bilder/england.jpg';"> 
<img src="bilder/england.jpg" name="england">
</a>
</div>

<div id="wrap">
<div class="leftnav">
<iframe src="start.html" name="iframe" height="598px" width="150px" frameborder="0"></iframe>
</div>

<div class="main">
<iframe src="start.html" name="iframe" height="598px" width="874px" frameborder="0"></iframe>
</div>
</div>
<div class="footer">
&copy; All rights reserved - Europa sida 2012
</div>

</div>

</body>
</html>

Here's the CSS code:

Code:

body {background-color:#333
}

.container {
	color: #93C;
	position: relative;
	height: 768px;
	width: 1024px;
	border: 2px solid #C0C0C0;
}
.logo {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	font-weight: bold;
	background-color: #3FF;
	position: relative;
	height: 100px;
	width: 1024px;
}
.link {
	background-color: #EEE;
	position: relative;
	height: 50px;
	width: 1024px;
}
#wrap {
	width:1024px; height:598;
	position:relative;
}  
.main {
	background-color: #FFF;
	position: relative;
	height: 598px;
	width: 874px;
	float: right;
}
.leftnav{
	background-color: #0F3;
	position: relative;
	height: 598px;
	width: 150px;
	float: left;
	border-right: 1px; color:#000;
}
.footer {
	background-color: #936;
	position: relative;
	height: 20px;
	width: 1024px;
	font-family:Arial, Helvetica, sans-serif; color:#000;
}

Please help, this is a schoolproject and my teacher doesen't know what the problem is either so I need help from you guys...

**simplypixie** · 12-10-2012 08:19 AM

What browser are you viewing this in as I have loaded your code in Chrome and the layout displays as expected (though there are issues with your code)? Well as far as I can tell without the correct paths to your images and iframes.

**SndGrdn** · 12-10-2012 10:09 AM

Add the following to rule to your wrap style...

#wrap {
width:1024px; height:598;
position:relative;
clear:both;
}

**slicetohtml** · 12-10-2012 06:28 PM

hello,

Add this line before ending div of #wrap

<div style="clear:both;"></div>

or you can add CLEAR in your .footer class, like:
.footer {
background-color: #936;
position: relative;
height: 20px;
width: 1024px;
font-family:Arial, Helvetica, sans-serif; color:#000;
clear:both;
}

**slicetohtml** · 12-10-2012 06:30 PM

Off-topic but, you can add margin in your .container class to center align the layout instead of using <center> tag, like :
.container {
color: #93C;
position: relative;
height: 768px;
width: 1024px;
border: 2px solid #C0C0C0;
margin:auto;
}

Thread: Problem with divs

Thread Tools

Display

Problem with divs

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions