473,545 Members | 2,697 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

centering float left

I have a series of blocks that are float left that I need centered on
the page.

<div class="center" align="center">

<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

..center{margin : auto}
..center{text-align: center}

How do I center the class center div?

I'm not a big fan of centering stuff but I'm just a programmer, not a
designer.

Jeff
Jul 20 '05 #1
11 34431
Els
Jeff Thies wrote:
I have a series of blocks that are float left that I need centered on
the page.

<div class="center" align="center">

<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

.center{margin: auto}
.center{text-align: center}

How do I center the class center div?


You need to specify a width on that center div :-)
IIRC (anyone, please correct me if I'm wrong) the
text-align: center is needed for IE5, while the margin:auto
is there for the newer browsers.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #2
On Sat, 13 Sep 2003 13:13:28 +0200, Els
<el*********@PL EASEtiscali.nl. invalid> wrote:
Jeff Thies wrote:
I have a series of blocks that are float left that I need centered on
the page.

<div class="center" align="center">

<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

.center{margin: auto}
.center{text-align: center}

How do I center the class center div?


You need to specify a width on that center div :-)
IIRC (anyone, please correct me if I'm wrong) the
text-align: center is needed for IE5, while the margin:auto
is there for the newer browsers.


IMO the easist thing is to do with the outer <div> is to center it by
explicitly setting the widths of the left and right margins, eg:

..center
{
margin-left: 10%;
margin-right: 10%;
}

and that should work even with IE5 as well (heck, it even works in NS4
if you don't try to get too fancy).

Nick

--
Nick Theodorakis
ni************* *****@urmc.roch ester.edu
Jul 20 '05 #3
Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.


text-align: center when applied to a block will center all elements
contained in the block e.g. to center an img wrap it in a div and apply
text-align: center to the div.

http://www.w3.org/TR/CSS1#text-align

margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting

--Nikolaos

Jul 20 '05 #4
On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.

You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate
the text-centering effect inside of whatever block element it is that
you're centering, otherwise all your content would get centered.

For more detailed discussion I'd suggest
http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS

Google also found this treatise on the topic:
http://theodorakis.net/blockcenter.html

[...] margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting


In theory, yes, but that only works on conforming WWW browsers.

Jul 20 '05 #5
Alan J. Flavell wrote:
On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
Els wrote:
IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.


You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate


You mean Els is....

In re-reading Els reply I realize that he made the above statement in
the context of the *DIV* tag and more specifically as a an IE5 work
around *only*.

That [his remark was solely for DIV's] isn't totally clear from his
statement and that is why I replied - as there is a distinction based on
what the author is trying to center.

--Nikolaos

Jul 20 '05 #6
Els
Alan J. Flavell wrote:
On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:

Els wrote:
IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.
You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate
the text-centering effect inside of whatever block element it is that
you're centering, otherwise all your content would get centered.
I knew it was a bug, but didn't realise the workaround was
relying on yet another bug :-(
The text-centering effect inside does bug me sometimes, but
I manage to make a construction of divs to help
left-aligning parts of the content.
For more detailed discussion I'd suggest
http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS

Google also found this treatise on the topic:
http://theodorakis.net/blockcenter.html


Thanks, I bookmarked those pages. I do manage to get my
pages the way I want in most browsers, including IE5.5 and
IE for Mac, but I should study this stuff some more to not
spend so much time working it out every time again :-)
margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting


In theory, yes, but that only works on conforming WWW browsers.


--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #7
Els
Nikolaos Giannopoulos wrote:
In re-reading Els reply I realize that he made .....

That [his remark ..... his statement .....


I'm not a 'he'.... ;-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #8
Nikolaos Giannopoulos wrote:

text-align: center when applied to a block will center all elements
contained in the block e.g. to center an img wrap it in a div and
apply text-align: center to the div.


Just so that the op is clear:

text-align: center when applied to a block level element will center
all elements contained in it *in MSIE/Win only*[1]. In conforming
browsers, text-align: center will center only inline content in a block.

div {text-align: center; border: thin solid black }
p {border: thin solid green }
p.narrow {width: 12em; border: thin solid blue }

<div>

this text is centered within the div

<p>
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>

<p class="narrow">
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>

</div>

[1]I don't have MSIE 6, and am not sure about its behavior. I think
in standards mode, it behaves like Mozilla and Opera on this matter,
but in quirks mode it emulates the bugs of MSIE 5.x/Win. Also, there
are other older browsers that may also suffer from this bug.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #9
On Sat, Sep 13, Els inscribed on the eternal scroll:
I knew it was a bug, but didn't realise the workaround was
relying on yet another bug :-(


It's OK, I would do the same myself ;-)

I sure wouldn't rely on a bug to get some effect I wanted, but I'm
quite happy to exploit a bug which compensates for some other bug, as
long as it does no harm for conforming browsers (..and other user
agents, I should say).

Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
15031
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width: 100 px;float: left">thumbnail 2</div> <div style="width: 100 px;float: left">thumbnail 3</div> </div>
3
7345
by: Jonah Bishop | last post by:
I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no tables). My website consists of a few, simple parts: a "container" DIV which is centered and 750 pixels wide, a "sidebar" DIV which can be found along...
18
4182
by: Heath | last post by:
Is it proper to center images in a <div> by using the text-align: center property? Or is there a better way?
15
13481
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side with float. But I can't center two side by side divs. If I float them and give them auto margins, the auto margins are ignored. If I wrap the...
5
2371
by: david hepworth | last post by:
I am in the process of creating a CSS tab style thing for my webpage. I have everything as i wish except that i cannot center the damn thing in the page. I am hoping someone out there can help. I am sure that it is a silly mistake but i have been staring at it for so long i am going stir-crazy! I have tried 'text-align: center;' in most...
2
1781
by: stevieg | last post by:
I know this has been dealt with in previous posts, but i am having a problem with centering the following layout. Can anybody spot where I am going wrong? Thanks! body { text-align:center; margin-left:auto; margin-right:auto; font-color:#ffffff; } #wrapper
2
3029
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated and the number of them can vary greatly. They are all contained within a parent table cell, which is centred on the page. But I am unable to find a...
16
4918
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of "background" or "background-image", the positioning only works with specifying pixels. If I specify the vertical position in pixels, the image gets cut-off...
14
2513
by: issentia | last post by:
I'm working on this site: http://www.essenceofsoy.com/redesign/index2.html and I'm having a few problems with getting the layout exactly right. 1) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is below the word. This happens in both Firefox and IE6. 2) In Firefox, the pink quote banner and...
1
2273
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span rows are centering their data. however, the row with three columns, each with images (myimages1-3) are not centering with the rest of the table. ...
0
7502
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7692
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7457
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7791
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5360
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5078
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3491
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1921
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1045
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.