stop div resizing parent div using css

Question

http://jsfiddle.net/ETkkR/

<div id="Blog1">
    <div class="post">
    <img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
        <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>
    <div class="post">
    <img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
                <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>        
</div>

The div.post-info in some cases(images of width greater than the div.post-info content) fits the div.post parent however sometimes the width of the div.post-info is greater having an affect on the parent div.post by resizing it. how can i make the div.post-info fit the width of the div.parent and not resizing it if it is greater.

my css

#Blog1{
    padding:10px;
}
#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.post img{
    height:100px;
}
.post .post-info{
    text-align:left;
}
.post .post-info span{
    word-wrap:break-word;
}

Edit

YOU CAN CHANGE THE ELEMENTS AS LONG AS THE CONTENT REMAINS SAME TO CREATE A SOLUTION people keep giving solutions which are not suitable for what i'm asking...what i need is for the child div .post-info to not be a greater width than that of the .post parent div

Just a question: you don't want to increase the height but achieve something like the element has `overflow:hidden;` right? You should tell us what you want to achieve and don't want. — Roko C. Buljan, May 21 '12 at 20:37

score 11 · Accepted Answer · edited May 23 '17 at 11:45

11

Here is a demo, but you should really explain: do you want the height to be variable ?

jsFiddle demo

edited CSS (only changed elements):

#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display:block;         /**/
    float:left;            /**/
    overflow:hidden;       /**/
    padding-bottom:24px;   /**/
}
.post .post-info span{
    position:absolute;     /**/
    word-wrap:break-word;
}

P.S: this question associates me to an old answer of mine :)
Pop Images like Google Images
If you need help ... I'm here

edited May 23 '17 at 11:45

Community

1
1

answered May 21 '12 at 20:49

Roko C. Buljan

196,159
39
305
313

I know i discovered it two days ago it's brilliant i've personally made some edits to the plugin, ITS GOOOD, but i need a fallback for users with javascript disabled. – Yusaf Khaliq May 21 '12 at 20:56
:) thanks! I was so surprised seeing your fiddle! :) Ok, now tell me what you think about my demo and my answer --- and my question - Cause I'm afraid if you try to expand the height of the container, than the all-in result could be a bit messy (as it depends on the description length.) – Roko C. Buljan May 21 '12 at 20:59
I've come up with an alternative solution and once im done with the styling i'll share it with you – Yusaf Khaliq May 21 '12 at 21:01
your answer is what is helped me to come up with a solution though so i've accepted ;) – Yusaf Khaliq May 21 '12 at 21:04
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11533/discussion-between-yusaf-and-roko-c-buljan) – Yusaf Khaliq May 21 '12 at 21:10
See answer here about using zero width and min-width properties to solve this: http://stackoverflow.com/questions/19005373/prevent-paragraph-from-increasing-the-width-of-a-floated-parent/36092670#36092670 – Mark Jan 20 '17 at 15:56

score 1 · Answer 2 · answered May 21 '12 at 20:23

It seems to work with the following change to your CSS:

.post .post-info span{
    display: block;
    max-width: 90%;
    margin: 0 auto;
}

JS Fiddle demo.

Reasoning:

display: block; allows a width (and therefore max-width) to be assigned to the element.
max-width: 90%; to ensure that the element's maximum width is less than the width of the parent, allowing some space between the content of the element and the borders of the parent.
margin: 0 auto; horizontally centres the element within its parent.

A lot of white spaces between images may be. Not good. They all must be everywhere one size — Green, Aug 23 '12 at 05:23

score 0 · Answer 3 · answered May 21 '12 at 20:22

#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    max-width: 200px;
    overflow-x: hidden;
}

This solution will not however work in IE6 I think.

score 0 · Answer 4 · edited Nov 15 '17 at 22:53

0

You could set the div .post width to 100%, and .post-info width to 100%:

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

I believe this will make the div .post-info relative to its parent div.

edited Nov 15 '17 at 22:53

jtenclay

249
4
6

answered May 21 '12 at 20:24

soberga

289
7
21

score 0 · Answer 5 · answered Feb 04 '19 at 11:25

0

I had the same issue as the OP and the solution for me was to set

box-sizing: border-box;

I couldn't repro the behaviour in a fiddle, but just adding the above to the inner element resolved it in my app, so I hope that helps someone.

answered Feb 04 '19 at 11:25

user2728841

1,333
17
32

score -1 · Answer 6 · edited Jul 16 '12 at 14:04

-1

Try the css property max-width

edited Jul 16 '12 at 14:04

Wouter Dorgelo

11,770
11
62
80

answered May 21 '12 at 20:19

Steve Binder

2,270
1
14
6

I know that but if i set a max-width property the text will not be the same width as the content in the parent div if it is greater – Yusaf Khaliq May 21 '12 at 20:21

stop div resizing parent div using css

http://jsfiddle.net/ETkkR/

my css

Edit

6 Answers6

Linked