3 columns of images, not IE compatable

I never added any border

Hello, the layout is broken because of the h2 headings before the images, as it is being pushed to 2 rows (because of the percentage based font sizing).

Solutions:

• either you change the font size of the h2 headings so it does not go to the second line
• you add a fixed height for the h2 headings (height not line height)
• add the headings in the same grid_4 div, causing the images to not be on the same line, but the layout won't brake

Also add at least 1em line-height to your h2 headings, so the text doesn't overlap.

I hope this helps!

Thanks Ziga, that worked. However another problem I'm having is that the text above the images isn't lined up properly. I want it centered above the images but it won't do that. This is the code I used to style the h2 titles.

.custom1, .custom2, .custom3 {
line-height: 1.4em;
color: #1F3569;
text-align: center;
width: 320px;
font-family: serif;
margin: 0px 0px;
font-size: 115%;
}

However it isn't centered properly, any help?

Hello again! One tip: Start using an element Explorer like Google Developer Tools (which I prefer), Firebug or any other browsers dev tools. You will be able to spot issues much faster and learn from your mistakes. :)

Take a look at this picture:

I added an outline and some background to your .container_12 .grid_4 container, so you can see that the issue is with the container and not the heading itself.

I used this CSS to fix the issue (only tested in Chrome):

.custom1 {
    margin-left: 10px;
}

.custom2, .custom3 {
    margin-left: 20px;
}

Edit: I saw this right before I clicked the Answer button: the problem is that you assign the margin on:

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    margin-left: 10px;
    margin-right: 10px;
}

But remove it here:

.custom1, .custom2, .custom3 {
    margin: 0px 0px;
}

Sorry for the long answer as only the Edit part would be enough, but I think it is better that you know how to find the issue by yourself.

The first part worked. The second part of just changing margin to 0 0 didn't fix the issue for some reason.

I'll try figuring out how to use the developer tools, not sure yet how it will make things easier.

thanks for the help

Hello, your already have the margin set to 0 0, you to remove the property from the rule .custom1, .custom2, .custom3.

You will see once you will know how to properly use the dev tools :)