2 left floating divs, with fixed size and auto width

Question

Hello i am having a problem with a CSS design. I have 2 floating div's, where the first is always 200 px width, where the second div have to be the rest of the page width. How can this be done? i have tryed width: auto and 100%

<div style="float: left; width: 200px">
</div>
<div style="float: left;">
</div>

score 2 · Accepted Answer · answered Jun 06 '11 at 13:16

2

Closest to your example:

<div style="float: left; width: 200px;">
</div>
<div style="margin-left: 200px;">
</div>

answered Jun 06 '11 at 13:16

Paul Groves

3,983
2
23
24

Removed my answer. I didn't like what I was doing. +1 for you. – wdm Jun 06 '11 at 13:41

score 0 · Answer 2 · answered Jun 06 '11 at 13:05

0

It's working, but the div is adjusting to it's content which is empty right now, if you want to leave it empty, try "display:block;

answered Jun 06 '11 at 13:05

Alexcp

348
1
6

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

I think this might be what you are looking for.

Expand div to max width when float:left is set

edited May 23 '17 at 12:04

Community

1
1

answered Jun 06 '11 at 13:08

Jason Gennaro

34,535
8
65
86

score 0 · Answer 4 · answered Jun 06 '11 at 13:13

You don't need the second <div>. Try this:

<html>
   <body>
      <div style="float: left; width: 200px; margin-right: 20px;">
          Floating Content
      </div>
      Main Content
   </body>
</html>

The main content will wrap around the bottom of the floating <div>, so if you don't want that, you'll have to set the height.

score 0 · Answer 5 · answered Jun 06 '11 at 13:22

By far the best trick here is to only float the left div:

http://jsfiddle.net/8y2t2/

#left {
    width: 200px;
    float: left;
    background: #ccc
}
#right {
    background: red;
    overflow: hidden
}
<div id="left">left</div>
<div id="right">right</div>

A bonus from doing it this way is that you don't need to specify the width of the left div as both a width and a margin-left (as in other answers here). That's thanks to overflow: hidden.

Compare: http://jsfiddle.net/8y2t2/1/ vs http://jsfiddle.net/8y2t2/2/

If you would like multiple instances: http://jsfiddle.net/8y2t2/3/

2 left floating divs, with fixed size and auto width

5 Answers5