How to align content

[jamesbrown03]

Hi I’ve been coding a site and want to align content using css and html.
I would like to put content horizontally and have about four divs next each other or more.

[coothead]

Hi there jamesbrown03,

Well, that is interesting news.

What is your intended content like ?

coothead

[jamesbrown03]

My content is intended to be a picture and a short description with a link to another page. something like this:

<img src="images/pineapple.jpg" />

  <b><h5>Real Energy Corporation Limited(ASX:RLE) is an Australian listed oil and gas explorer.</h5></b>


  <p>Real Energy is an oil and gas exploration and development company with a focus on the Cooper  basin, Australia’s most prolific conventional onshore petroleum producing basin. Established in 2009 the company covers a large acreage of over 682,257 acres with 100% retained interests and the ability to farm down as a potential funding source in the future. Real Energy’s tenements contain vastly under explored areas and provide a number of opportunities for the company including:</P>
    <a href="Aboutus.html"><b>Read More ></b></a>

Edit:
I would put a few more next to it but at the moment this is happening:

---

[thepixellator]

I found your site here: http://realenergy.com.au/ but it doesn’t match your screenshot, so I’m assuming you are working in a development environment. So to align your content, you’d need to know which grid framework your site employs and then use class names from that framework. Your production site is using “grid-12”. (right click, inspect, look in the head code for grid names)

So if your current theme is using the same grid system, then go look up documentation from grid-12 to find out the class names.

[jamesbrown03]

@thepixellator

“grid-12”

I’m not to familiar with grids. I tried to use a grid but when i did it just put one on top of the other.

[jamesbrown03]

@thepixellator i’ve made them go next to each other but now there on top of each other.

[TechnoBear]

I suggest you first run your pages through the HTML Validator, as there are a few errors. https://validator.w3.org

Most noticeably, you are using an XHTML 1.0 Transitional doctype, but your page includes <article> tags which are only valid in HTML5.

[0_0Nathan]

Judging by your screen shots are you by any chance using float elements?

If you are its a good idea to wrap that content into a set of tags and make the tags have Overflow:auto;

Otherwise if you are not concerned for older browser support make use of display:inline-block;

Personally I stay away from those tags such as <article></article> and those since there are not many Older browser support in my thought the “older” browsers I try to make sure of is IE 8+ and some of the newer browsers since most of the platforms have auto update on so responsive design I would rely on just newer browsers but there are still Pc’s such XP and most of windows 7 platforms that run atleast version 8 of IE obviously some people would update their browsers but also have take in consideration that not everyone is tech savy

[jamesbrown03]

Thanks guys I now have them next to each other:

One more thing is that the social media icon isn’t showing now:

[0_0Nathan]

@jamesbrown03

One more thing is that the social media icon isn’t showing now:

Well If your website is not being edited live than it’s reasonable to say that the social media plugins are not going to work.

Even if you are running internet, editing the website offline or on localhost than the computer doesn’t connect online to gather all the information needed to use the social plugin it will show itself when you go live…

If you are working offline but wish to verify the amount of space or where it would be displayed try to warp the social media tags and use images once the website goes live than remove the warped tags and images and the real content will be visible.

I don’t know If I am 100% right but I’ve had those problems in the past because it was never live :).