[RESOLVED] CSS Mock Table

Kudose

'ello all.

I am trying to get this to display like it would in a table with the valign:top property set. The problem is that the third cell clears the second cell's text. Could someone assist me?

.listingsRow {
  position:relative;
  clear:both;
  height:84px;
  text-align:left;
  padding:5px 5px 5px 5px;
  margin:0px;
}

.listingsRowCellOne {
  float:left;
  width:110px;
}

.listingsRowCellTwo {
  margin:0 100px 0px 110px;
}

.listingsRowCellThree {
  float:right;
  clear:none;
  display:inline;
}

TIA!

scrupul0us

u have something online?

Kudose

PMed you the URL.

scrupul0us

now that i can see it tell me what doesnt belong where

Kudose

The price on the right clears the second columns text. :\

Ichiro

I hate to bother you but could you PM me a copy of the URL as well?

scrupul0us will probably have the answer for you but just in case,,,

bpat1434

I'll take the URL too if I can 😉

NogDog

Just an aside (and maybe of no concern, since we have no idea what the actual page content is): if what you are presenting is actually tabular data, there is absolutely nothing wrong with using a HTML table for it. In fact, that's what it's for -- the CSS-instead-of-tables issue is only a concern when tables are used for non-tabular data as a means to use HTML to control the visual presentation of the page.

Kudose

NogDog wrote:
if what you are presenting is actually tabular data, there is absolutely nothing wrong with using a HTML table for it. In fact, that's what it's for -- the CSS-instead-of-tables issue is only a concern when tables are used for non-tabular data as a means to use HTML to control the visual presentation of the page.

I ended up having to use a table.

I've found that sometimes tables are just better.

http://www.sdealer.com/current/inventory.php

bpat1434

One thing you might look into is using unordered lists with no list style. If you make the li elements have no margins, they'll mash up against eachother. Then, inside each li element you can define an image, and other information. Same thing with your navigation 😉

It's possible, but sometimes you have to think outside the table box. But glad you got it working anyway.

Weedpacket

bpat1434 wrote:
....Same thing with your navigation

Rule of thumb here is: if you're wanting to display a list of things, consider using a list to display them 😉

http://www.cssplay.co.uk/menus/flickerfree.html

NogDog

Weedpacket wrote:
Rule of thumb here is: if you're wanting to display a list of things, consider using a list to display them 😉

http://www.cssplay.co.uk/menus/flickerfree.html

And if you want to present a collection of data which logically breaks down into rows and columns (i.e., a 2-dim matrix), use a table.

As I don't know what the actual content is that was being dealt with in the original post, I'm just pointing out that HTML tables are not always wrong. But as Weed and I are both stating, it's best to use the HTML elements that best describe the meaning/context of what is being presented, then use CSS to control the visual aspect of those elements.

Kudose

Thanks.

🙂