Css sets left fixed and correct fluid layout

Question

I need to make such a layout with html and css: the left width is static for 250 pixels on the right - liquid, for the rest of the screen (100% -250 pixels)

I try (I use sass):

.wrapper{ width:100%; margin: 0 auto; .left{ width:250px; float:left; } .right{ float:right; width:100%; margin-left: 250px; } } 

So how can I solve this problem?

Answer 1

This is pretty simple: http://jsfiddle.net/joplomacedo/ExHzk/ If you don't see the fiddle, here is the html and css.

HTML:

 <div class="fixed"></div> <div class="fluid"></div>​ 

CSS

 .fixed { float: left; width: 250px; } .fluid { margin-left: 250px; } 

Besides
I left the wrapper. This is not very important for demonstration. One question: if you give the wrapper a width of 100%, then what is the default: 0 auto? And do you really need to specify the width?

Answer 2

Try this code if I understand well:

 .wrapper{ width:100%; margin: 0 auto; .left{ width:250px; float:left; } .right{ float:right; width:100%; margin-right: 250px; } } 

Answer 3

You can simply remove float:right on .right, for example:

 right{ width:100%; margin-left: 250px; }​ 

http://jsfiddle.net/RfHqX/

Note that I did not use the SASS style.

Answer 4

use margin not float for right div

 .wrapper{ width:100%; margin: 0 auto; } .left{ width:250px; height:100%; float:left; background:#f00; } .right{ height:100%; margin-left: 250px; background:#0f0; } 

Demo