The complexity of creating a content grid layout using css and html

Question

I am trying to create a grid using tags and css. I need a grid system to store the four main blocks, as shown in the image below. I created a solution that works fine on safari and chrome, but not so good in firefox as the headers overlap.

Please see my code below, and maybe someone can see where I made a mistake! I can’t let my life find a problem.

HTML CODE: -

<div class="elements_wrapper"> <div id="element1"> <img class="align-image" src="img/image1"/> <span class="element-title">Title</span> <p class="element-explain">Main text goes here</p> </div> <div id="element2"> <img class="align-image" src="img/image2"/> <span class="element-title">Title</span> <p class="element-explain">Main text goes here</p> </div> <div id="element3"> <img class="align-image" src="img/image3"/> <span class="element-title">Title</span> <p class="element-explain">Main text goes here</p> </div> <div id="element4"> <img class="align-image" src="img/image4"/> <span class="element-title">Title</span> <p class="element-explain">Main text goes here</p> </div> </div> 

CSS CODE: -

 .elements_wrapper { width:100%; margin-left:-65px; margin-top:110px; padding-bottom:30px; } #element1{ position:absolute; display:inline-block; margin-left:30px; padding-bottom:20px; } #element2 { position:absolute; display:inline-block; margin-top:200px; margin-left:30px; padding-bottom:20px; } #element3 { position:absolute; display:inline-block; margin-left:545px; margin-top:200px; padding-bottom:20px; } #element4 { position:absolute; display:inline-block; margin-left:545px; padding-bottom:20px; } .element-title { font-family:helvetica, arial, serif; color:black; display:inline; font-size:14pt; font-weight:bold; padding-top:15px; } .element-explain { font-family:helvetica, arial, serif; font-size:10pt; float:left; width:280px; } .align-image { border: none; float:left; padding-right:15px; } 

My code works fine in safari and chrome, but not so good in firefox, please help. Also, let me know if the code that I have already used is bad or needs to be changed to ensure compatibility between browsers. Thank you very much.

Answer 1

See the following example: http://jsfiddle.net/ZNSAX/2/

Answer 2

 .element-explain { font-family:helvetica, arial, serif; font-size:10pt; float:left; width:280px; } 

Floating to the left here will result in this error. Firefox is a little dummy with floating elements than Chrome and IE. Removing this should fix your problem.