CODEWITHSUNDEEP
htmlcss
Androme
Androme

Reputation: 2449

2 left floating divs, with fixed size and auto width

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>

Upvotes: 0

Views: 2806

Answers (5)

thirtydot
thirtydot

Reputation: 228142

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/

Upvotes: 0

Paul Groves
Paul Groves

Reputation: 4051

Closest to your example: 

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

Upvotes: 2

FishBasketGordo
FishBasketGordo

Reputation: 23122

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.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

I think this might be what you are looking for.

Expand div to max width when float:left is set

Upvotes: 0

Alexcp
Alexcp

Reputation: 333

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;

Upvotes: 0

Related Questions