Grow your CSS skills. Land your dream job.

How do I create headings that align side-by-side with CSS?

  • # June 29, 2012 at 9:58 pm

    What I have doesn’t work very well. Any text that is created after the headings will align itself up weird and it requires a lot of code on my part.

    I just want headings that can align side by side with CSS.

    Like the ones on this page:
    http://twitter.github.com/bootstrap/examples/hero.html

    # June 29, 2012 at 10:39 pm

    Show us what you’ve come up with (and what doesn’t work for you) and we can see better what goes wrong.

    # June 29, 2012 at 10:46 pm

    http://jsfiddle.net/7bvE8/3/

    # June 29, 2012 at 11:04 pm

    So what’s wrong with it exactly? Not really sure what you’re trying to accomplish.

    # June 29, 2012 at 11:39 pm

    Like the headings on that page, they are side by side. I want that, but mine doesn’t work like that.

    Any text made after the headings will align it weird and I want to make the height of both of them fixed.

    # June 29, 2012 at 11:40 pm

    Are you trying to do something like this? This is what I assumed you were going for:

    link : http://codepen.io/chrisxclash/pen/5/1

    # June 30, 2012 at 1:47 am

    Yeah, but when you put text over the headings or below, one of them pushes down and is the clear class really necessary?

    I thought this was a really simple thing to accomplish, yet I still can’t :c

    # June 30, 2012 at 2:23 am

    Can you draw something in Photoshop to show me what you’re talking about? Where exactly are you trying to put the text above the heading? If you put it above the div, it’s going to push the div down. So I’m not really sure what you’re trying to accomplish.

    Also, the clear class is necessary in some sort. You can do a clearfix on the wrapper as well to remove the extra div from the markup, but if you have all your columns floated then you’ll need to have some sort of clear after them to stretch the wrapper.

    # June 30, 2012 at 2:37 am

    Or you can simply wrap your columns and apply “overflow: hidden;” to the wrap and it is effectively the same thing. like this: http://codepen.io/pen/7588/1

    Saves a bit of extra css & markup…

    @misterrpg If you want to add text above, you simply need to make sure it spans the width of the wrapper… your best bet would be to wrap that text in a div and set the width to 100%…

    # June 30, 2012 at 3:01 am

    If all you want is content above them, then yeah you just need any block level element above the columns, like so:

    link: http://codepen.io/chrisxclash/pen/5/2

    # June 30, 2012 at 3:04 am

    http://img401.imageshack.us/img401/5200/123123123hl.png

    Here we go..

    Edit: Chris that seems so weird. I don’t see the need for the content classes, text-area classes.. Shoudln’t there be one content class, which all of the content of the page is inside?

    # June 30, 2012 at 3:10 am

    Mister: You don’t technically need the classes. The easiest setup for what you would want is basically 5 boxes I think.

    Full page wrapper, top content div, column wrap div, column div, and bottom content div. You wouldn’t have to have classes for the content divs, however you wouldn’t be able to add padding, etc.

    Kinda like this: http://codepen.io/chrisxclash/pen/5/3

    # June 30, 2012 at 9:20 am

    @chrisxclash, there is never a good reason to use an extraneous div for clearing floats. It’s simply bad practice – there are many other options available. Also, I can appreciate your helping others, but using all classed divs is also bad practice. Try to use semantic mark-up whenever possible

    @misterrpg, is this what you’re after? Or are you looking for somthing more/different?

    # June 30, 2012 at 3:55 pm

    @wolfcry911 Nice solution! I’m still trying to get familiar with html5 markup, and I can definitely see from that what I should be doing. Sometimes I forget p tags are block elements as well, haha. Cool, cool.

    # June 30, 2012 at 5:43 pm

    That sounds like exactly what I want, I will look at it some more though, to make sure it is bug-free. Thanks mate!

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".