CODEWITHSUNDEEP
htmlcssresponsive-designcss-float
Acidon
Acidon

Reputation: 1334

Floating divs inside inline-block parent goes down on resize

I have 2 floating divs, inner-left and inner-right inside parent container inner-container.

inner-container is set to display: inline-block; to have it's width to be equal of width of it's children.

The problem is, when I resize the window, inner-right div goes down and only then starts to resize itself.

How do I inner-right make it stay on the same line with inner-left, and, in the event of window resize, to resize instead of going down?

HTML: 

<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <div class="inner-container">
        <div class="inner-left"><img src="http://placehold.it/100x100" alt=""></div>
        <div class="inner-right"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo orci, rutrum nec feugiat sed, ultrices non dolor. Aliquam laoreet.</strong><br>
    Vivamus purus metus.
        </div>
    </div>
</div>

CSS:

.container {
    background-color: #f0fff0;
    padding: 10px;
    border: 1px solid #bce2c1;
    border-radius: 5px;
}

.inner-container {
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #bce2c1;
    border-radius: 5px;
    margin-top: 10px;
    display: inline-block;
}

.inner-left {
    float:left;
    width: 60px;
}

.inner-left img {
    height: 60px;
    width: 60px;
}

.inner-right {
    float:right;
    text-align: left;
    padding-left: 10px;
}

JSFIDDLE:

https://jsfiddle.net/acidonyx/naw6ojwe/4/

Upvotes: 0

Views: 332

Answers (3)

Asons
Asons

Reputation: 87211

For this you should use flexbox, here with inline-flex to fit your requirement

.container {
  display: inline-block;
  background-color: #f0fff0;
  padding: 10px;
  border: 1px solid #bce2c1;
  border-radius: 5px;
}
.inner-container {
  display: inline-flex;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #bce2c1;
  border-radius: 5px;
  margin-top: 10px;
}
.inner-left img {
  height: 60px;
  width: 60px;
}
.inner-right {
  padding-left: 10px;
}
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <div class="wrap-container">
    <div class="inner-container">

      <div class="inner-left">
        <img src="http://placehold.it/100x100" alt="">
      </div>

      <div class="inner-right"><strong>Lorem ipsum dolor sit</strong>
        <br>Vivamus purus metus.
      </div>

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

Upvotes: 1

ashish singh
ashish singh

Reputation: 6904

well just remove float: right from .inner-right and your problem will be solved.

.inner-right {
    text-align: left;
    padding-left: 10px;
}

to solve your other problem you can do 

.inner-right {
    overflow: hidden;
    text-align: left;
    padding-left: 10px;
}

Upvotes: 1

sol
sol

Reputation: 22949

You could try floating .inner-right to the left instead, and giving it a width set in a percentage value, like this:

.inner-right {
    float:left;
    width: 85%;
}

JSFIDDLE

You can use media queries to update the percentage as you need.

Upvotes: 0

Related Questions