Centering floating items

D

djcredo

I have a rollover list which needs to be centered. I cannot use
display:inline, because I must be able to ensure the width of each list
item is eactly 100px. Inline doesnt let you specify width, and if you
use margin-left and margin-right you can't be sure you are getting the
right size because the width will depend on the number of characters in
the list item.

So I want to use "float:left" with "display:block" items. Now I can
specify the width, but can't center the items! They all stack up on the
left hand side.

Does anyone have any solutions to this problem?

Many thanks,
Matt
 
E

Els

I have a rollover list which needs to be centered. I cannot use
display:inline, because I must be able to ensure the width of each list
item is eactly 100px. Inline doesnt let you specify width, and if you
use margin-left and margin-right you can't be sure you are getting the
right size because the width will depend on the number of characters in
the list item.

So I want to use "float:left" with "display:block" items. Now I can
specify the width, but can't center the items! They all stack up on the
left hand side.

Does anyone have any solutions to this problem?
Click to expand...

If you know the amount of items, their width (100px) and the margin
between them, put them in a container with a set width, which you then
center. What I don't understand though, is how you say "each list item
is exactly 100px", and "width will depend on the number of characters
in the list item". Seems like a contradiction.

There are ways to have blocks with set widths centered regardless of
their amount, but it does need a bit more tricky CSS. My guess is the
centered container approach will work for you though?
 
B

Ben C

I have a rollover list which needs to be centered. I cannot use
display:inline, because I must be able to ensure the width of each list
item is eactly 100px. Inline doesnt let you specify width, and if you
use margin-left and margin-right you can't be sure you are getting the
right size because the width will depend on the number of characters in
the list item.

So I want to use "float:left" with "display:block" items. Now I can
specify the width, but can't center the items! They all stack up on the
left hand side.
Click to expand...

Yes, you could say they all "float" to the left :)
Does anyone have any solutions to this problem?
Click to expand...

Don't use floats. You can give a float a left margin, but you will have
to work out how big to make it yourself to achieve centering (don't go
there). Absolute positioning is much better for this because the browser
will centre it for you if you set left and right margins to auto
(provided you also set left, right and width).

Here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
ul
{
position: absolute;
left: 0px;
right: 0px;
width: 100px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
li
{
list-style-type: none;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>apples</li>
<li>pears</li>
<li>oranges</li>
</ul>
</body>
</html>
 
N

Nico Schuyt

Ben said:
Don't use floats. You can give a float a left margin, but you will
have
to work out how big to make it yourself to achieve centering (don't go
there). Absolute positioning is much better for this because the
browser
will centre it for you if you set left and right margins to auto
(provided you also set left, right and width).
Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd"> <html>
<head>
<title>Test Page</title>
<style type="text/css">
ul
{
position: absolute;
left: 0px;
right: 0px;
width: 100px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
li
{
list-style-type: none;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>apples</li>
<li>pears</li>
<li>oranges</li>
</ul>
</body>
</html>
Click to expand...

In IE there´s a vertical list on the left
In FF the (vertical) list is centered on the page
 
B

Ben C

Ben C wrote: [snip]
ul
{
position: absolute;
left: 0px;
right: 0px;
width: 100px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
li
{
list-style-type: none;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>apples</li>
<li>pears</li>
<li>oranges</li>
</ul>
</body>
</html>
Click to expand...
Click to expand...
In IE there´s a vertical list on the left
Click to expand...

Oh dear...
In FF the (vertical) list is centered on the page
Click to expand...

Yes, that was intended (and I thought the effect you wanted?)
 
X

X l e c t r i c

I don't know why the absolute positioning is necessary.

This works for Explorer, Firefox, Netscape, and Opera:

http://www.xlectric.com/temp/centertest.html

And with that I don't know why I had to use float-right for #d4. I
thought the float-left for #d3 would be enough.

I used fixed/percent width and height values for the divisions because
they have no content.

Art
 
B

Ben C

I don't know why the absolute positioning is necessary.
Click to expand...

It was to get shrink-to-fit width on the <ul>. Your divs are nicely
centered, but you had to set widths on them. If they were width: auto,
they'd fill the whole containing width.
This works for Explorer, Firefox, Netscape, and Opera:

http://www.xlectric.com/temp/centertest.html

And with that I don't know why I had to use float-right for #d4. I
thought the float-left for #d3 would be enough.
Click to expand...

If you remove the float: right for #d4 what happens is #d3 floats left,
and then #d4 starts a new block box, below the anonymous block box
contanining #d3.

Floats that overflow the block box in which they originate appear on top
of subsequent block boxes (and their inline content has to flow around
them). This is explained in the CSS 2.1 spec in the section on floats and
also see the section on stacking levels which explains why #d3 is on top of
#d4 even though #d3 appears earlier in the document.

#d3 does overflow its own (anonymous) block box and so ends up on top of
#d4. #d4 is 400px px wide, #d3 only 200px, so you see half of #d4
sticking out from behind #d3.
 
B

Ben C

It was to get shrink-to-fit width on the <ul>. Your divs are nicely
centered, but you had to set widths on them. If they were width: auto,
they'd fill the whole containing width.
Click to expand...

No. You were right, the absolute positioning was not necessary.

I had:

position: absolute;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: 100px;

to centre a box with the width set to 100px. This works just as well:

margin-left: auto;
margin-right: auto;
width: 100px;

Easy, because the width is known to be 100px. No need for absolute
positioning. The OP said that the width was 100px, so that's fine.

But can we centre a shrink-to-fit box? I actually don't think it's
possible (without JS or a table).

Absolutely positioned boxes are shrink-to-fit if they have auto width,
but not if you try to centre them with auto margins. For example:

position: absolute;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;

will fill the full containing width, because the UA solves for width
such that left + width + right = containing width and leaves the margins
at 0.

The only condition under which a positioned box is centred is if left,
right and width are _all_ set to something, but left and right margins
are both auto. These are the CSS rules. There's no way to say we want
the shrink-to-fit width, and equal space either side.

The table solution is this:

<table style="width: 100%">
<td style="width: 50%">
</td>
<td style="border: 1px solid black">
Hello
</td>
<td style="width: 50%">
</td>
</table>

"Hello" is shrink-to-fit and centered.
 
X

X l e c t r i c

Ben C wrote:

"Absolutely positioned boxes are shrink-to-fit if they have auto width,
but not if you try to centre them with auto margins."

Yes, I've been trying out what you've posted and that is the result that
I get.

My question is this:

Is there a way to shrink-to-fit a block level box without using absolute
positioning ? You know, so the width of the box conforms to the width of
the content, like a table.

Art
 
B

Ben C

Ben C wrote:

"Absolutely positioned boxes are shrink-to-fit if they have auto width,
but not if you try to centre them with auto margins."

Yes, I've been trying out what you've posted and that is the result that
I get.
Click to expand...

And this is what the spec (CSS 2.1) says, in different words. It's in
section 10.6.4.
My question is this:

Is there a way to shrink-to-fit a block level box without using absolute
positioning ?
You know, so the width of the box conforms to the width of the
content, like a table.
Click to expand...

You can also use a float. You can't centre floats, but neither can you
centre shrink-to-fit abs pos.

You can also use display: inline-block, and you can centre those too
just by making the container "text-align: center". This would be
preferable to the table solution I posted earlier, except that FF
doesn't support display: inline-block. Opera and Konqueror do.

For the sake of completeness, the other ways to do it are display:
table, display: table-cell or position: fixed.
 
E

Ed Seedhouse

Is there a way to shrink-to-fit a block level box without using absolute
positioning ? You know, so the width of the box conforms to the width of
the content, like a table
Click to expand...

Yes. Floated elements shrink to fit.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Centering picture element for larger screen sizes 2
Having trouble centering contents of td ? 3
Working on mobile css menu with plenty of frustration! 2
Is it possible an iframe can overlapp another? 3
Image shifts to the right when export the page to pdf 4
When draggable=false & draggable=true dont work ? 1
Help with Visual Lightbox: Scripts 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

No members online now.
Total: 25 (members: 0, guests: 25)
Robots: 402

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,021
Latest member
AkilahJaim

Latest Threads

Top