How to use css to style xhtml markup made only of divs like a table

Question

See source code of this http://jsbin.com/iveso I can't change anything in xhtml code.

And i need cross browser output exact like this.

How we can give same look with less and optimize css

This is CSS

#ConferencesContainer {
overflow:hidden;
}
#ConferencesContainer img {
float:left;
padding:0 10px 10px 0;
}
#ConferencesContainer #ConferencesItemsContainer img {
float:none;
padding:0;
}
#ConferencesHeaderContainer {
font-size:1.1em;
font-weight:bold;
margin:10px 0;
overflow:hidden;
}
#ConferencesTitleHeaderContainer {
float:left;
width:40%;
}
#ConferencesPDFHeaderContainer {
float:left;
text-align:center;
width:20%;
}
#ConferencesExternalLinkHeaderContainer {
float:left;
text-align:center;
width:20%;
}
#ConferencesHtmlHeaderContainer {
float:left;
text-align:center;
width:20%;
}
.Conferencesnorth-america-2009ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
.Conferencesaustralia-and-asia-2008ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
.Conferencesinvestor-conference-2008ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
#ConferencesContainer .ConferencesTitleContainer {
float:left;
padding:2px 0;
width:40%;
}
#ConferencesContainer .ConferencesPdfContainer {
float:left;
left:40%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesContainer .ConferencesExtLinkContainer {
float:left;
left:60%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesContainer .ConferencesHtmlContainer {
float:left;
left:80%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesAcrobatWarningContainer {
float:left;
padding-top:20px;
}
.Conferencesaustralia-and-asia-2008ItemContainer #ConferencesasiaTitleContainer {
font-weight:bold;
}
.Conferencesaustralia-and-asia-2008ItemContainer #ConferencesaustraliaTitleContainer {
font-weight:bold;}

Edit:

I found links which are useful for me

1. http://snook.ca/archives/html%5Fand%5Fcss/getting%5Fyour%5Fdi

2. http://www.dev-archive.net/articles/table-in-css.html

Answer 1

Hi ,

I think, you have to play with a bit . Furthermore, you definitely need some images and a lot of patience with the xhtml code and especially the great id & class names.

Here is something that can get you started:

.ConferencesTitleContainer, .ConferencesPdfContainer, .ConferencesExtLinkContainer, .ConferencesHtmlContainer, .ConferencesTitleHeaderContainer, .ConferencesPDFHeaderContainer, .ConferencesExternalLinkHeaderContainer, .ConferencesHtmlHeaderContainer {
float:left;
width:24%;
border-bottom:1px solid;
}
#ConferencesasiaTitleContainer, #ConferencesaustraliaTitleContainer {
width:96%;
font-weight:bold;
}

Answer 2

"Give a man a fish, and you feed him for a day, teach him to fish, and you feed him for a lifetime"

Ok here we go. If started by installing Firefox so that I can use the Firebug extension.

So you apparently have no control over the the markup which is only made of divs. So far so good.

I changed a fragment of your css by removing #ConferencesContainer as Firebug obviously shows you that there is no div with the id ConferencesContainer in your markup anyway... Which explains why #ConferencesContainer .ConferencesTitleContainer { and alike select nothing.

Then I removed the absolute positioning because as far as I can recall, this is something that doesn't play nice with IE. By the way, having float: left is useless if you then use position: absolute

To accommodate the fact that sometimes there is no pdf download link (hence no div in the markup), I made agenda item and pdf link divs float to the left. And I made biography and webcast divs float to the right and tricked the margins to switch the divs back to their intended position. Tricking the margins was necessary as the webcast div comes first in the markup (in respect to the biography div).

Of course, if you apply the stylesheet I'm giving you to a slightly different markup with "holes", that is to say missing divs because there is no corresponding link to output then it might not work.

In any case, I believe you now have enough to experiment with on your own, good luck.

.ConferencesTitleContainer {
float:left;
padding:2px 0;
width:40%;
background: red;
}
.ConferencesPdfContainer {
float:left;
text-align:center;
width:20%;
background: yellow;
}
.ConferencesExtLinkContainer {
float:right;
margin-left: -20%;
margin-right: 20%;
text-align:center;
width:20%;
background: lime;
}
.ConferencesHtmlContainer {
float: right;
margin-left: 20%;
margin-right: -20%;
text-align:center;
width:20%;
background: pink;
}

See it in action.

And, you might want to read Top 10 CSS Table Designs or 10 CSS Table Examples for pretty styling.

PS: the coder colors are here to help visualizing divs.