Diana J Diana J - 2 days ago 5
CSS Question

Divs position change when changing screen width

I am trying to design something like this picture. Two divs don't stay properly when I change browser width. If I give two divs

float:left
, they stay vertically, but its broken when I change screen size.

How can I keep divs together and inside border like in the picture?



ol {
list-style-type: none;
padding: 0;
}

ol .search-result {
position: relative;
display: block;
min-height: 220px;
color: #000;
padding: 10px 5px;
}

.media-box {
float: left;
}

.search-result-item {
overflow: auto;
max-width: 600px;
padding-top: 7px;
padding-bottom: 7px;
}

.search-item-box {
border: 1px solid #DDD;
min-height: 226px;
transition: box-shadow .2s ease-in-out;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.search-item-box:hover {
-webkit-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
-moz-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
}

.item-price-promo-container {
padding: 5px;
width: 180px;
background-color: #fff;
height: 100%;
margin-left: 350px;
float: left;
}

<ol id="searchListContainer" class="search-list-container">
<li class="search-result">
<a id="hotel-id" class="search-result-item" href="#" target="_blank">
<section class="search-item-box">
<div class="media-box">
<figure class="media">
<img src="https://s15.postimg.org/7w2xbeufv/image.jpg" height="225"
width="225"
alt="1.jpg"/>
</figure>
</div>
<div class="item-price-promo-container">
<div class="item-review-container">
<ul class="item-star-rate">
<li class="item-star-rate-container review-item">
<strong class="item-star-rate-symbol">&#9733;</strong>
<strong class="item-star-rate-number">3.5</strong>
</li>
</ul>
</div>
</div>
</section>
</a>
</li>





Thanks!

Answer

You can simplify things a lot here by using CSS Flexbox.

Let's say you want to horizontally split each li into three sections.

  • You want the first section to be 225px wide. When the page width changes, you don't want it to grow bigger than that, you don't want it to shrink smaller than that: flex: 0 0 225px;

  • You want the last section to be 325px wide. When the page width changes, you don't want it to grow bigger than that, you don't want it to shrink smaller than that: flex: 0 0 325px;

  • You want the middle section to fill the horizontal gap between the first and last sections. You don't mind if it grows bigger (as the page widens) and you don't mind if it shrinks smaller (as the page narrows): flex: 1 1 calc(100% - 550px);

Working Example:

ol {
margin: 0;
padding: 0;
}

li {
display: flex;
height: 100px;
margin-bottom: 6px;
border: 1px solid rgb(227,227,227);
list-style-type: none;
}

li div:nth-of-type(1) {
flex: 0 0 225px;
background-color: rgb(255,0,0);
}

li div:nth-of-type(2) {
flex: 1 1 calc(100% - 550px);
background-color: rgb(255,255,0);
}

li div:nth-of-type(3) {
flex: 0 0 325px;
background-color: rgb(0,127,0);
}
<ol>
<li>
<div></div>
<div></div>
<div></div>
</li>

<li>
<div></div>
<div></div>
<div></div>
</li>

<li>
<div></div>
<div></div>
<div></div>
</li>
</ol>

Comments