Multiple Divs with Same Responsive Height

Asked

Viewed 3,622 times

2

I have four five Ivs, one of which is a container for the other four. Structure:

<div id="divPai" style="width:100%">
    <div id="divInfUser" style="width:25%; height: 30%; background-color: #DCAE4C; float: left; display: inline-block;padding: 10px;">
         <ul>
             <li></li>
             <li></li>
             <li></li>
         </ul>
    </div>

    <div id="divFoto" style="width:25%; height: 30%; background-color: #ECEDEF; float: left; display: inline-block;padding: 10px;text-align: center;">
    </div>

    <div id="divLogo" style="width:25%; height: 30%; background-color: #ECEDEF; float: left; display: inline-block;padding: 10px;">
    </div>

    <div id="divInf" style="width:25%; height: 30%; background-image: linear-gradient(45deg, #5B5B5F, #868589);; float: left; display: inline-block;padding: 10px;">
            <ul>
             <li></li>
             <li></li>
             <li></li>
         </ul>
    </div>
</div>

The laterias Divs will be the same size because of the li but the middle ones will have another type of information. If I set fixed height value the UL will exit the div when decreasing the resolution. I need all daughters to have the same height at the beginning and when adapting to other resolutions it will grow together so that the UL do not leave the premises

html css html5 css3 responsive-layout
  • 3

    Have you tested min-height ?

2 answers

3


I made some changes to the html id to better reference the css:

<div class="divPai container">
<div class="content caixa">
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</div>

<div class="content caixa">
 <p>Caixa 2</p>
</div>

<div class="content caixa">
 <p>Caixa 3</p>
</div>

<div class="content caixa">
        <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</div>

and the css:

.divPai {
font-size: 0;
}
.content {
display: inline-block;
float:left;
font-size: 1rem;
}
.caixa {
box-sizing: border-box;
padding: 5px;
width: 25%;
min-height:100px;
}
.container {
margin: 10px;
}
.content:nth-child(1){background:#DCAE4C;}
.content:nth-child(2){background:#ECEDEF;}
.content:nth-child(3){background:#ECEDEF;}
.content:nth-child(4){background:linear-gradient(45deg, #5B5B5F, #868589);}

2

Browser other questions tagged html css html5 css3 responsive-layout

You are not signed in. Login or sign up in order to post.