How to apply remaining width to a div in the middle of 2 other divs


Tags: html,css

Problem :

I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.

#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green; 
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}

Edit



Solution :

Classically, this would look like this:

CSS:

#div1 {
    float:left;
    width:400px;
    height:200px;
    background-color: gray;
}
#div2 {
    margin-left: 400px;
    margin-right: 400px;
    width:auto;
    height:200px;
    background-color: silver;
}
#div3 {
    float:right;
    width:400px;
    height:200px;
    background-color: green;
}

HTML:

<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>

DEMO: http://jsfiddle.net/NicoO/5AJkn/

P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.


    CSS Howto..

    How Does CSS Opacity Work When Adding Class?

    How to copy a CSS style from a website for re-use

    how to edit input type data with CSS [duplicate]

    How do I add background color to just the width of centred text?

    how can I use CSS to hover over an entire list element including the bullet?

    css ul and li - multiple spans in each li and how to line up the spans vertically

    How to remove top border for one element in a list

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    How to access lower children using > operator?

    How to toggle animate with css display:none

    how to add border to CSS only speech bubble

    How to make long Bootstrap dropdown menus vertically scrollable?

    How to programmatically ungroup CSS selectors?

    How to use @Media queries

    How do nested vertical margin collapses work?

    Show button after login

    How to enable CSS editor features in VS 2012?

    How to achieve this complex layout with CSS?

    Ask Toolbar preventing Bootstrap Modal to show

    How to make box light up in navigation bar - CSS

    How to enable real time CSS editing in chrome?

    How to render css file from url in to the webview in android

    How do I change the border lines COLOUR on the table view

    How to close the menu after click third layer menu item

    How to stop word-wrapping in a CSS Dropdown menu.

    How to align divs right and left while using the CSS ghost element technique for vertical centering?

    How to increase spacing between dt tags

    How does the CSS position on a div affects position of sibling division?

    How to center-zoom with responsive images without affecting the image size?

    How does browser layout adjacent div to a floating div