html - 2 divs aligned side by side, how to make right div fill width 100%?

Question

I'm wondering what the best way to go about doing this is...

I have 3 divs:

• a div#container with width=100%; that holds 2 inner divs

• a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)

• an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)

  #container {
     width:100%
  }
  
  #inner_left {
      display:inline-block:
      max-width:200px;
  }
  
  #inner_right {
      display:inline-block;
      width:100%; 
  }
  

The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...

Any help for a CSS noob is much appreciated!

question from:https://stackoverflow.com/questions/4941913/2-divs-aligned-side-by-side-how-to-make-right-div-fill-width-100

Answer 1

I haven't really seen a good solution in the answers here. So I'll share mine.

Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.

Example:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}