CSS question [height attribute]

[pepeleuepe]

I've been making webpages with good old tables for years and recently have started to learn CSS in order to clean up my HTML and conform to standards (and quit typing tr and td two billion times).

So I've been working on a site for a buisness and they have a section with little text descriptions that are one or two paragraphs long about each person that works there. The problem I'm having is that I have to specify a height for the div that contains the information in order for the div's to not double up on top of each other and flow down the page. This means the height is dependant on the longest description and there's an akward spacing between each description since the descriptions are all of different lengths.

Not sure if that made any sense, but here's the page I'm working on and here's the table version. The problem is the different amount of spacing between Thomas and Linda and between Thomas and Mike. I noticed there is an "auto" setting to the height attribute, but when I tried that it didn't work either.

Once again, not sure if this description of my problem made any sense at all, so let me know if I need to be more clear. I know I could make different divs for each section, but it seems that I shouldn't need to do that so I thought I'd try and simplify it.

Thanks

 

[mnkeybsness]

This is happening because all of your elements inside of .peoplebox have absolute positioning on them. Absolute positioning is used to specify the absolute position of an element according to the entire window, NOT the element that it is in.

In fact, almost all of your elements in the stylesheet have absolute positioning. This is a very bad way for everything to be done and you should stay away from it in designing a site.

Here is some reading on the position: property.

I'll give you the quick fix for your layout question that you posted, but I think that you should not JUST change this, but change everything else that is using absolute positioning. Replace this is the place needed, but note that I made them classes instead of id's (with a '.' instead of '#'). 'ids' are only to be used for an element that appears ONLY once on a page. Most browsers will ignore an id that is a duplicate on a page. This means that your html should reflect these changes to use <div class="peoplebox"></div> etc...

.peoplebox {width: 760px;}
.peopleimage {float: left; width: 150px; padding-left: 25px;}
.peopletalk1 {width: 610px;}
.peopletalk2 { width: 760px; padding-left: 15px; padding-right: 15px;}

 

[pepeleuepe]

Thanks for the tips. As you can see I'm just starting with the CSS stuff and I appreciate the help. I had been using absolute positioning to form the columns needed for the site. I enclosed all of the absolute div's in relatively positioned div's mostly because this is the only way I know of getting CSS to place two objects next to each other in a column design. I'll look back into it and change the things you suggested so I'll wait till then to bother anyone again. Thanks again for the help.