Hi there,
I am working on css positioning and I have encountered a problem.
I have these two pages:
1)http://antobbo.webspace.virginmedia.com/various_tests/2011_10_25_css_positioning/test.htm
2)http://antobbo.webspace.virginmedia.com/various_tests/2011_10_26_image_slides/test.htm
the first one has box B (yellow) and C(red) with
position:absolute;
top 0;
right 0;
the second one has 3 images with:
img
{
position:absolute;
top: 0;
left:0;
}
Now why in the first one the boxes overlap whereas in the second one the boxes are nicely laid out one after another one?
Here's the code:
html for 1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="a">
<p>A</p>
<div id="b">
<p>B</p>
</div>
<div id="c">
<p>C</p>
</div>
</div>
</body>
</html>
css for 1)
#a
{
width:800px;
height:500px;
background-color:blue;
position:relative;
}
#b
{
margin:0 auto;
width:72px;
height:150px;
background-color:yellow;
position:absolute;
top:0;
right:0;
}
#c
{
width:70px;
height:150px;
background-color:red;
/*margin-top:30px;*/
position:absolute;
top:0;
right:0;
}
html code for 2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image slides test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main_container">
<div class="wrap">
<img src="water_thumb_7.jpg" class="front" alt="">
<img src="back1.jpg" alt="">
</div>
<div class="wrap">
<img src="water_thumb_5.jpg" class="front" alt="">
<img src="back2.jpg" alt="">
</div>
<div class="wrap">
<img src="water_thumb_6.jpg" class="front" alt="">
<img src="back3.jpg" alt="">
</div>
</div>
</body>
</html>
CSS for 2)
.main_container
{
width:496px;
height:500px;
border:1px solid blue;
margin: 0 auto;
}
.wrap
{
border: 1px solid magenta;
width:150px;
height:150px;
margin-top:10px;
margin-left:10px;
float:left;
position:relative;
}
img
{
position:absolute;
top: 0;
left:0;
}
thanks