thedeepfield thedeepfield - 6 months ago 11
CSS Question

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

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

I have 3

div
s:


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

  • 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!

Answer

Have a look at "liquid layouts" it can describe what you're talking about.

You're probably looking for this one.

In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)

The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.

Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.

I'll also include it below:

HTML

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

CSS

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
Comments