photo list with description 1

[vttech]

I am creating a list of images that will float left. A couple of the images are not floating left. I used the following css code

Here is a link showing the issue

http://cedtech23.tripod.com/index.html

<style  type="text/css">

#staffimgs ul  { 
list-style : none; 
width: 780px;
margin: 0;
margin: 0;
border-top: 20px solid gray;
font-size: 12px;

}

#staffimgs li {
float: left;
width: 260px;
padding: 2em 0; /* top right bottom left */
}

#staffimgs h3 {
margin: 0 10px; /* top right bottom left */
padding: .5em 0 0 0; /* top right bottom left */
font-size: 100%;
}

#staffimgs img {
display: block;
width: 150px;
height: 150px;
}

#staffimgs p {
margin: 0 10px ; /* top right bottom left */
padding : 0 0;
}

</style>

Newbie in search of knowledge

 

[johnwm]

Just stick a clearing div after every third image:
<div style="clear:both">&nbsp;</div>

BTW it's considerate to remove all that advertising junk on links you want us to look at - I'm unimpressed by your hideous array of pop-up junk

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[vttech]

sorry about the popups, it was a free hosting option. I will have to pay for one if I plan in the future to insert links.
Question

Why is this happening? and what does the clear:both do?

Newbie in search of knowledge

 

[johnwm]

'Clear' defines whether a block level element is displayed on the same line as a nearby floated element, or whether its displayed below it. When you have a row of floated elements and overflow (by accident or design) onto the next row, horizontal position of the next element will be just to the right of the LOWEST of the previous row's items. Thus the Clear:Both div containing something solid (in this case a non-breaking space) moves its own contents clear of all the exiting floating elements and the next floated element will be cleared below that div

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Vragabond]

When you say a couple are not floating left... Which images are you talking about? I can see all of them floating.

 

[johnwm]

They are all floating - I think OP is trying to achieve 3 sets of image + text per row, rather than for instance the 2 that appear (in positions 2 and 3) in row 3.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints