1

I want to create two div elements, the left side has a fixed width(ex: 200px) and the right side has a dynamic width(ex: 100%).

I have created, but does not work as required.

HTML

<div id="header">Header</div>
<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

CSS

div#header {
    height:70px;
    border:1px solid;
}
div#left {
    width:200px;
    height:500px;
    float:left;
    border:1px solid red;
}
div#right {
    width:100%;
    height:500px;
    float:right;
    border:1px solid green;
}

Also you can see the demo on JSFiddle

Lion King
  • 32,851
  • 25
  • 81
  • 143
  • I don't understand, they cannot fit like that. the 100% is saying you want it the full size of the parent container. Do you want them to overlap or do you want it to take all remaining space? – aaron-bond May 14 '14 at 11:16
  • you can enclose both in the same div, float them both left, set the width of the left div and just let the right one expand as much as it needs (don't set a width for it). if you need a width for the second one as well, i would suggest javascript and just calculate and set the width on page generation – Catalin Deaconescu May 14 '14 at 11:16
  • @Askanison4 Look at our answers. – Ruddy May 14 '14 at 11:17
  • @Askanison4: Certainly, I want it to take all remaining space. – Lion King May 14 '14 at 11:19

4 Answers4

1

Remove the float of the right element. See the demo here

div#right {
    height:500px;
    border:1px solid green;
}
Arko Elsenaar
  • 1,689
  • 3
  • 18
  • 33
0

Take the float away on the right...

DEMO

div#right {
    width:100%;
    height:500px;
    border:1px solid green;
}
Ruddy
  • 9,795
  • 5
  • 45
  • 66
  • @ArkoElsenaar I know that but it don't hurt to have it there. Just showing the OP what they need to do with the float. I'm sure they can work out that `div`s are `block` elements. – Ruddy May 14 '14 at 11:20
0

use calc css property calc(100% - 200px). For all new browsers support you can add

width:calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -moz-calc(100% - 200px);

http://jsfiddle.net/Tp7q3/1/

html

<div id="header">Header</div>
<div id="container">
    <div id="right">Right</div>
    <div id="left">Left</div>   
</div>

css

div #container{
    width:100%;
    height:500px;
}
div#header {
    height:70px;
    border:1px solid;
}
div#left {
    width:200px;
    height:500px;
    float:left;
    background-color:green;

}
div#right {
    width:calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    height:500px;
    float:right;
   background-color:red;
}
faby
  • 7,394
  • 3
  • 27
  • 44
  • Wouldn't recommend this one, it does work but not well supported (order browsers) [**see more here**](http://caniuse.com/#feat=calc) – Ruddy May 14 '14 at 11:22
  • Yes, I know. It is a new nice feature that work generally with new brosers (IE10+, FF4+ , Safari 6+, Chrome 19+). I wanted to show a new workaround. – faby May 14 '14 at 11:30
  • `calc` is very good, but the problem is does not supported in older browsers. – Lion King May 14 '14 at 11:46
0

On the right div element:

1) Remove float (as others have mentioned) and

2) Add overflow:hidden or overflow:auto to create a new block formatting context

(For more info about this, see How does the CSS Block Formatting Context work?)

(Without step 2 - the right div still takes up 100% width which is why you don't see the left green border)

Updated FIDDLE

Community
  • 1
  • 1
Danield
  • 121,619
  • 37
  • 226
  • 255