html - Grow div height depending on its neighbour -


I increase my height based on the height of my neighbors. The problem is that I should be able to give them the lowest height (130px). I think this is a very basic problem, but I do not get it, hope someone can help me.

Problem:

  • div.guide-image and div.guide-
  • the minimum height of div.guide (or its child) should be 130px .

The following conditions:

HTML 

  & lt; Div class = "guide" & gt; & Lt; Div class = "guide-image" & gt; & Lt; Img src = "http://lorempixel.com/64/36" /> & Lt; / Div & gt; And lieutenant; Div class = "guide-descr" & gt; To work on the website, there is no desire to work in any way, but it is sometimes not motivated to work as a worker and workers, it was attacked and charged and both leaders and Dalits against. State Cleta Covered Gibregane, There is no Sea Ashes Temple & Lt; / Div & gt; & Lt; / Div & gt;

CSS 

  * {margin: 0; Padding: 0; } Div.guide {width: 800px; } Div.guide-image {float: left; Width: 250px; Background color: # B0BAC9; } Div.guide-image img {display: block; Margin: 40px auto; Max-width: 90%; Maximum-height: 80%; } Div.guide-descr {float: left; Width: 550 pixels; Padding: 25px 25px 25px 25px; Box-size: border-box; Background color: # 116FD1; } << Code>   
 
 
  displayed  instead of property  float < Try it / Code> Your goal can reach:  
  div.guide {display: table; Width: 800 pixels; } Div.guide-image {display: table-cell; Vertical-align: medium; } Div.guide-descr {display: table-cell; Vertical-align: medium; }  
 
   
 
 Uncheck method can use the  Flexbox  method but if you support it Then you can 
 
  div.guide {display: flex; Width: 800 pixels; }  
 
 Demo for Flex

Comments

Post a Comment