CODEWITHSUNDEEP
htmlcsscontainersexpand
agungandika
agungandika

Reputation: 176

How to expand div based on child content size?

I have a following structure on my view:

<div id="container_card">
    <div id="child_top_container">
        <div id="logo"><img src="http://placehold.it/175x100"></div>
        <div id="title"><p>This title block width depends on size of logo</div>
    </div>
    ...
</div>

Div #container_card have fixed width and height, i.e. 600px x 300px. Also, Div #child_top_container follow same width, 600px but the height is 125px.

Child #logo have a image that the size of image is random. I say random, because sometimes user upload rectangular and square.

The problem is, i want to display block paragraph #title like this:

+-------------------- 600px --------------------+
+-------------- #child_top_container -----------+
+                  +                            +
+ logo (175x100)   + This is title block        +
+                  +                            +
+------------------+----------------------------+
+------------ end #child_top_container ---------+
+-------------------- 600px --------------------+

And if the width of image smaller that above, will looks like this:

+-------------------- 600px --------------------+
+-------------- #child_top_container -----------+
+                +                              +
+ logo (150x100) + This is title block          +
+                +                              +
+----------------+------------------------------+
+------------ end #child_top_container ---------+
+-------------------- 600px --------------------+

or something like this:

+-------------------- 600px --------------------+
+-------------- #child_top_container -----------+
+                     +                         +
+ logo (250x100)      + This is title block     +
+                     +                         +
+---------------------+-------------------------+
+------------ end #child_top_container ---------+
+-------------------- 600px --------------------+

I already achieved this by jQuery function and using window.resize event, but sometimes looks ugly when i add to carousel (bs3).

The question is, can I achieve some solutions using pure css that not depends on js/jquery? Thank you

Apologize me for bad english since it is not my native language.

Upvotes: 0

Views: 66

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105893

display:flex should do this :

.child_top_container {
  width:600px;
  border:solid;
  margin:auto;
  display:flex;
  align-items:center;
}
#title {
  flex:1;
  text-align:center;
}
img {
  display:block;
}
<div class="child_top_container">
  <div id="logo"><img src="http://placehold.it/175x100"></div>
  <div id="title"><p>This title block width depends on size of logo</div>
</div>
<div class="child_top_container">
  <div id="logo"><img src="http://placehold.it/150x100"></div>
  <div id="title"><p>This title block width depends on size of logo</div>
</div>
<div class="child_top_container">
  <div id="logo"><img src="http://placehold.it/300x120"></div>
  <div id="title"><p>This title block width depends on size of logo</div>
</div>

take a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Related Questions