How to center something in CSS and fill the sides with blocks?

Factual Questions
1

I am trying to divide a block into three side-by-side sections. The middle one is with a certain width and the rest should fill whatever space is left.

I am failing. I can center it, but I cannot figure out how to get the two sides to fill the remaining space. I get a zero-sized block if I set it to auto/blank.

What am I missing here?

2

Is it completely necessary to use CSS in this instance, for this element?

A 3-column table would work perfectly for you.

We had a similar question a while back and I remember working on it for a while…it was hard to get divs to display dynamically like that.

Another thing you could do would be to make a div that’s 100% with your “block” color in it and put a div centered inside of it at your specified width with another color as it’s background.

3

Well, CSS is supposed to be for layout and styling, so yeah - if I am going to use it, I want to use it for everything. But I guess if there is no way around this, I’ll trash CSS and use plain old HTML tables for layout everywhere. I hate mixing stuff.

I can’t do the centering-thing since the sideblocks also have content and sub-blocks and such.

Sigh. I don’t think CSS is that great, after all…

4

There are many way to do it in CSS. This site has just one method. He uses one set of HTML code to create 40 variations. The variations are all done with CSS. —> http://blog.html.it/layoutgala/

5

Cool variations, this could be useful. However, none of them is what I need (center fixed, sides liquid).

6

This is as good as I’ve gotten so far:



<html><head><title>CSS TEST</title></head>
<body>
<center>
<div style="height:100%;position:relative;background-color:#FF0000;width:50%;">
<div style="height:100%;margin-left:-50%;position:absolute;right:100%;float:left;background-color:#00FF00;">This is the left div.  Stuff goes here.  Blah blah blah.</div>
<div style="height:100%;margin-right:-50%;position:absolute;left:100%;float:right;background-color:#0000FF;">This is the right div.  More stuff goes here.  Blah blah blah.  Blah blah blah blah blah blah blah blah blah blah blah blah.</div>
This is the main content area.  Blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah.<br/><br/></div>
</center>
</body>
</html>

(Obviously the garish colors are for purposes of demonstration only.)

I’ve tested it in Firefox 1.5, IE 6, and Opera 8.54. It looks decent in Opera and Firefox, but IE squishes the side DIVs. Anyway, it’s an hour past my bedtime so this is as much time as I’m wiling to put into this right now. :slight_smile: I hope it helps at least a little.