Combining fluid and fixed elements

As a first quick tutorial, I want to demonstrate an easy way to combine a fluid and a fixed element on the same row. This is something that is encountered more and more often, now that we constantly design responsively for the mobiles and it is easy to achieve with only a couple of css rules.

The old way

A really easy way to achieve this is using tables. You just assign a fixed width on one column and the browser takes care of the width of the other column by itself. Your code would look something like this

<table style="width: 100%;">
   <tr>
      <td>Fluid column</td>
      <td style="width: 300px;">Fixed Column</td>
   </tr>
</table>

(see that inline css style? try to avoid that!)

Now this method has 2 serious drawbacks. First of all, it’s non semantic. Tables should be using to present tabular data and not create your layout for you. And second, if you need a second row, with a different fixed width, you need to define another table. Oh and the code is really really ugly.

The better way

Now, there is a better way to do that. The theory behind this method is float both elements, give the one a fixed width, and give the other full row width and enough negative margin, so that it can “pull” the fixed element in the same line, essentially covering part of it. Of course, that part that would be covered should not have content inside it, so we’ll use some padding to make sure of that.

Now, lets start with some code. To make it a bit more practical, lets suppose we are trying to create a row where we have a fixed-width description for an element and the form element itself, which covers the rest of the width. And the example will have the fixed element to the right side, but it is pretty simple to reverse it. First the HTML.

<div class="row with-description clearfix">
   <div class="fluid">
       <input type="text" value="" placeholder="here is your fluid element" />
   </div>
   <div class="fixed">
       And here is your fixed description
   </div>
</div>

As we can see, this is a lot cleaner than the table implementation earlier. We have a row container, and 2 elements, with the classes .fixed and .fluid. Nothing much to discuss here, everything is pretty straight-forward. And now the CSS:

.row, .row input {
   width: 100%;
}

.fluid {
   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box;
   box-sizing: border-box;

   width: 100%;
   float: left;
}

.fixed {
   float: right;
}

.with-description .fluid {
   margin-right: -300px;
   padding-right: 310px;
}
.with-description .fixed {
   300px;
}

Now first of all, we need to define the containers width, which we set to 100%. The .fluid and .fixed elements are of course floated. And the fluid has 100% width as well. Note the box sizing here, which ensured that even if we add padding to the .fluid element, the width will still be 100% and not go over it.

And now, we have the .with-description class. This is where the actual numbers of the fixed class are defined, so you could have multiple of these classes. For example .with-description keeps a 300px fixed column, because we need text in there, but you could have a .with-thumb class keeping only 100px for a thumbnail. How does it work? Of course .fixed element is missing it’s width, so we add it. And we give the exact same negative margin on the .fluid element to pull the 2 elements on the same line. Notice that the padding is not exactly 300px. You can put more if you want to leave a gutter between the 2 elements, and in this case we leave 10px.

And that’s it! You can play with the numbers a bit, or can even move the fixed column to the left pretty easily. And this is definitely a lot cleaner than the table implementation. However, this only works on IE8+, because of the box-sizing usage. To make it work in older browsers, you simply need a wrapper around the .fluid class and putting the padding there instead.

You can find and download the code here

10 Responses to Combining fluid and fixed elements
  1. Bryan Reply

    Woooww, awesome trick :D

  2. Personal Injury Attorneys in Peoria IL Reply

    This is my first time pay a visit at here and
    i am truly pleassant to read all at one place.

    my webpage; Personal Injury Attorneys in Peoria IL

  3. Work Accident Lawyers Peoria IL Reply

    I believe that is among the most important information for
    me. And i am happy studying your article.
    However want to observation on few common issues, The web site style is wonderful, the articles is really excellent :
    D. Good process, cheers

    My page Work Accident Lawyers Peoria IL

  4. all natural plant based protein powder Reply

    Fine way of explaining, and pleasant piece
    of writing to get facts concerning my presentation focus, which i
    am going to deliver in university.

    my web page: all natural plant based protein powder

  5. Work In Injury Lawyer Reply

    Hi my family member! I wish to say that this article
    is awesome, nice written and come with approximately all important infos.
    I would like to see extra posts like this .

    Here is my weblog: Work In Injury Lawyer

  6. Celia G. Swinney Reply

    Right now it looks like Expression Engine is the preferred blogging platform available right now.
    (from what I’ve read) Is that what you’re using on your blog?

    Feel free to visit my site: Celia G. Swinney

  7. Carly E. Worek Reply

    It’s amazing to visit this website and reading the views of all mates about this article, while I am also eager of getting experience.

  8. Carly A. Mahon Reply

    No matter if some one searches for his essential thing, therefore
    he/she wants to be available that in detail, so that thing is
    maintained over here.

  9. supports 26 pound flexi Reply

    Every weekend i used to pay a quick visit this web site, as i want enjoyment, for the reason that
    this this website conations genuinely pleasant funny stuff too.

  10. Albertina Reply

    What i do not realize is actually how you are not actually much more well-favored than you might be right now.
    You’re very intelligent. You realize therefore significantly on the subject of this topic, made me personally believe it from numerous numerous angles.
    Its like women and men don’t seem to be interested unless
    it’s something to accomplish with Woman gaga! Your own stuffs great.
    Always deal with it up!
    website – Albertina -

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>