elmu
04-06-2008, 03:09 PM
Hello,
I have a html code below. The problem is that the image container divs don't stretch it's parent div. As result the next element margin will be alligned to a wrong place.
Any idea how to solve this?
Thanks!
<!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">
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
display: inline; /* Because of IE double margin bug */
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
#main_panel h1{
margin:5px 0px;
border:1px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
}
img {
width:120px;
height:80px;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 150px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:150px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
#main_panel h1{
margin:20px 0px;
padding:20px;
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
color: #736b58;
border:1px solid red;
clear:right;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="left_panel">
Menu1<br/><br/>Menu1<br/><br/>Menu1<br/><br/>
</div>
<div id="main_panel">
<div id="main_panel_header">
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
</div>
<h1>Heading</h1>
</div>
</div>
</div>
</body>
</html>
I have a html code below. The problem is that the image container divs don't stretch it's parent div. As result the next element margin will be alligned to a wrong place.
Any idea how to solve this?
Thanks!
<!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">
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
display: inline; /* Because of IE double margin bug */
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
#main_panel h1{
margin:5px 0px;
border:1px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
}
img {
width:120px;
height:80px;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 150px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:150px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
#main_panel h1{
margin:20px 0px;
padding:20px;
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
color: #736b58;
border:1px solid red;
clear:right;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="left_panel">
Menu1<br/><br/>Menu1<br/><br/>Menu1<br/><br/>
</div>
<div id="main_panel">
<div id="main_panel_header">
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
</div>
<h1>Heading</h1>
</div>
</div>
</div>
</body>
</html>