Pure CSS dynamic 2-column picture/text - html

Question

My layout is like this:
<section class="container">
<div class="picture-div">
<figure><img src="blah"></figure>
<figure><img src="blah"></figure>
...
</div>
<div class="text-div">
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
...
</div>
</section>
Both the picture-div and the text-div have dynamic width according to their content. The picture-div has a min width of 500px and the text-div has a min width of 300px.
I want a dynamic effect matching the following rules:
The element following the container should have float both cleared and the content fully below the container element.
If the viewport width is not enough, the horizontal scroll bar should always be placed on the HTML element instead of the container, picture-div, or the text-div element.
If the container width exceeds (picture-div width + 300px), the text-div floats at the right of the picture-div and takes whole left space of the container. (eg. if container width is 2000px and picture-div width is 800px, then picture-div takes 800px and text-div takes 1200px.)
If the container width doesn't exceed (width of picture-div + 300px), the text-div doesn't float and both the picture-div and the text-div take full container space. (eg. if container width 1000px and picture-div width 800px, then both picture-div and text-div take 1000px)
Is there a pure CSS solution for this?

Answer 1

I'm kinda bad with syntax far as what you might be asking for, but thought I'd give it a shot to see if you might be able to follow this after in order to fix your issue.
It sounds like you want a responsive layout that will respond to maximum screen width and do specific things at each max or min width that the window shows. The floats would just be different classes that you could add in, I normally just use class="fl" and include that in my css. Here's a small example of what I have that pretty much does what I think you're asking.
<div id="panel-1-index">
<div class="row">
<div class="large-4 columns">
<img src="your-image.gif"/>
</div>
<div class="large-8 columns">
<p>Your Text Content</p>
</div>
</div>
</div>
Then your css would associate each of the class="large-* columns" as a certain width percentage. For the example above it would be:
.large-4 { position:relative;width:33.333% }
.large-8 { position:relative;width:66.667% }
The row and columns css properties will essentially just provide you with specific padding parameters and 100% width. After that, it would just involve you adding media queries that would give the classes different behaviors depending on screen widths.
The example I gave you is from use with my own site utilizing Zurb Foundation css framework. The first part of your question I couldn't really answer cause I have no idea - but the rest can be accomplished by looking at Foundation framework styles that shoot for responsive design. In my very limited experience, I would also suggest not using pixels for your measurements and instead go with percentages or em measures for better responsive design.
Let me know if I was far off, or just trying to tell you something you already know :)