Is there a way to ensure consistency in the size of these HTML information blocks?

Question

Is there a way to ensure consistency in the size of these HTML information blocks?

I am struggling to ensure uniform size for these information blocks regardless of the amount of text each one contains. In the current setup, when one block has less content than the other, it appears smaller while the other remains a different size.

My main goal is to have these blocks maintain the same size regardless of their content or any images included within. I plan to use another set of blocks right below these as well.

This is the CSS code snippet:

 /***********All containers**************/
   .bottomContainers{
position: absolute;
margin-left: 0%;

display: inline-box;
  }

 /**********Small Containers*************/
  .container{
    max-width: 30%;
    max-height: 30%;
    margin-top:5%;
    margin-bottom: 5%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
border-radius: 5px;
border-bottom: 2px solid grey;
 }

This is the HTML code snippet:

    <div class="bottomContainers" role="moreInfo">
     <!--Small Inner Containers for Information-->
     <div class="container" id="firstContainer">
          <br />
          <center><img src="img/map.png"></center>
          <br>
          <article>
             Some random text is in this block, It doesnt size like the next one
          </article>
     </div>
     <div class="container" id="firstContainer">
        <br />
        <center><img src="img/money.png"></center>
        <br>
        this is another block which also doesnt scale to the other block regardless of text inside of it
     </div>

What could be causing this inconsistency in size?

html css web

Answer 1

Answer №1

Your original code has been extensively refactored in this solution. If the website has a static width, using static width cells should not pose an issue. However, if you require a responsive design, there may be numerous issues:

Link to Example

The image and corresponding text are positioned using absolute positioning. While this is suitable for a static layout, it may lead to complications when transitioning to a responsive design.

<div class="bottomContainers">

    <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>
        <div>
            Some random text is in this block, It doesn't scale like the next one
        </div>
     </div>

     <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>     
        <div>
            This is another block which also doesn't adjust its size proportionately to the other block regardless of the text inside of it
        </div>
     </div>

</div>

.bottomContainers { overflow:hidden; }

.container { 
    width:200px;
    height:200px;

    float:left;
    position:relative;

    margin:5% 5%;
    padding:2%;

    background-color: #ecf0f1;
    color: grey;

    border-radius: 5px;
    border-bottom: 2px solid grey;
 }

.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }

If possible, it would be advisable to find alternatives to utilizing static height cells.

Answer 2

Your original code has been extensively refactored in this solution. If the website has a static width, using static width cells should not pose an issue. However, if you require a responsive design, there may be numerous issues:

Link to Example

The image and corresponding text are positioned using absolute positioning. While this is suitable for a static layout, it may lead to complications when transitioning to a responsive design.

<div class="bottomContainers">

    <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>
        <div>
            Some random text is in this block, It doesn't scale like the next one
        </div>
     </div>

     <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>     
        <div>
            This is another block which also doesn't adjust its size proportionately to the other block regardless of the text inside of it
        </div>
     </div>

</div>

.bottomContainers { overflow:hidden; }

.container { 
    width:200px;
    height:200px;

    float:left;
    position:relative;

    margin:5% 5%;
    padding:2%;

    background-color: #ecf0f1;
    color: grey;

    border-radius: 5px;
    border-bottom: 2px solid grey;
 }

.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }

If possible, it would be advisable to find alternatives to utilizing static height cells.

Answer 3

Answer №2

Are you looking for a solution that works best for your situation? Check out this option:

View Demo Fiddle

I made some adjustments to your code. Using the center tag is not recommended, and it seems like the br tags were used for spacing, which can be achieved with margin instead. I set a specific height for .container, but keep in mind that if the window size is reduced too much, overflow text will not be visible.

HTML:

<div class="bottomContainers" role="moreInfo">
     <div class="container" id="firstContainer">
        <img src="http://www.placehold.it/100x100">
        <p>
          This block contains random text that does not adjust its size like the next one
        </p>
     </div>
     <div class="container" id="firstContainer">
       <img src="http://www.placehold.it/100x100">
       <p>
         Here is another block which also does not resize to match the other block regardless of the text inside
       </p>
     </div>
 </div>

CSS:

.container{
    // add your current styles here

    overflow: hidden;
    height: 200px;
    display: block;
    float: left;
}

.container img {
    display: block;
    margin: 10px auto 0px;
}

Answer 4

Are you looking for a solution that works best for your situation? Check out this option:

View Demo Fiddle

I made some adjustments to your code. Using the center tag is not recommended, and it seems like the br tags were used for spacing, which can be achieved with margin instead. I set a specific height for .container, but keep in mind that if the window size is reduced too much, overflow text will not be visible.

HTML:

<div class="bottomContainers" role="moreInfo">
     <div class="container" id="firstContainer">
        <img src="http://www.placehold.it/100x100">
        <p>
          This block contains random text that does not adjust its size like the next one
        </p>
     </div>
     <div class="container" id="firstContainer">
       <img src="http://www.placehold.it/100x100">
       <p>
         Here is another block which also does not resize to match the other block regardless of the text inside
       </p>
     </div>
 </div>

CSS:

.container{
    // add your current styles here

    overflow: hidden;
    height: 200px;
    display: block;
    float: left;
}

.container img {
    display: block;
    margin: 10px auto 0px;
}

Answer 5

Answer №3

A simple solution is to set a specific height for all objects, ensuring they are uniform in size. Adjusting the dimensions may require some trial and error, but it should resolve your issue. I am interested to know how a professional would tackle this problem.

Additionally, avoid centering <img> elements with HTML; instead, use CSS for better styling. Also, take note of inconsistent usage of <br> tags - why are some closed while others remain open?

Answer 6

A simple solution is to set a specific height for all objects, ensuring they are uniform in size. Adjusting the dimensions may require some trial and error, but it should resolve your issue. I am interested to know how a professional would tackle this problem.

Additionally, avoid centering <img> elements with HTML; instead, use CSS for better styling. Also, take note of inconsistent usage of <br> tags - why are some closed while others remain open?

Answer 7

Answer №4

Consider implementing the CSS properties display:table;, display:table-row;, and display:table-cell; to mimic a column in a table within your div. This technique ensures consistent height for all elements.

Explore this example on jsfiddle!

Answer 8

Consider implementing the CSS properties display:table;, display:table-row;, and display:table-cell; to mimic a column in a table within your div. This technique ensures consistent height for all elements.

Explore this example on jsfiddle!

Is there a way to ensure consistency in the size of these HTML information blocks?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the method for switching the parent element following the adjustment of the selected child's opacity

The results of running 'npm run dev' and 'npm run build prod' are different from each other

establish the reliance on field w

Gradually appear/disappear div element with a delay added

Tips for achieving a precise amount of boxes in each row

Add a button feature to both upload and download a todo list within a JavaScript file, similar to a text file

What is the best way to extract specific elements from a string using php?

Struggling to eliminate the unseen padding or white space preventing the text from wrapping under the button

What is causing the background image to not display within my <div>?

Determining the dimensions of a div once it has completed loading

I'm looking to split the Arabic characters "lam alef" (لا) into two separate spans in HTML

Issue: The error message "articales.forEach is not a function" is indicating

Guide to displaying a template using Vue.js

Prolong the Slide Duration in Slider Pro Slideshow

Tips for integrating elements within React Components to create a Container-like structure

Creating a Div element to occupy an entire row is a simple task that can be achieved

What is the best way to append a single class while also ensuring any previously added classes are removed?

Setting up the jscolor chooser to work with Bootstrap buttons is a breeze

Rest assured, with Ajax Security, your protection is in good

Aligning text in the center of a header, positioned beside an image