CSS Liquid Layout

[StroiX]

Hi..

 

The issue that I am having is that, when I make my browser window smaller horizontally, the 'sidebar' div drops near the bottle of the screen but still stays on the left side.

 

HTML Code:
<div id="container">
<div id="content">
<div class="content-box">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="cornerBoxInner">

<div class="main">
<h2>Test</h2>
<p>Test</p>
</div>

<div class="sidebar">
<p>hiii</p>
</div>

<br style="clear: both;" />
</div>
</div>
</div>
</div>

 

CSS CODE:
/***** Main Template *****/

* { margin: 0pt; padding: 0pt; }

html {
    min-width: 945px;
} /*IE7*/

body {
    color: #393733;
    margin: 0;
    padding: 0 20px;
    text-align: center;
    background: #e5ecf3;
}

#container {
    text-align: left;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;

}

#contents {
}

.main {
width:69%;
float:left;
padding:10px;
}

.sidebar {
border:1px solid #F00;
float:right;
width:310px;
}

/***** Content Box *****/
.content-box { position: relative; background: #fff; width: 100%; margin:-25px 0 0 0;}
.corner { position: absolute; width: 10px; height: 10px; background: url('../_images/corners.gif') no-repeat; font-size: 0%; }
.cornerBoxInner { padding: 0px 20px 20px 10px; }
.TL { top: 0; left: 0; background-position: 0 0; }
.TR { top: 0; right: 0; background-position: -10px 0; }
.BL { bottom: 0; left: 0; background-position: 0 -10px; }
.BR { bottom: 0; right: 0; background-position: -10px -10px; }

 

Any help with this is greatly appreciated!  Thank you.

[sKunKbad]

I think you need to declare a width for #container, not just a max-width.

[Hybride]

Also, don't use pixels for a container (unless it's a left/right side, not the middle) if you're using a liquid - that also gives the container an exact width rather than a liquid.

[StroiX]

Thanks for the suggestions, I might have not understood correctly but I did try however, and did not get what I was wanting to achieve.

 

Please take a look at the web site: http://alturl.com/di3p

 

You can see the red box on the right drop to the bottom as the window is re-sized to a smaller window.  I want to leave the web site the way it is..  the "liquidity" of it, just do not want the red sidebar to drop near the bottom.

 

Please provide working example of CSS if possible so I do not misunderstand and do it incorrectly in CSS.

 

Thank you once again!

[SuperBlue]

Its fine to use pixels for min and max widths.

 

Add a width in percentages like below, and then throw in a min-width and max-width to suit your design goal.

div {
  width: 75%;
  min-width: 600px;
  max-width: 2028px;
}

 

[StroiX]

I tried the above in the #container div and it did give me working results.  Could you please try this on your browser and see how it works out of you?

[SuperBlue]

It seems to work just fine in the latest versions of IE and Firefox, which are my current browsers.