1. Home
  2. Forums Index
  3. Browser Side / CSS 10:53 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Trouble containing DIVs

         

terrybarnes

6:11 pm on Dec 10, 2008 (gmt 0)

10+ Year Member



I'm having a bit of trouble and I'm sure it's the most basic thing in the CSS world! I have a containing DIV and then within that I have a few rows of photos and descriptive text. I'd like these to be all neat but I can't seem to get them to stay contained within the main container.

Any ideas?

Here's the code (I've added borders so it's easier to see the problem)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
<!--
#content
{
width: 724px;
padding: 20px;
border: solid 3px #2aace2;
}
.image-container
{
float: left;
width: 100%;
height: auto;
margin: 0;
border: solid 1px #ff7800;
}
.image-left
{
float: left;
margin-right: 10px;
padding: 3px;
border: solid 1px #2aace2;
}

-->
</style>
<title></title>
</head>
<body>
<div id="content">
<div class="image-container">
<img class="image-left" src="images/image2.jpg" alt="" width="160" height="120" border="0"> Mauris quis felis vitae orci tempus pellentesque. Aliquam at eros et mi mollis commodo.
</div>
<div class="image-container">
<img class="image-left" src="images/image2.jpg" alt="" width="160" height="120" border="0"> Mauris quis felis vitae orci tempus pellentesque. Aliquam at eros et mi mollis commodo. Mauris semper erat non eros iaculis vulputate. Nam vitae sapien.
</div>
</div>
</body>
</html>

g1smd

6:34 pm on Dec 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



One thing. I would enclose the blocks of text within paragraph tags.

Sometimes 

clear: both;
is needed on some of the objects.

terrybarnes

7:15 pm on Dec 10, 2008 (gmt 0)

10+ Year Member



I've changed this:

.image-container
{
width: 100%;
height: 150px;
clear: both;
margin: 0;
border: solid 1px #ff7800;
}

and it seems to have done the trick... sort of. I've had to add a specific height attribute though otherwise the image-container seems to constrain to the amount of text and not the height of the enclosed image?

samir0602

1:44 pm on Jan 14, 2009 (gmt 0)

10+ Year Member



This is the correct code to solve ur problem. actually i use clear class. and then i add "<div class="clear"></div>" after "<div class="image-container"></div>" this this DIV.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
<!--
#content
{
width: 724px;
padding: 20px;
border: solid 3px #2aace2;
}
.image-container
{
float: left;
width: 100%;
height: auto;
margin: 0;
border: solid 1px #ff7800;
}
.image-left
{
float: left;
margin-right: 10px;
padding: 3px;
border: solid 1px #2aace2;
}

.clear
{
clear:both;
}

-->
</style>
<title></title>
</head>
<body>
<div id="content">
<div class="image-container">
<img class="image-left" src="image2.jpg" alt="" width="160" height="120" border="0"> Mauris quis felis vitae orci tempus pellentesque. Aliquam at eros et mi mollis commodo.
</div>
<div class="image-container">
<img class="image-left" src="image2.jpg" alt="" width="160" height="120" border="0"> Mauris quis felis vitae orci tempus pellentesque. Aliquam at eros et mi mollis commodo. Mauris semper erat non eros iaculis vulputate. Nam vitae sapien.
</div>
<div class="clear"></div>
</div>

</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:53 pm May 1, 2026