0

I'm trying to stretch my parent div width to the others div contents without success. My "outer-container" need to stretch to his content:

Here is a fiddle example of my problem (the "outer-container" don't stretch when I resized the web browser): http://fiddle.jshell.net/tj8p5/

Sorry for my english, I'm french

BumbleB2na
  • 10,723
  • 6
  • 28
  • 30
lolo
  • 237
  • 4
  • 17

1 Answers1

0

I've updated your fiddle and had to make a few assumptions for you:

  • Your headers and footers should have probably been contained within your outer-container so that they maintain a fluid width.
  • Removed all of your "width:100%" from your containers because this is automatic with div elements (div elements use display:block which already has 100% width).
  • Your bbq-container had too large of a min-width, so I reduced that amount.
BumbleB2na
  • 10,723
  • 6
  • 28
  • 30
  • Thank you for your quick answer.However, I think I didn't correctly expressed my self about my problem.I want that my "outer-container" stretch automatically to the width of my "menu-container" + "isotope container". In order to have my "menu-container" + "isotope-container" always centered in my page without any lateral gaps. Actually I have a purple gap on the right. My aim is to don't have this gap... My "isotope-container" (in purple) don't stretched to my "container" width. I don't know how to do this. And I think this is because of that my "outer-container" don't strecth to his content. – lolo Feb 20 '13 at 16:15
  • You should have mentioned isotope in your question, and you should have directed me to the isotope layout demos page to help explain what you're trying to do that the demos do not: http://isotope.metafizzy.co/demos/layout-modes.html – BumbleB2na Feb 20 '13 at 16:28
  • For the isotope plugin, I have already custom it in order to have my "container" stretch automatically to the elements (thanks to this : http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html). This part works great. You can see the blue container that rezise automatically and fit to isotope elment. However I don't know how to fit the width of the parent div to "isotope-container" + "menu-container". Thank you for your answere. – lolo Feb 20 '13 at 16:35
  • I see what you mean. I think you'll need to hook in to an isotope resize event and then use jquery to change the width of your page elements using animation, just like isotope does when it rearranges columns. That's why I think this is a question regarding isotope rather than CSS. – BumbleB2na Feb 20 '13 at 16:40
  • Ok. So if I correctly understand. I can't find the solution with css. Because the isotope width can't be know because it's control by jquery. So I just need to set in a var and record my container width with jquery! And to apply it to the concerned container that I want to dynamically rezised. Thanks! – lolo Feb 20 '13 at 16:47
  • Well, yeah. Or, take a look at related questions such as http://stackoverflow.com/questions/8773508/jquery-isotope-centered-and-fluid-responsive?rq=1 – BumbleB2na Feb 20 '13 at 17:04
  • I tried this, but it don't works :$(window).resize(function() { var isotope = $('#container').width(); var menu = $('#menu-container').width(); var value = (isotope + menu + 20); $('#outer-container').width(value); }); – lolo Feb 20 '13 at 17:37