div, table, width, center ?

Hello everybody

I have a question about CSS of course.

Fisrt of all, I drew a little picture to explain what i would like to do.



In red: a div. I would like to center it on the page (horizontally)

In purple: Another div inside the first one. I would like that it take all width of the first div automatically.

In blue: A table with a random width (because the width is variable with the text in the cell)


What I would like:

I would like that my first div (the red one) take the same width than my table.
I've already try to add a style like this: "width:1px" in the first div. It's ok for the first one, it has the same size as my table but the second div (the purple one) is only 1px

So I've replaced my width:1px by a float:left. It's better but the first div (and it's child) are not center anymore (of course because it's a LEFT float.)
I need a float: center but it dosen't exist.


Thx a lot!

Atlas

 

Since you are using a table to set your body width, why don't you simply move your child div in your table and align it center?

 

See this thread - 7061

 

In fact, I don't want to do it because I want use the THEAD, TBODY and TFOOT tags in my table, in order to be able to scroll it without the header and the footer (a similar stuff to that: http://www.imaputz.com/cssStuff/bigFourVersion.html"]http://www.imaputz.com/cssStuff/bigFourVersion.html
(sorry, i can't add hyperlink linkable yet on this forum)

So i just want to have ONE "header" row in my table.
Thx Dji-man.

And thx you J.D. for the thread, but I can't find the solution inside.

 

It does describe how to center a block-level element isn't this what you are looking for?

 

Yes, but not just that

In your example, the first div have a static width and mine not.
I would like that my div grow up or shrink like the table that's inside the div.

I know that I can put a width of 1px for the div and if the table will be larger (100px for exemple), the div will have the same size too.
But the problem is the second div (the purple one). Cause this one won't have the 100px but just 1px (like the first div)

So that's my problem

 

It's just an example. Make width in %'s and it will do what you need. The rule is that if any block-level element is shorter than the containing element's width anf its margin-left and margin-right are set to auto, it should be centered.

J.D.

 

Ok, so here's what I understand:

<div style="border: 3px solid red; width:20%; margin:auto;">

<div style="border: 5px solid purple; width:100%; margin:auto;">2nd div</div>

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>0000</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>444444444444</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>11111</td>
    <td>&nbsp;</td>
    <td>33333</td>
    <td>&nbsp;</td>
  </tr>

</table>

</div>

Code (markup):

demo here: http://back2web.com/css.html

 

So i guess that it's impossible ?

 

Lack of a reply doesn't mean it's impossible Look at your test in IE and FF to see the diffeernce between how these two handle div's. IE will expand the div with width or height set to a non-auto value and FF will overflow it. On top of that IE and FF treat borders differently. Tables never overflow. So, a quick solution is to use tables for what you need. You can also experiment with setting margin-left/right to, say 20% and see if this will help you (the outer div will still overflow, though, when the width is too small).

J.D.

 

Thx a lot, i will try that