Liquid margins with CSS/JS

Question

I try to create following: I have centered block width min and max width and I need to place content on left and right of it. When block's width is equal to max width, content on left and right is visible (left and right content represented by shadows):

ex 1 http://dev.graymur.net/example/1.jpg

when browser window is resized to narrower values, central block and left/right blocks shrink proportionally:

ex 2 http://dev.graymur.net/example/2.jpg

and when window width is equal or less min-width of central block, left/right block disappear completely and only central block is visible:

ex 3 http://dev.graymur.net/example/3.jpg

I don't think that this can be achieved with pure HTML/CSS and I can't come up with javascript solution.

Help, please?

UPDATE

The description above might be not clear, in simpler words: I try to create fluid margins for my central block: 0 when bloks is at it's min width.

by "content" for the left and right sides, do you simply mean a background image? — Shmiddty, Dec 18 '12 at 18:50
jsfiddle.net/UNLQ6 - this is centered block over body with background image, I need two different blocks on left and right, where I can put any content, please, read update to my post — Сергей Репков, Dec 18 '12 at 19:11

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

There's not much you can do about the content on the right side. When the window shrinks to be smaller than the width of the content, the content slides offscreen to the right. However, you can make sure your left content doesn't get lost by wrapping everything in a container and setting the min-width on that parent.

There are a number of possibilities

Option 1: Static widths

Option 2: Semi-fluid widths

Option 3: Completely fluid widths

Code for Option 1:

html

<div id='content'>
  <div class='border-content'></div>
  <div id="center"></div>
  <div class='border-content'></div>
</div>

css

#content {
  min-width: 400px;
  border: 3px solid #9ef;
}
#content:after {
  display: block;
  clear: both;
  content: '';
}
.border-content {
  float: left;
  width: 40px;
  height: 200px;
  background: #eee;
}
#center{
  float: left;
  width:300px;
  height:200px;
  background:url(http://placekitten.com/300/200) no-repeat;
}

Liquid margins with CSS/JS

UPDATE

1 Answers1

html

css