Responsive Div Content

0
votes

Goal: I'm trying to style content to be responsive to the dimensions of it's parent div.

Required Behavior

  • Depending on the div container the content would react to it and scale appropriately.
  • I need content to always be centered.
  • Move a container up when there's enough room to fit 2 containers horizontally (example JsFiddle: card-container2 shows the image and card info side by side but the button is still centered.)

Conditions I must meet:

  • I am not allowed to use any media Queries.
  • I am not allowed to use any JavaScript
  • It must ALL be done in html and CSS.
.product-image-area {
text-align: center;
width: 100%;
max-width: 180px;
display: inline-block;
}

JsFiddle

EDIT: Due to the complexity of my question I shall illustrate this monster of a task I've been given:

Image: http://i63.photobucket.com/albums/h123/Damian6969/Stack_EXample_zpsmskwkba0.png

So my html code in the black rectangle (let's call this the "inner" container) will always be the same.

This inner container will always have a width of 100% and height of 100%.

The orange container (the "outer" container) will change in dimensions.

I need my inner container be responsive.

...I don't know if I can simplify this anymore guys. Another example is responsive code in general. But instead of a viewport, you have only an outer div.

2
htmlcssresponsive-design
Welcome to SO. Please reduce the complexity of your question to one point. As it is, it's not clear what you're asking. - isherwood
Also, HTML with a bunch of inline styles will get you groans galore. Please take the time to prepare clean markup by moving styles to the stylesheet, or at least an embedded style tag. - isherwood
I hope my edits made my question more clear. Fixed up JsFiddle too. Thanks! - Damian Burdzy
Much improved, but still too broad. You have a list of requirements but you don't say which single item is tripping you up. Also, don't think "cascade" is the right term here. Do you mean wraps to a new line? - isherwood

2 Answers

2
votes

Create an outer container with

text-align: center;

Then give your inner containers 

display: inline-block;

See Fiddle

0
votes

I'm still not exactly sure what you're trying to fix, but here's what I did to tune things up:

.c-product-card {
    ...
    padding: 10px;
    text-align: center;
}
.card-info {
    ...
    text-align: left;
}

Demo