box element will not appear below image [Archive]

surreal5335

09-04-2011, 07:50 AM

I am trying to get a box element done either through <p> or <div> (I have tried both) to recognize the image and appear below it instead of ignoring it and appearing behind it.

I have the image with a position: relative which maybe part of the reason, but I need to keep this in order to make a jquery function work properly.

Here is my html

<div class="thumb_container">
<img src="images/logo-jquery.png" class="thumb_image" id="2"/>

<div class="thumb_info" id="info_2">
<label><b>jQuery:</b> 2 years</label><br />

</div>
</div>

Here is my CSS

.thumb_image
{
position: relative;
width: 120px;
height: 120px;
float: left;
top: 40px;
margin: 0px 10px 30px 10px;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
opacity:0.5;
filter:alpha(opacity=50);
}

.thumb_info
{

margin: 0px 10px 0px 10px;
height: 35px;
width: 115px;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
background: -webkit-gradient(linear, 0% 100%, 0% 62%, from(#BCDEDD), to(#D5ECF7), color-stop(0,#7DACBD));

border: solid;
}

Thanks a lot for the help

coothead

09-04-2011, 09:29 AM

Hi there surreal5335,

try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
.thumb_image {
float:left;
width:120px;
height:120px;
margin:40px 10px 30px 10px;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
opacity:0.5;
filter:alpha(opacity=50);
}
.thumb_info {
clear:both;
width: 115px;
line-height:35px;
margin:0 10px;
border:2px solid #000;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
background:#bcdedd;
background:-webkit-gradient(linear, 0% 100%, 0% 62%, from(#bcdedd), to(#d5ecf7), color-stop(0,#7dacbd));
background: -moz-linear-gradient(top, #bcdedd, #d5ecf7);
font-family:'times new roman',serif;
font-size:16px;
text-align:center;
}
</style>

</head>
<body>

<div class="thumb_container">

<img src="http://www.coothead.co.uk/images/girl.jpg" class="thumb_image" alt="">

<div class="thumb_info" id="info_2">
<b>jQuery:</b> 2 years
</div>

</div>

</body>
</html>

coothead