CSS2 - Centering block boxes

C

Chris Beall

Example at http://pages.prodigy.net/chris_beall/Demo/testcase.html.
Note that the images are against the left margin of the outer <div>. My
objective is to CENTER the two images and their titles on the screen
(assuming there is enough width for both of them; if not, then center
each image and its title, stacking the two images vertically.)

How can this be done?

Chris Beall
 
B

brucie

Example at http://pages.prodigy.net/chris_beall/Demo/testcase.html.
Note that the images are against the left margin of the outer <div>. My
objective is to CENTER the two images and their titles on the screen
(assuming there is enough width for both of them; if not, then center
each image and its title, stacking the two images vertically.)

<style type="text/css">
#container1,#container2{width:49%;min-width:130px;text-align:center;float:left;}
#container2{float:right;}
#one,#two{width:128px;}
#one{float:right;}
#two{float:left;}
</style>

<div id="container1">
<div id="one"><img src="ny.jpg" width="128" height="104" alt=""><br>one</div>
</div>

<div id="container2">
<div id="two"><img src="ny.jpg" width="128" height="104" alt=""><br>two</div>
</div>
 
C

Chris Beall

brucie said:
<style type="text/css">
#container1,#container2{width:49%;min-width:130px;text-align:center;floa
t:left;}
#container2{float:right;}
#one,#two{width:128px;}
#one{float:right;}
#two{float:left;}
</style>

<div id="container1">
<div id="one"><img src="ny.jpg" width="128" height="104"
alt=""> said:
</div>

<div id="container2">
<div id="two"><img src="ny.jpg" width="128" height="104"
alt=""> said:
brucie,

OK, that works. Thanks. Three questions (and a challenge):
Why specify min-width? Seems to work without it.
Why 49% instead of 50%, which seems to work and gets rid of the boundary
between the images?
Why is #one,#two{width:128px;} needed, with width specified on the img
tag? Seems to work without it. In fact, seems to still work without
that AND without explicit width and height specified, which allows
swapping the image without changing the source.

Now can it be done with 3 (or more) block boxes on the same row?

Thanks again,
Chris Beall
 
B

brucie

Why specify min-width? Seems to work without it.

not in opera or mozilla
Why 49% instead of 50%,

just a bit of a margin between images
Why is #one,#two{width:128px;} needed, with width specified on the img
tag?

a width must be specified when floating elements.
Now can it be done with 3 (or more) block boxes on the same row?

<style type="text/css">
#container{max-width:384px;margin:auto;}
#container div{width:128px;float:left;text-align:center;}
</style>
<div id="container">
<div><img src="ny.jpg" width="128" height="104" alt=""><br>one</div>
<div><img src="ny.jpg" width="128" height="104" alt=""><br>two</div>
<div><img src="ny.jpg" width="128" height="104" alt=""><br>three</div>
</div>

not supported by IE
 
C

Chris Beall

brucie said:
#container1,#container2{width:49%;min-width:130px;text-align:center;floa
t:left;}


not in opera or mozilla


just a bit of a margin between images


a width must be specified when floating elements.


<style type="text/css">
#container{max-width:384px;margin:auto;}
#container div{width:128px;float:left;text-align:center;}
</style>
<div id="container">
<div><img src="ny.jpg" width="128" height="104" alt=""><br>one</div>
<div><img src="ny.jpg" width="128" height="104" alt=""><br>two</div>
<div><img src="ny.jpg" width="128" height="104" alt=""><br>three</div>
</div>

not supported by IE
brucie,

OK, I think I see it now. margin: auto on the container does it.

In the CSS2 specification, for block-level elements in the normal flow,
sections 10.3.3 & 4, I missed the last line, "If both 'margin-left' and
'margin-right' are 'auto', their computed values are equal." Equal
margins thus results in centering.

I assume 'not supported by IE' means 'IE is not yet a CSS2 conforming
user agent'. Pity.

Thanks for the guidance,
Chris Beall
 
L

Lauri Raittila

I assume 'not supported by IE' means 'IE is not yet a CSS2 conforming
user agent'. Pity.

That aplies to all browsers. In Opera 6 and 7, your problem is simple to
solve, as they support most CSS2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Test case </title>
<style type="text/css">
body {text-align:center}
div {display:inline-table;}
</style>
<div><img src="ny.jpg" alt=""><br>First block</div>
<div><img src="ny.jpg" alt=""><br>Second block</div>
 
C

Chris Beall

Headless said:
No UA is a "conforming UA" for the entire CSS2 spec, a UA can said to be
"conforming" on individual parts of the spec only.

That's not the way I read
http://www.w3.org/TR/REC-CSS2/conform.html#conformance. Especially the
part that says "A user agent that renders a document with associated
style sheets MUST respect points 1 - 5 AND render the document according
to the media-specific requirements set forth in this specification."
Nothing there about subsets or partial conformance (except the loophole
about supporting only one media type; they could support Print media
only, for example). The IE folks can SAY anything they like, but it
appears to me that IE does not conform as defined by the W3 folks.
And I'm sure they both care deeply about my interpretation... :)
No browser supports all (relevant) bits of CSS2, and all browsers have
CSS bugs. It's just that IE is the undisputed king in the bug and "not
supported" department.

No doubt. I would take the position that a function that is buggy is
certainly no better than one that is absent. And thus non-conforming.

Chris Beall
 
C

Chris Beall

brucie said:
IE doesn't support max-width so the container <div> is the default
100% width. the images are floated to the left so they appear on the
left margin. you could use width:384px; but then the images wouldn't
reflow to the windows width.

And I do want reflow. In fact, I started by using your technique of
creating centering by filling the horizontal space and thus constraining
the browser, but with percentage widths (width = 33% for each of three
items in a row). I just couldn't believe that was what the CSS
designers intended as the way to center things. Apparently it wasn't,
but the other methods aren't yet widely supported. Oh, well.

Thanks,
Chris Beall
 
J

Joel Shepherd

Chris said:
No doubt. I would take the position that a function that is buggy
is certainly no better than one that is absent.

I'd word it more strongly than that. In a properly written page, much
less harm will result from some or all of the CSS being ignored, than
by some/all of it being handled buggily by a particular agent.
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top