I am trying to create a grid layout using tags and css. I need

Question

0

Asked: June 10, 20262026-06-10T17:54:45+00:00 2026-06-10T17:54:45+00:00

I am trying to create a grid layout using tags and css. I need

0

I am trying to create a grid layout using tags and css. I need the grid system to hold four main blocks as portrayed in the image below. I have created a solution that works great in safari and chrome, but not so well in firefox as the titles overlap.

Please see my code below, and maybe someone can see where I have gone wrong! I cant for the life of me find the problem.

enter image description here

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 great in safari and chrome, but not that well in firefox, please help. Also, please let me know if the code I have already used is bad or needs changing to ensure cross browser compatibility. Thanks so much.