2 column div layout: right column with fixed width, left fluid

by

Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn’t have a width and no float, it will be flexible 🙂

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

Example here: http://jsfiddle.net/jackJoe/fxWg7/

More Related Contents:

  1. How to draw this chart in html and CSS? [closed]
  2. Change a HTML5 input’s placeholder color with CSS
  3. Canvas is stretched when using CSS but normal with “width” / “height” properties
  4. Remove padding from columns in Bootstrap 3
  5. How can I make an svg scale with its parent container?
  6. Is there a way to word-wrap long words in a div?
  7. Format text in a ?
  8. Is float for layout bad? What should be used in its place?
  9. Size of HTML5 Canvas via CSS versus element attributes
  10. CSS :before on inline SVG
  11. How to create equal height columns in pure CSS [duplicate]
  12. How do I right align div elements?
  13. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  14. How to make a element expand or contract to its parent container?
  15. Webkit CSS to control the box around the color in an input[type=color]?
  16. How to center absolute div horizontally using CSS?
  17. scale HTML5 Video and break aspect ratio to fill whole site
  18. HTML not loading CSS file
  19. element not working in Internet Explorer 11
  20. How to link a CSS file from HTML file?
  21. How can I send an inner to the bottom of its parent ?
  22. Split Div Into 2 Columns Using CSS
  23. SPAN vs DIV (inline-block)
  24. how to rotate text left 90 degree and cell size is adjusted according to text in html
  25. Set div height equal to screen size
  26. Align vertically using CSS 3
  27. Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
  28. How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/
  29. Is there a way to style HTML5’s range control?
  30. print page count with total number of pages using css

Leave a Comment