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 write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How do I use a variable to get CSS info on an element?

    How to make text on the same line different font without using extra divs?

    How to adjust the position of specific elements/items/content on a page with CSS

    jQuery - How to animate text simultaneously to color change transition

    How to exclude inner webelement with css selectors?

    Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

    How to override css property?

    How to keep nav menu highlighted after click using js in sidebar

    How can I add background color to CSS triangles?

    How to make image thumbnail look like video with CSS

    How to spread a div to cover available space in a parent container?

    How to neutralize CSS definitions without overriding

    How to make a wrapper for HTML, CSS and Javascript Pages in iOS

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    CSS/JQuery: A scrolling, overlay div and a centered layout - how to get it in a somewhat fixed position?

    How to fix header cannot sticky in wordpress?

    Background-Image does not show properly on IE8

    How do you name these tags in CSS? [closed]

    How to center my main navigation bar on my site with css?

    How to transform a button into this styled button

    How to add a background image inline style to link tag Rails

    How do three.js transforms and CSS3 3D-transforms correspond?

    How do I increase the height of a menu divider in a navigation?

    how to center text AND have max width of 800px in CSS?

    jQuery glowing animations : how to improve?

    How to detect browser support for :after and :before

    How to position a background image like wanderfly.com?

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?