Hi, I'm using divs to create a structure of 3 columns.
In my first column I have 1 image, In my second column I have two images one after another (vertical) and in the third column I have one small image. My problem is that the image in the third column is not on the top of the column but begin at the height of the second image in the second column.
I want the image to be on the top of that column not in the middle of it.
what can I do?
Thanks, Oz
Here is my code:
<div style="width:800px">
<div style="width:198px;height:497;background-image:url('images/pic1.gif');float:left">
</div>
<div>
<div style="width:370px;height:315;background-image:url('images/pic2.gif');float:left">
</div>
<div style="width:370px;height:182;background-image:url('images/pic3.gif');float:left">
</div>
</div>
<div style="width:222px;float:left;margin-top:0cm">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"apnea/favorite.GIF" width="221" height="38" border="0"></a>
</div>The problem here is you are not creating 3 columns. The first two divs stack side by side as they are floated, but the next div cannot fit as the total is too wide for the 800px container, so it goes to the next line. As the first div is higher than the second, the third "sticks" on the edge of the first and settles at the bottom of the second div. The fourth floated div will then sit beside the third.
The easiest way to create 3 columns is to float the first column left, float the third column right, and let the second column nestle between the other two using appropriate side margins. Try this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
}
#wrap {
width: 800px;
margin: 0 auto;
}
#left {
width: 198px;
float: left;
height: 497px;
background-image: url('images/pic1.gif');
}
#right {
width: 222px;
float: right;
height: 497px;
background-image: url('apnea/favorite.GIF');
}
#centre {
margin: 0 222px 0 198px;
display: block;
height: 497px;
}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="left">Content for "left"</div>
<div id="right">Content for "right"</div>
<div id="centre">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic2.gif" width="370" height="315" alt="">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic3.gif" width="370" height="182" alt="">
</div>
</div>
</body>
</html>
I separated the css styles instead of using them inline - makes things easier to see and more efficient.
Cheers
GraemeThanks you, Oz
In my first column I have 1 image, In my second column I have two images one after another (vertical) and in the third column I have one small image. My problem is that the image in the third column is not on the top of the column but begin at the height of the second image in the second column.
I want the image to be on the top of that column not in the middle of it.
what can I do?
Thanks, Oz
Here is my code:
<div style="width:800px">
<div style="width:198px;height:497;background-image:url('images/pic1.gif');float:left">
</div>
<div>
<div style="width:370px;height:315;background-image:url('images/pic2.gif');float:left">
</div>
<div style="width:370px;height:182;background-image:url('images/pic3.gif');float:left">
</div>
</div>
<div style="width:222px;float:left;margin-top:0cm">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"apnea/favorite.GIF" width="221" height="38" border="0"></a>
</div>The problem here is you are not creating 3 columns. The first two divs stack side by side as they are floated, but the next div cannot fit as the total is too wide for the 800px container, so it goes to the next line. As the first div is higher than the second, the third "sticks" on the edge of the first and settles at the bottom of the second div. The fourth floated div will then sit beside the third.
The easiest way to create 3 columns is to float the first column left, float the third column right, and let the second column nestle between the other two using appropriate side margins. Try this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
}
#wrap {
width: 800px;
margin: 0 auto;
}
#left {
width: 198px;
float: left;
height: 497px;
background-image: url('images/pic1.gif');
}
#right {
width: 222px;
float: right;
height: 497px;
background-image: url('apnea/favorite.GIF');
}
#centre {
margin: 0 222px 0 198px;
display: block;
height: 497px;
}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="left">Content for "left"</div>
<div id="right">Content for "right"</div>
<div id="centre">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic2.gif" width="370" height="315" alt="">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic3.gif" width="370" height="182" alt="">
</div>
</div>
</body>
</html>
I separated the css styles instead of using them inline - makes things easier to see and more efficient.
Cheers
GraemeThanks you, Oz