Home » How to use css to style xhtml markup made only of divs like a table [closed]

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


“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 {
padding:2px 0;
background: red;
.ConferencesPdfContainer {
background: yellow;
.ConferencesExtLinkContainer {
margin-left: -20%;
margin-right: 20%;
background: lime;
.ConferencesHtmlContainer {
float: right;
margin-left: 20%;
margin-right: -20%;
background: pink;

alt text
(source: pakosz.fr)

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.

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 {
border-bottom:1px solid;
#ConferencesasiaTitleContainer, #ConferencesaustraliaTitleContainer {

Related Solutions

AddTransient, AddScoped and AddSingleton Services Differences

TL;DR Transient objects are always different; a new instance is provided to every controller and every service. Scoped objects are the same within a request, but different across different requests. Singleton objects are the same for every object and every...

How to download package not install it with apt-get command?

Use --download-only: sudo apt-get install --download-only pppoe This will download pppoe and any dependencies you need, and place them in /var/cache/apt/archives. That way a subsequent apt-get install pppoe will be able to complete without any extra downloads....

What defines the maximum size for a command single argument?

Answers Definitely not a bug. The parameter which defines the maximum size for one argument is MAX_ARG_STRLEN. There is no documentation for this parameter other than the comments in binfmts.h: /* * These are the maximum length and maximum number of strings...

Bulk rename, change prefix

I'd say the simplest it to just use the rename command which is common on many Linux distributions. There are two common versions of this command so check its man page to find which one you have: ## rename from Perl (common in Debian systems -- Ubuntu, Mint,...

Output from ls has newlines but displays on a single line. Why?

When you pipe the output, ls acts differently. This fact is hidden away in the info documentation: If standard output is a terminal, the output is in columns (sorted vertically) and control characters are output as question marks; otherwise, the output is...

mv: Move file only if destination does not exist

mv -vn file1 file2. This command will do what you want. You can skip -v if you want. -v makes it verbose - mv will tell you that it moved file if it moves it(useful, since there is possibility that file will not be moved) -n moves only if file2 does not exist....

Is it possible to store and query JSON in SQLite?

SQLite 3.9 introduced a new extension (JSON1) that allows you to easily work with JSON data . Also, it introduced support for indexes on expressions, which (in my understanding) should allow you to define indexes on your JSON data as well. PostgreSQL has some...

Combining tail && journalctl

You could use: journalctl -u service-name -f -f, --follow Show only the most recent journal entries, and continuously print new entries as they are appended to the journal. Here I've added "service-name" to distinguish this answer from others; you substitute...

how can shellshock be exploited over SSH?

One example where this can be exploited is on servers with an authorized_keys forced command. When adding an entry to ~/.ssh/authorized_keys, you can prefix the line with command="foo" to force foo to be run any time that ssh public key is used. With this...

Why doesn’t the tilde (~) expand inside double quotes?

The reason, because inside double quotes, tilde ~ has no special meaning, it's treated as literal. POSIX defines Double-Quotes as: Enclosing characters in double-quotes ( "" ) shall preserve the literal value of all characters within the double-quotes, with the...

What is GNU Info for?

GNU Info was designed to offer documentation that was comprehensive, hyperlinked, and possible to output to multiple formats. Man pages were available, and they were great at providing printed output. However, they were designed such that each man page had a...

Set systemd service to execute after fstab mount

a CIFS network location is mounted via /etc/fstab to /mnt/ on boot-up. No, it is not. Get this right, and the rest falls into place naturally. The mount is handled by a (generated) systemd mount unit that will be named something like mnt-wibble.mount. You can...

Merge two video clips into one, placing them next to each other

To be honest, using the accepted answer resulted in a lot of dropped frames for me. However, using the hstack filter_complex produced perfectly fluid output: ffmpeg -i left.mp4 -i right.mp4 -filter_complex hstack output.mp4 ffmpeg -i input1.mp4 -i input2.mp4...

How portable are /dev/stdin, /dev/stdout and /dev/stderr?

It's been available on Linux back into its prehistory. It is not POSIX, although many actual shells (including AT&T ksh and bash) will simulate it if it's not present in the OS; note that this simulation only works at the shell level (i.e. redirection or...

How can I increase the number of inodes in an ext4 filesystem?

It seems that you have a lot more files than normal expectation. I don't know whether there is a solution to change the inode table size dynamically. I'm afraid that you need to back-up your data, and create new filesystem, and restore your data. To create new...

Why doesn’t cp have a progress bar like wget?

The tradition in unix tools is to display messages only if something goes wrong. I think this is both for design and practical reasons. The design is intended to make it obvious when something goes wrong: you get an error message, and it's not drowned in...

OpenSSH: How to end a match block

To end up a match block with openssh 6.5p1 or above, use the line: Match all Here is a piece of code, taken from my /etc/ssh/sshd_config file: # Change to no to disable tunnelled clear text passwords PasswordAuthentication no Match host