centering two columns when width is unknown

[bryndyment]

Hi,

This is an easily-DESCRIBED problem, but I don't think there's a solution, short of using "display:inline-block" in CSS2.1.

The problem:

I have two (or more) columns (each a DIV), but I don't know the width of either column. I want them centered horizontally.

That's it! Easy, right? I don't think so...

[BlobFisk]

Hey bryndyment,

Are you using % widths for your <div>s?

[bryndyment]

No, no width specification at all. My column DIVs look like this:

<div style="float: left; text-align: left;"> 
 <ul> 
 <li>ABCABCABC</li> 
 <li>DEDEDE</li> 
 <li>FGHIFGHIFGHI</li> 
 </ul> 
</div> 

[SuzyUK]

can you wrap the columns in a div and center the wrapper?

Suzy

[bryndyment]

I know two ways to center a DIV: absolute positioning, and setting both 'margin-left' and 'margin-right' to 'auto'. However, both these techniques require that I know the width of the DIV I'm trying to center.

[Jammer]

why not use
width:50%;

[mipapage]

bryndyment (or anyone else),

How are the browsers supposed to interpret the width's of these elements (your div's)?

I could be missing something here, but I'm sure the CSS specs say that you have to set a width on floated div's, otherwise bad things happen - and I'm fairly (call it 65%) sure that both Opera 7 and IE mac5 will give un-width-specified-floats 100% width (=auto I believe).

---

can anyone else confirm this?

---

At any rate, jammers answer would work, no? And if you don't want your div's to occupy 100% of the viewport, wrap them in another div of appropriate size..

[SuzyUK]

yes mipapage that sounds right..

I wasn't thinking in my quick answer before because a wrapper would still need a width specified otherwise it will take up 100% page width..

but something needs to have a width specified..

50% would work but bryndyment states he/she may have more than two columns so I take it that is the problem

perhaps bryndyment you could explain a little of what you're trying to achieve and why you don't know the width of the divs? or are you just letting them take their widths from the lists?

I had to do a two column list of links and decided they were better off in table so the lists wouldn't wrap.. a list of links is tabular data...and a table may be the easiest solution here.

Anyhow more explanation may find a solution..

Suzy

[BlobFisk]

I think that the problem here is as mypapage pointed out, that by not specifying widths browsers will automatically use 100%.

Centering your <div>s together is not a problem - wrap them, as Suzy suggested, in another div, and specify text-align:center.

You can set the div's dispay to inline, but I really think that you will have to bite the bullet and specify a width for your columns.

[bryndyment]

Thanks for all the comments. Additional notes:

1. mipapage mentions that width needs to be specified for floats. I checked the CSS spec, and this is correct. So, right off, this throws a spanner in the works. Thanks for pointing this out.

2. mipapage also wonders how the browser is supposed to know the width, if it isn't specified. I assumed that it was using a shrinkwrap-style algorithm (as indeed it is in IE6). Although the CSS spec indicates that 'width' is required for floats, it doesn't indicate what should happen if it's left out. In IE6's case, it shrinkwraps.

3. (re: shrinkwrapping). In CSS21, shrinkwrapping is now supported for absolutely-positioned DIVS, although still not for floats.

4. jammer suggests using width 50%. If my content's actual width is less than this, it won't be centered. So, unless I'm missing something, this won't work for me.

5. SuzyUK asks what I'm "really" trying to do. Good question! Well, it's much like the sample code I posted. I'm displaying list data, but the data is coming from a database, and I don't know the range of sizes. I don't want the list data to wrap, and I don't want to "guess" the maximum width. I want the centering to be exact.

6. SuzyUK mentions that a list (of links, in her case) is tabular data. Technically, this isn't correct. Tabular data implies a relationship between adjacent cells (check the CSS spec: "Tables represent relationships between data"). In effect, tables are for two-dimensional data, wheras a list (even if you want it displayed in columnar fashion) is one-dimensional.

7. BlobFisk mentions wrapping my columns in a DIV wrapper, and using text-align: center. Whereas this will work in IE, it's actually a bug. text-align should only affect how inline content is aligned, not block-level content.

It looks like the only way I can solve this is by taking a close look at my data, and hardcoding a value that represents the maximum width, plus a little for error.

However, there is a very elegant solution in CSS21 (and it works already in IE5.5+). It involves a new 'display' property value: 'inline-div'. This allows a SPAN (for example) to contain DIV elements, but still display inline. This is going to be very useful. Below is an elegant solution to my problem using this new value (alas, the standard is ahead of most browsers, which is why I was searching for another solution):

<style> 
 span { display: inline-block; text-align: left; } 
</style> 
<body style="text-align: center;"> 
 <span> 
  <ul> 
   <li>ABCABCABC 
   <li>DEDEDE 
   <li>FGHIFGHIFGHI 
 </span> 
 <span> 
  <ul> 
   <li>JKJKJK 
   <li>LMNOLMNOLMNO 
   <li>PQRPQRPQR 
 </span> 
</body> 

Note that we have multiple, adjacent, centered, shrinkwrapped columns (with the columns containing block-style data... in this case, <UL>), displayed inline.

[clasbya]

I understand the centering of DIV's to an extent.

I have three colums, the outside two I have set a certain distance from the edge, though I want the middle centered. I figured how to do this, but I also have to count in the fact not everyone uses the same resolution and monitor sizes. So if I center it on the norm which I believe is 1024x768 anymore, it is fine. Though if I set my resolution on my computer to my typical settings which is 1280x1024 the center div is moved off to the left, since I am using a margin statement in my div#main.

I am posting the div settings for all three so you can get a clearer picture of what I have.

div#links{
position: absolute;
left: 10px;
top: 100px;
width: 115px;
border: 1px;
border-style: dashed;}

div#nfo{
position: absolute;
right: 10px;
top: 100px;
width: 115px;
border: 1px;
border-style: dashed;
}

div#main{
position: absolute;
left: 20%;
top: 100px;
width: 600;
height: 700px;
border: 1px;
border-style: dashed;
}

Can I use a float in there to help alleviate this problem? Sorry that I do not have an example online. The server is having an issue, but when it comes back online I will upload the data to clasbylife.com/beta

[SuzyUK]

clasbya - Welcome To Webamsterworld [webmasterworld.com]

for your main div, rather than position it absolutely.. you could just let it fill the screen width but give it left and right margins so it "clears" your left/right columns...

Suzy

[clasbya]

I wish I would have thought of that. LoL That is why I brought the question here for sure, nice to get help from another set of eyes. :-) I am going to try that to see how it works compared to what I have done.

I ended up taking out the width setting and put it left and right set to 15%, so this will make it auto adjust per res setting.

#main{
position: absolute;
left: 15%;
right: 15%;
top: 100px;
height: 700px;
border: 1px;
border-style: dashed;
padding: 0 5px 0 5px;
}

Granted, this will change the width of the #main, whether or not this will fubar the contents of #main I will find out.

Thank you for your suggestion and I will definitely try it out.

Thank you in advance,
Aaron