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


Tags: html,fill,alignment,css

Problem :

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!



Solution :

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;
}

    CSS Howto..

    How to calculate gradient color replacements?

    How to sharpen an image in CSS?

    CSS flexbox: How to get column items to fill height

    How can I achieve this transparency effect using css?

    How to reset a jquery function on-the-fly

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to reduce this css code [duplicate]

    How to check “IF any one or all buttons are clicked” in jquery

    How to make element stay in the same position using css?

    How to display two columns of blocks with CSS

    How to get tr:nth-child which has css applied

    How to Decrease Image Brightness in CSS

    How to change first word color through css [duplicate]

    How do I stop css pushing
  • to the right?
  • How do I align two non-fixed width divs in the center of the browser screen?

    How to apply CSS3 rendering for optimal performance

    Show container only if text inside it

    How to align navbar to center with css

    How to make specific checkbox items bold (not all) via CSS?

    Is it possible to apply css transitions on svg nodes? If yes, how?

    How to create a three-column website background using CSS?

    How to display a css animation in the center of the screen

    ng-show/ng-hide breaking CSS animations

    How to animate back after click with CSS?

    How to create border bottom with 2 different color?

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    how to apply transform rotate all browse in inline css using jquery

    How to base the height of a

    on whether or not its parent div has an image

    How do I move the background image of a DIV based on the scrollbar movement?

    How to add Bootstrap to Fullpage.js