Forums

LinuXofArabiA

Hello Everyone, My first post here. All I want to do is to simply have three title links (written as anchor elements <a>) within their own <div> to appear on my page evenly spaced over the entire width of the screen. Isn't there any way to do this other than having them as a table with one row and three columns?! Please note that they have their common class under their own div with a unique ID. so to access them I have a '#divid a' sort of syntax to access them in the separate style sheet..

The format I want is something similar to what is below:


BLOG	 	 	 	 	 PROFESSIONAL 	 	 	 	 PERSONAL

There has a got to be an easy way to do this with CSS. For some reason I am struggling with this simple issue.
Help me please.

Hompimpa

What reason?
http://jsfiddle.net/tovic/fj3GY/

joshuanhibbert

Nicely done @Hompimpa. As I am a (recent) advocate of not using floats for layout, I have offered an alternate solution: http://jsfiddle.net/joshnh/tEGTT/

Hompimpa

Oh.. list = semantic nav
Success for your job @joshuanhibbert :)

LinuXofArabiA

Thanks both you guys! I have to say that the prize goes to Hompimpa since all three elements have the same class, as opposed to having an individual class for each one... Although, I really like your approach joshuanhibbert and will consider something similar from now on.

Thanks again.

JoshWhite

Just curious - what are the drawbacks of using floats? I can absolutely agree not to overuse it, but what are you seeing that you would want to do everything you can to avoid them?

joshuanhibbert

@JoshWhite Floats were not meant to be used for layout, and there are problems (such as the clearfix issue) to support that. Also, using floats removes the element from the flow of the document (once again, clearfix issue), which is not what you want for layout.

Display: inline-block; is a more flexible alternative; it allows you to align to the center (without even knowing the width), and also set the vertical alignment (e.g. top, middle, baseline).

I'm not saying you should never use floats, but I am a firm believer of only using them when appropriate, such as wrapping text around an image.

I might write up a blog post on my preferences, and if I do I will link to it for you.

Oh, and using inline-block (with text-align: right;) doesn't reverse the order of your items as floating to the right does.

Also, I should clarify: I don't do everything I can to avoid them, I just use them sparingly.

EDIT: I went ahead and wrote an article on the subject: http://joshnh.com/2012/02/why-you-should-use-inline-block-when-positioning-elements/

erikportin

@joshuanhibbert thank you for a mind opener. Never thought about how I use floats and this made be think about it.

joshuanhibbert

@erikportin You are very welcome!

JoshWhite

Definitely some good points there. That's something I'm going to look into. The main reason I ended up using floats was the crappy IE6/7 compatibility with inline-block and there were a few projects I had to create conditional stylesheets (which I'm sure if I go back I could figure out a way to do it without them) and I can't stand using browser specific stylesheets if I can ever help it. Thanks for taking the time to write that up dude!

joshuanhibbert

@JoshWhite No worries at all mate. I'm glad I wrote the article as it actually taught me a few things I wasn't aware of.

Paulie_D

I'd be interested to see a demo page with an example, specifically, how you manage dropdowns?

joshuanhibbert

@Paulie_D I'm not sure I understand what you are asking for, but here is a drop down menu using inline-block: http://jsfiddle.net/joshnh/srNVQ/

Brightonmike

I personally believe white-space dependent code is to be avoided, which is why I'm against using inline-block. I think floats are easier and the shortfalls are less of a problem compared the messier code often needed for inline-block, especially whitespace hacks.

joshuanhibbert

@Brightonmike That is interesting. Here is the shortest clearfix I can find:

.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

And here is the CSS required to eliminate inline-block's white space rendering:

.parent {
    font-size: 0;
}
.child {
    font-size: 1em;
}

I understand where you are coming from, I just don't necessarily agree. The above white space hack is clearly shorter than the clearfix hack ;)

Paulie_D

@joshuanhibbert Thanks..that's exactly what I was after...just needed to see how it all comes together.

fectio1

@joshuanhibbert Just bookmarked your post. Thanks!

joshuanhibbert

No worries guys.

@LinuXofArabiA Apologies for hijacking your post.

treehouse : what would you like to learn today?

Forums

Isnt there another way?!!