Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Css set left fixed and right fluid layout

Tags:

html

css

sass

I need to do with html and css such layout: left width is static for 250px right is fluid, for other rest of screen (100%-250px)

I try so(i'm using 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?

like image 471
brabertaser19 Avatar asked Dec 26 '22 15:12

brabertaser19


1 Answers

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

HTML:

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

CSS:

.fixed {
    float: left;
    width: 250px;
}

.fluid {
    margin-left: 250px;
}

Aside
I left out the wrapper. It's not really relevant for the demonstration. One question though: If you're giving the wrapper a width of 100%, what's the margin: 0 auto for? And do you really need to specify the width?

like image 185
João Paulo Macedo Avatar answered Jan 13 '23 12:01

João Paulo Macedo