I'm having trouble with my CSS and HTML code. I want to align the text to the right of an image in a grid format, but it keeps appearing below the image instead. Here is the code snippet:
<html>
<head>
<style type="text/css">
#container { font-size: 12px; font-family: 'Lucida Grande',Verdana,sans-serif; text-align: center; }
#container a.name_link{
text-decoration: none;
color: #8E190B;
font-weight: bold;
padding-bottom: 8px;
}
#image { width:100px; height:104px; border: 2px solid #e9e3dd; float:left;}
#text { padding-top: 5px; padding-bottom:5px; }
.horizontal_banner {float:left; margin: 2px; padding: 4px 2px 10px 10px; }
</style>
</head>
<body>
<div class="horizontal_banner">
<div id="container">
<a href="details.php?id=42">
<img src="uploads/Lisa.jpg" id="image" title="Lisa"/></a> </div>
<div id="name_container">
<a class="name_link" href="details.php?id=42">Lisa</a> </div>
<div id="text">Not available</div>
<div id="text">Not Specified</div>
<div id="text">Female</div>
</div>
<div class="horizontal_banner">
<div id="container">
<a href="details.php?id=23">
<img src="uploads/Lucky.jpg" id="image" title="Lucky" /></a> </div>
<div id="name_container">
<a class="name_link" href="details.php?id=23">Lucky</a> </div>
<div id="text">Employed</div>
<div id="text">25 Years</div>
<div id="text">Male</div>
</div>
</body>
</html>If anyone can assist me with this issue, I would greatly appreciate it.