The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 19, 2019, 01:55:43 PM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: CSS Trix: Centering a div of unknown width  (Read 18205 times)
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« on: September 21, 2009, 04:56:11 PM »

This is something that's just pissed me off for a long time, and has been one of those "Fuckit, I'll just use a table here" to get a block of "stuff" centered on a page or within another div. Think about it: text-align doesn't work (unless of course the content of the div is nothing but text) and you can't margin: 0 auto; unless the div you're centering has a fixed width. The reason for this effort, of course, is that tables are just a no-no when it comes to white hat SEOing your pages.

So I saw this done, tried it and it works like a charm. (BTW - I am writing it this way because I am sureasshit to forget this technique in 20 minutes. This is actually for me)

Consider:
  • the only thing that will make the size of a div compress up to the size of the inner content is float.
  • if you position: relative things, then float: left takes on a completely different meaning.
  • You are allowed to negatively "left" items if they are position-relative.

With those rules in force, consider this little piece of HTML and then I will explain it.

Code:
<div style="float: left; position: relative; left: 50%; background-color: yellow;">
<div style="float: left; position: relative; left: -50%; background-color: blue;">
<img src="/graphics/something.gif">
Here is some text
<a href="/index.html">
</div>
</div>

Here it is: the inner content is positioned side by side. That makes the the two containing divs exactly the total outside size of the inner content - because they both are floated left. The outside div is positioned so that it's leftmost corner will be at exactly 50% of it's container - be that another div or the body or whatever. Remember that the inner div will be exactly the same size as the outer div: so at -50% left, it will be 50% of the size of it's containing div - in other words, the outer div is used to find dead center, the inner div then moves left 50% of it's own size. I put the background colors in there so that you could see what's going on if you use the above code as an example.

WHAT A CHARLIE FOXTROT. But it works. If you need to have content that is larger than the viewable window, then you might want to put the whole mess in another div with overflow: hidden so that you don't get a scroll bar at the bottom. It'll still all work correctly, but you'll have an invisible reason for a big ol' scroll bar at the bottom.
« Last Edit: September 21, 2009, 04:58:53 PM by perkiset » Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
kurdt
Lifer
*****
Offline Offline

Posts: 1153


paha arkkitehti


View Profile
« Reply #1 on: October 20, 2009, 10:03:34 PM »

Have you tested this with IE? So many of these center alignment tricks fail with IE.

And you also might want to consider CSS frameworks like Blueprint if you want to avoid doing CSS hacks Smiley
Logged

I met god and he had nothing to say to me.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #2 on: October 20, 2009, 11:03:24 PM »

Yup, works great even in IE6... I don' likes me no CSS hacks if I can avoid it.

This is pretty much straight up, although it is an interesting manipulation.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
BadBoyMcCoy
n00b
*
Offline Offline

Posts: 1


View Profile
« Reply #3 on: February 09, 2010, 10:18:56 AM »

Very clever mate, exactly what I was looking for

Thanks
Logged

No links in signatures please
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: February 09, 2010, 10:20:29 AM »

You're welcome BBM, and welcome to The Cache.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
Phil-R
n00b
*
Offline Offline

Posts: 2


View Profile
« Reply #5 on: May 03, 2011, 08:51:51 AM »

Loving it.  Cheers!
Logged
Phil-R
n00b
*
Offline Offline

Posts: 2


View Profile
« Reply #6 on: May 04, 2011, 02:03:38 AM »

BTW, I had a problem with a horizontal scrollbar appearing due to the first DIV sticking out the side.  I solved it by wrapping the whole thing in another DIV with fixed width and height and overflow:hidden.
Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #7 on: May 04, 2011, 08:56:23 AM »

Perfect Phil, well done. I'm wondering if I should highlight the last paragraph of my original post because it would seem you didn't catch that and it is important.

Although persnickety, CSS rocks.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
riinfotech45
n00b
*
Offline Offline

Posts: 4


View Profile
« Reply #8 on: April 12, 2012, 04:15:05 AM »

such a great.. thanks for sharing..
Logged
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!