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

[Magikarp]

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

[Senff]

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

[Magikarp]

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

[Senff]

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

[Magikarp]

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.

[Magikarp]

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

[Magikarp]

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?

[wolfcry911]

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

[Magikarp]

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

[Magikarp]

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.

[Paulie_D]

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?

[Paulie_D]

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/

[wolfcry911]

Here’s an updated pen

[Magikarp]

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

Fixed: Thanks guys!

[Author]

Posts