Left div liquid width, right div width in px

Question

I want to make a HTML layout where the left div adjusts to the window size and the right div has a fixed size. How do I have to set the width of the left one? I cannot do 70% and 30% because the right div has got a fixed size.

jsfiddle

HTML

<div id="left"></div>
<div id="right"></div>

CSS

.left{
height: 100%;
width: 300px;
background-color: red;
float: left;
}

.right{
height: 100%;
width: ....;
background-color: black;
float: right;
}

Like this http://stackoverflow.com/questions/8094787/fixed-width-div-on-right-fill-remaining-width-div-on-left?rq=1 — gotohales, May 29 '13 at 20:07

Adrift · Accepted Answer · 2013-05-30T00:46:31.650

0

One option is to use the calc() function, although it isn't supported below IE 9 and you need to include the -moz and -webkit prefixes for FF 15 & Chrome 25 and below. There is also almost no support for it in mobile browsers as @cimmanon pointed out in the comment below.

#left{
height: 100%;
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
background-color: red;
float: left;
}

http://jsfiddle.net/j73th/1/

You can also give the #right div a negative right margin equal to the width of the #left div:

http://jsfiddle.net/j73th/3/

edited May 30 '13 at 00:46

answered May 29 '13 at 20:08

Adrift

58,167
12
92
90

Wow, you are COOL @ Adrift! – kaputu May 29 '13 at 20:12
1

your code is hiding the text and calc is not supported by all browsers – Rohit Agrawal May 29 '13 at 20:26
`Calc()` is also not supported by a vast majority of mobile browsers. It's one thing when support for properties like border-radius is missing because it just impacts aesthetics. Lack of support for `calc()` significantly impacts the ability to use the website. – cimmanon May 29 '13 at 20:56

score 0 · Answer 2 · answered May 29 '13 at 20:13

0

DEMO FIDDLE

Note- I am changing the html placing of right and left div purposely

html code-

<div id="right"></div>
<div id="left"></div>

css code-

body, html{
height: 100%;
width: 100%;
margin: 0; padding: 0;
}

#left{
height: 100%;
margin-right:102px;
background-color: red;
} 

#right{
height: 100%;
width: 100px;
float:right;
background-color: black;
}

answered May 29 '13 at 20:13

Rohit Agrawal

5,372
5
19
30

Shouldn't have to change the structure of code to achieve presentation. – crush May 29 '13 at 20:16
He shouldn't need to change the order of those elements simply to change the way they are presented on the web page. CSS or unobtrusive Javascript should handle that exclusively. HTML is structure, not presentation. It's a document. – crush May 29 '13 at 20:19
i understand but I am afraid it is needed to do so and if the html is under development it can be done – Rohit Agrawal May 29 '13 at 20:22
@crush **Do not threaten to 'report' people**. Flag or don't flag. But don't make threats. – Andrew Barber May 30 '13 at 01:41

score 0 · Answer 3 · answered May 29 '13 at 20:39

0

You could use absolute positioning on the #left element.

Fiddle: http://jsfiddle.net/j73th/10/

#left
{
    position: absolute;
    left: 0;
    right: -100px;
}

#right
{
    float: right;
    width: 100px;
}

answered May 29 '13 at 20:39

crush

16,713
9
59
100

Left div liquid width, right div width in px

3 Answers3