Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #38718
    Magikarp
    Participant

    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

    #105125
    Senff
    Participant

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

    #105126
    Magikarp
    Participant
    #105127
    Senff
    Participant

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

    #105129
    Magikarp
    Participant

    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.

    #105135
    Magikarp
    Participant

    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

    #105141
    Magikarp
    Participant

    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?

    #104799
    wolfcry911
    Participant

    @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?

    #105159
    Magikarp
    Participant

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

    #105161
    Magikarp
    Participant

    3 questions:

    1) How do I always make the width of the articles 50% (each) of the content area?
    2) How do I always make the height of the articles always the height of the longest article?
    3) A VERY annoying problem has just come up when I start adding tons of content to my game’s page.
    http://img208.imageshack.us/img208/4435/problum.png (image) As you can see, the article / blurb will cut off if the last thing in it is not text.

    #105165
    Paulie_D
    Member

    1) You can set the width of the articles to 50% in the CSS.

    2) You have to do this with Javascript….just google it, there’s plenty of very light weight solutions out there.

    3) Without seeing your code it’s going to be difficult to comment. Do you have a link or can you make a JSFiddle?

    #105166
    Paulie_D
    Member

    Actually, on looking through your original question, you obviously haven’t looked through the documentation for Bootstrap.

    It’s a grid system with defined rows and pre-set CSS to define headings and so forth.

    Here’s a set of videos on it: http://webdesign.tutsplus.com/series/twitter-bootstrap-101/

    #105173
    wolfcry911
    Participant

    Here’s an updated pen

    #105179
    Magikarp
    Participant

    thanks wolfy. Looks like my questions were answered. Thanks a lot guys.

    Fixed: Thanks guys!

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.