Split screen in 2 divs and set second width with remaining space in css?

Question

I have 2 block-inline divs.

I don't wan't to specify the width of the first one but, I would like the second takes 100% of the remaining space. The container of the two divs take 100% of my screen.

It seems to be possible using jQuery to determine the width of the first div and to set the second value, but I would like to do it in pure css.

How can I do that ?

so the 1st div will have the width based on the content am i right?? — Bert, Feb 28 '12 at 02:59
Exactly. The left one is based on the content. The right one must have the remaining size. — Pier-Alexandre Bouchard, Feb 28 '12 at 03:00
possible duplicate of [Make a div fill the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space) — Purag, Feb 28 '12 at 03:06
You'll have to specify a width to one of the divs at a minimum using either percentages or pixels. — Scott, Feb 28 '12 at 03:07

score 7 · Accepted Answer · edited Mar 28 '16 at 18:48

7

div.box {
  background: #EEE;
  height: 100px;
  width: 600px;
}

div.div1 {
  background: #999;
  float: left;
  height: 100%;
  width: auto;
}

div.div2 {
  background: #666;
  height: 100%;
}

div.clear {
  clear: both;
  height: 1px;
  overflow: hidden;
  font-size: 0pt;
  margin-top: -1px;
}

<div class="box">
   <div class="div1">1st</div>
   <div class="div2">2nd</div>
   <div class="clear">
</div>

Hope it helped.

edited Mar 28 '16 at 18:48

JJJ

32,246
20
88
102

answered Feb 28 '12 at 03:21

Bert

1,019
2
14
25

Exactly what I was looking for. Thank you ! – Pier-Alexandre Bouchard Feb 28 '12 at 03:24
yes to obtain the width of the content and also the height in div2 to that it will not create a nextline or go down. – Bert Feb 28 '12 at 03:29
Can someone help me.. why is the class clear used in this case? – Zohair Apr 27 '16 at 07:58

Dips · Answer 2 · 2012-02-28T03:09:51.980

0

If you don't want to use jquery then this might worth doing

<div style="width:100%;"> 
        <div style="float:left; display:inline-block;" class="div1">left div</div> 
        <div style="float:right; display:inline-block;" class="div2">right div</div> 
    </div>

edited Feb 28 '12 at 03:09

answered Feb 28 '12 at 03:02

Dips

3,090
3
19
21

I specified I didn't want to use jQuery. – Pier-Alexandre Bouchard Feb 28 '12 at 03:03
div will not take 100% of remaining space but will use content width. – Pier-Alexandre Bouchard Feb 28 '12 at 03:18

Split screen in 2 divs and set second width with remaining space in css?

2 Answers2