CSS with a dataset

I have a page that i comp'd using CSS and it has a dataset in it that i comped with one record.

When i come to add the dynamic content to the page the Dataset div does not flow down  it just prints on top of the last record. how sould i get around this?

CruiseSearchResultsBody is the main containner that will have all the records inside of it and CruiseSearchResultsBodyRecord is the containner for each record.

#SearchResultsBody{
      position:absolute;
      height:100px;
      width:585px;
      top:115px;
      Left:0px;
      background-color:red;

}
#SearchResultsBodyRecord{
      height:100px;
      width:585px;
      top:115px;
      Left:0px;
      border:1px solid #699ED0;
      background-color:#DAEBE9;
      Font-size:11px;
      }
LVL 1
willa666Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
A couple of CSS declarations with no context really does not tell us much at all.  We need to see the markup it is being applied to.  you need ot post the page code of a link, so we have some idea of whether you have made an error in how you coded it, or whether you are expecting th e wrong behaviour for your structures.

Cd&
COBOLdinosaurCommented:
I might venture a guees based on the scant information at this point that you are expecting the divs to expand in height as you add content.  That is not going to happen because you took the option to do it away from the browser by specifying height.

Cd&
willa666Author Commented:
Same code would be this

The datset code is working cos i can see all the data from the 4 reord layer one on top of another.


<div id="SearchResultsBody>
<div id="SearchResultsBodyRecord>
record1
</div>
<div id="SearchResultsBodyRecord>
record2
</div>
<div id="SearchResultsBodyRecord>
record3
</div>
<div id="SearchResultsBodyRecord>
record4
</div>
</div>
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

StormyWatersCommented:
You can't have multiple elements with the same id, change that to a class. Get rid of the position:absolute and let the elements flow instead.

Also, depending on how this is outputted, you might want a table rather than a bunch of divs. This looks like tabular data.
GoofyDawgCommented:
I see a couple of things that are wrong:
1) position:absolute - Why is this necessary? For now, let the container fall where it is. We can work in positioning later.
2) Your use of ids: ID's are intended to be unique identifiers. They'll still work, but you should use classes for your record divs to be semantically correct.
3) Also, in your ID declarations, you forgot to close the id names with a closing quote (though that my just be a typo in this message).

In any case, try this out:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <title>Untitled</title>
<style type="text/css">
#SearchResultsBody{
     position:absolute;
     width:585px;
     margin-top:115px;
     background-color:red;

}
.SearchResultsBodyRecord{
     border:1px solid #699ED0;
     height:100px;
     background-color:#DAEBE9;
     Font-size:11px;
     }
</style>
</head>
<body>
<div id="SearchResultsBody">
<div class="SearchResultsBodyRecord">
record1
</div>
<div class="SearchResultsBodyRecord">
record2
</div>
<div class="SearchResultsBodyRecord">
record3
</div>
<div class="SearchResultsBodyRecord">
record4
</div>
</div>
</body>
</html>

Is this what you want to achieve?

GoofyDawg
COBOLdinosaurCommented:
I think Stormy might be right about using table a data grid generally belongs in a table.

The Dawg picked up the missing quote which is probalby not causig the immediate problem but will certainly a factor, and they must be fixed.  

As using the same id for more than one element.  That guarantees failure.

As you have two of the better up and coming experts helping you I will leave it to them, but I'll be around if you need me.

Cd&
GoofyDawgCommented:
2 minutes! That was the phone call I had to take before posting my answer!

I was also going to add that it looks like you're trying to do a grid, so why not use the element that's devoted to it: The table. However, if this is a free-form dataset, then I can understand the use of divs.

GoofyDawg
willa666Author Commented:
Hi guys

Wow i am a dumb arse! LOL

I guess i am gonna have to do my homework on using classes.

I want to us DIv for the datagrid as they are smaller in size. would you guy advise againt this?

I now have the issuse sorted with the div sitting one under another but say i have two div inside each record

.SearchResultsBodyRecordName ( needs to sit top 20, left20)
.SearchResultsBodyRecordPrice ( needs to sit top 20,Left 300)

These item will be in each instence of .SearchResultsBodyRecord. How would you setup the CSS so that they are postionedcorrectly?
GoofyDawgCommented:
You might save yourself HTML, but the amount of tweaking you'll have to do with your classes will completely defeat the purpose. In any kind of development, if you find yourself having to code a lot in a specific area just to make something work, then it's a good bet that you're probably headed in the wrong direction. With respect to CSS, if you have to write a lot of CSS just achieve some effect, like table behavior, it's a good bet that you're using the wrong thing. Save yourself the headache. :)

GoofyDawg

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
StormyWatersCommented:
>>I want to us DIv for the datagrid as they are smaller in size.

I'm not sure what you mean by smaller in size. They might be marginally smaller with respect to filesize, but that doesn't really have an impact. I need to see the output to be sure, but I think tables would be best for this. Especially considering you're lining up divs inside the record now. Just use a table, since it IS for tabular data.

>>top 20, left 20
You're trying to be too pixel-perfect here. What if I have a large font size? What happens to your content then? It'll overflow or look wrong. Don't use position:absolute and you'll save yourself a ton of headaches. No, you can't force a font size on a user. :)
willa666Author Commented:
guys, what you say make perfect sence!

I wil go with a table for this part of the pagelet and will tell you how it goes.

thanks guys !

50/50 points split sound good to you?
GoofyDawgCommented:
Fine with me. Glad we could help!

Thanks!

GoofyDawg
willa666Author Commented:
Achally i have one more question

If i am using CSS to controll my header,footer and body.

How would you go about apply the follow style and then have ellement within these areas? so the header and footer stay the same height but the body is variable height

Header w750 h100
Body w750 height-min350
footer w750 h100

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.