CSS float and center align
I'm having trouble with divs and alignment.
I have 2 divs, the outer one is centered on the page as I assigned a width. I would have liked not to assign a width but I think that's the only way to center something on the page with auto margins - to asign a width.
The inner div houses the nav menu, I can't assign a width to that div as the menu can change length depending on criteria. If user is logged in there are different menu options to if they are not logged in.
is there any way to center a div without using a width?
A possible solution is min-width but I have read that it's not 100% cross browser compatible (IE)
pr0gr4mm3r posted this at 15:38 — 27th August 2008.
He has: 1,502 posts
Joined: Sep 2006
A div will fill the largest possible width unless you tell it something different. I believe that a span tag won't stretch to the width of the page, but I don't know if one can be placed outside a div tag.
decibel.places posted this at 16:47 — 27th August 2008.
He has: 1,494 posts
Joined: Jun 2008
hmmm
seems like you need to put the div in a container and set the property of the parent/container to center it
the text-align:center property can work, but not always
using
<div align="center">can also center the content, sometimes this works when the css property doesn't.You will probably need to assign a width to the container unless you want it to be 100%
Remember that width properties can be percent as well as em (relative to the doc font size) for a more fluid effect...
greg posted this at 16:58 — 27th August 2008.
He has: 1,581 posts
Joined: Nov 2005
But as pr0gr4mm3r rightly said, if a div has no specified width, it stretches the full width of the area it's in. so any form of center align/margins auto etc will make no difference.
I will have a play sith spans, never really used them that much to be honest, perhaps that might resolve my issue, otherwise I'm stuck with min-width or not centered
decibel.places posted this at 18:40 — 27th August 2008.
He has: 1,494 posts
Joined: Jun 2008
I imagine a scenario like:
<div style="text-align: center"><div style="width: 50%">
</div>
</div>
I usually just use spans when I want to style a very small chunk, a word in a sentence for example. They can get messy when used for big elements...
to center the inner div - yes, you do need a width, the browser cannot read your mind (yet)
JeevesBond posted this at 18:47 — 27th August 2008.
He has: 3,956 posts
Joined: Jun 2002
By the way: IE (can't remember if it's just six or version seven too) treats
widththe same way standards-compliant browsers treatmin-width.So, if you put
min-widthin your main style sheet, thenwidthin your IE-specific style sheet you'll get the same behaviour from all browsers. Hope that makes sense.The thing to remember about
spantags is that they are inline level elements. So they can only contain other inline elements like text (and probably pictures, if I remember correctly). No paragraphs, lists, divs or whatnot may go inside aspantag.a Padded Cell our articles site!
decibel.places posted this at 19:15 — 27th August 2008.
He has: 1,494 posts
Joined: Jun 2008
I avoid using "hacks" to set styles for specific browsers, like IE
They might work today, but watch out on the next release, they might just stop working.
Best to use standards-compliant css for all browsers (even if there are slight variations)
In a pinch, I might use a browser-sniffing script to set a style on the fly - at least that will not degrade in a new browser release!
demonhale posted this at 01:40 — 28th August 2008.
He has: 3,278 posts
Joined: May 2005
If you don't want to assign widths, assign margins to inner divs, or paddings to the wrapper divs... That's will adjust the overall width of the page depending on the resolution of the monitor or size of the browser window...
kamaldeeps posted this at 12:01 — 3rd September 2008.
They have: 2 posts
Joined: Sep 2008
Is there any way to center a div without using a width?
pr0gr4mm3r posted this at 13:11 — 3rd September 2008.
He has: 1,502 posts
Joined: Sep 2006
Nope. Divs assume the width of the element it's in unless you specify otherwise.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.