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.
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%...
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?
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.
@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?
@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.
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.
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
Any text made after the headings will align it weird and I want to make the height of both of them fixed.
link : http://codepen.io/chrisxclash/pen/5/1
I thought this was a really simple thing to accomplish, yet I still can't :c
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.
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%...
link: http://codepen.io/chrisxclash/pen/5/2
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?
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
@misterrpg, is this what you're after? Or are you looking for somthing more/different?
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.
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?
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/
Fixed: Thanks guys!