...

View Full Version : layout: can't avoid overlapping



aspnetwmtr
05-22-2010, 02:46 AM
Hello everybody from Madrid,

I've been fighting against CSS for one week now. I want to get a simple layout like the one that is seen on the attachment 'what_i_want.png', but the best I can get is a layout like the one that is seen on 'what_i_get.png'.

The main container, painted in red, is a <div>. It's inside the <body>, and it has margin-left: auto; margin-right: auto; width: 1000px;

The blue div has a fixed distance between it's left border and the red container right border.

I thought it would be better to attach some paintings than pasting here a lot of code which don't really work.

I would appreciate if you could give me some example. Thank you very much in advance.

Excavator
05-22-2010, 03:23 AM
Hello aspnetwmtr,
Maybe this will get you started?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
margin: 30px auto;
position: relative;
z-index: 2;
background: #999;
border: 5px solid #f00;
}
#purple {
height: 75px;
width: 550px;
margin: 10px;
border: 5px solid #639;
}
#yellow {
height: 300px;
width: 550px;
margin: 10px;
border: 5px solid #ff0;
}
#green {
height: 75px;
margin: 10px;
border: 5px solid #0f0;
}
#kindofred {
height: 75px;
margin: 10px;
border: 5px solid #900;
}
#blue {
height: 400px;
width: 300px;
position: absolute;
top: 10px;
left: 580px;
z-index: 1;
border: 5px solid #00f;
}
</style>
</head>
<body>
<div id="container">
<div id="purple"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="kindofred"></div>
<div id="blue"></div>
<!--end container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum