0

I'm trying to resize a parent containter based on it's content. Currently, it is using percentage for the width. Unfortunately, the image container does not resize based on it's content.

Is there a way to resize the child container based on it's parent's width (including contents) or have the parent to resize instead? Or should the child content(i.e. the images) be of varying size rather than a fixed size? Many thanks.

JSFiddle link

#content {
margin-top: 58px;
margin-right: 1.0416667%;
/* 10 div 960 */
float: right;
background-color: #dedede;
width: 72.7083333%;
/* 698 div 960 */
}

#gallery_container {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    background-color: #302200;
}
#gallery_container ul li {
    display: inline;
}
#gallery_container ul li img {
    padding-top: 10px;
}
zan
  • 594
  • 2
  • 8
  • 20

2 Answers2

2

When you want a parent container to automatically match the size of its contents, you basically have three options:

1) In HTML, you can use a TABLE. Tables already have this kind of functionality built-in, and they work everywhere. Tables also have the ability to do combinations of fixed-sizes and dynamic-sizes easily.

2) In CSS, you could set "position: absolute" or "float" on the parent container. This will probably require other adjustments to your structure too, but the parent container will automatically "shrink-wrap" to the size of its contents.

3) In Javascript, you could calculate the size of the contents and then set the parent's size. However, this tends to be quite slow, since you need to calculate the sizes of the contents, which tends to be recursive and requires a lot of DOM queries.

If this does not answer your question, please clarify by telling us what is your desired behavior in the JSFiddle demo that you mentioned. Right now, I'm not exactly sure which DIV ID you really want to change the functionality of, and on top of that, I'm not sure how you want it to change.

likebike
  • 1,167
  • 1
  • 11
  • 16
  • Thks likebike and MilkyTech for the answers. Currently when the window is resized, the content container has excess spacing ( background in grey ), whereas the gallery container is sized correctly (background in brown). – zan May 04 '14 at 03:26
  • Thanks for the clarification. In your JSFiddle, you have defined "width: 72.7083333%;" on div#content. Since you have already defined that DIV as a 'float', you just need to remove that 'width' definition, and the container will auto-size itself to match the size of its contents. Does this answer your question? :) – likebike May 04 '14 at 11:05
  • Hi likebike, I've tried removing the width definition or setting it to max-width instead, but the images will collapse to only 1 column :-( Looks like I got to read up more on Masonry and fluid layouts. Thks for your help :-) – zan May 04 '14 at 14:21
  • @zan, your design is bumping into some inherent limitations of CSS. Rather than trying to fit the parent to the size of the children, it is easier to think in a "top-down" manner, and define the size of the parents, and then allow the children to fit inside of them. You still won't be able to achieve your desired effect -- you will need to create a new design and just accept the limitations of CSS and HTML. The only way to achieve exactly what you are describing is to use Javascript, which is slow and full of pitfalls, especially for cross-browser support. – likebike May 05 '14 at 02:38
  • what exactly are you trying to do with the javascript? Is this updated fiddle [http://jsfiddle.net/P9S2z/23/](http://jsfiddle.net/P9S2z/23/) what you are looking to do? – MilkyTech May 05 '14 at 19:17
  • even better, resize the images with the page: [http://jsfiddle.net/P9S2z/26/](http://jsfiddle.net/P9S2z/26/) – MilkyTech May 05 '14 at 19:43
  • The jsfiddle examples by Chris M are nice compromises and probably the best options for a real website. On the other hand, none of them really fits the parent container to the size of the child contents. As likebike mentioned, the most accurate way to do this (when using JS to reflow your images as you are) is to use javascript, but that can be quite slow. I upvoted likebike's answer as the most accurate answer to the "resize parent container" problem, but in practice a solution like Chris M's is probably most practical (especially if this page needs to render on a mobile device). – rsanden May 21 '14 at 10:17
0

remove the javascript then remove the width attributes from the img tags in the hmtl and add/change css as follows for a fluid resizing gallery:

ul {
    margin:0;
    padding:0;
    list-style: none;
}
#wrapper {
    width: 100%;
}
#navigation {
    width: 100%;
}
#sidebar {
    padding-left: 1.0416667%;
    margin-left: 1.0416667%;
}
#gallery_container {
    margin: 0px auto;
    text-align: center;
    width: 90%;
}
#gallery_container img {
    width: 27%;
    margin: 2%;
}
MilkyTech
  • 1,919
  • 2
  • 15
  • 39