Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Centering floating items

Reply
Thread Tools

Centering floating items

 
 
djcredo@gmail.com
Guest
Posts: n/a
 
      10-18-2006
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

 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      10-18-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

> 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?


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?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Elly & Rikkert - Het woord van onze God
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      10-18-2006
On 2006-10-18, (E-Mail Removed) <(E-Mail Removed)> wrote:
> 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.


Yes, you could say they all "float" to the left

> Does anyone have any solutions to this problem?


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>
 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      10-18-2006
Ben C wrote:
> 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>


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

--
Nico Schuyt
http://www.nicoschuyt.nl/


 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-18-2006
On 2006-10-18, Nico Schuyt <(E-Mail Removed)> wrote:
> 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>


> In IE there´s a vertical list on the left


Oh dear...

> In FF the (vertical) list is centered on the page


Yes, that was intended (and I thought the effect you wanted?)
 
Reply With Quote
 
X l e c t r i c
Guest
Posts: n/a
 
      10-18-2006
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

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-19-2006
On 2006-10-18, X l e c t r i c <(E-Mail Removed)> wrote:
> I don't know why the absolute positioning is necessary.


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.


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.
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-19-2006
On 2006-10-19, Ben C <(E-Mail Removed)> wrote:
> On 2006-10-18, X l e c t r i c <(E-Mail Removed)> wrote:
>> I don't know why the absolute positioning is necessary.

>
> 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.


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.
 
Reply With Quote
 
X l e c t r i c
Guest
Posts: n/a
 
      10-20-2006
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

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-20-2006
On 2006-10-20, X l e c t r i c <(E-Mail Removed)> wrote:
> 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.


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.


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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering left-floated items - how? Please help! rudicheow@gmail.com HTML 2 12-05-2006 07:06 PM
floating point problem... floating indeed :( teeshift Ruby 2 12-01-2006 01:16 AM
DVD Verdict reviews: A STORY OF FLOATING WEEDS / FLOATING WEEDS: CRITERION COLLECTION and more! DVD Verdict DVD Video 0 04-20-2004 09:04 AM
Items in Outbox not moving to Sent Items Ben Lord Computer Support 0 10-23-2003 08:47 AM
grouping items among a list according to items subtag value Gilles Kuhn XML 0 09-15-2003 12:01 PM



Advertisments