Simple CSS problem, 100% width

Question

<div style="width:100%;border:1px solid green">

    <div style="float:left">
        <img src="images/logo.gif" />
    </div>
    <div style="float:left;border:1px solid black;">
        lol
    </div>
    <div style="clear:both">
    </div>

</div>

The lol is in a box that is small, I need it to fill up the remaining space in the container!

Answer 1

因为它是浮动的，所以需要给它一个宽度。

Answer 2

This works (at least in Safari), but I don't know if it's an acceptable answer for you, since it modifies the position of the div tags:

<div style="width:100%;border:1px solid green">
  <div style="float:left;border:1px solid black; width: 100%;">
    <div style="float:left">
      <img src="..." />
    </div>
    lol
  </div>
  <div style="clear:both">
  </div>
</div>

Answer 3

There is sadly no possibility in CSS to say

width: 100% - 100px;

but what you can do is the following:

<div>
    <div style="float:left;width:100px;">
        <img ... />
    </div>
    <div style="margin-left:100px;">
        lol rofl xd whatever
    </div>
</div>

This will give you the image at the left with it's column fixed to 100px and a flexible column at the right. You just cannot use it with a flexible image column ;(

Answer 4

If you just need one div to share the same space, then see if this will work for you: http://jsfiddle.net/vVQK2/

You simply float the logo to the left, and don't do anything to the other one.

#outer {
    width: 500px;
    overflow: hidden;
}

#logo {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

Answer 5

It's not possible the best solution but it works, use tables:

<table width="100%">
  <tr>
    <td>
      <img>
    </td>
    <td>
      More
    </td>
  </tr>
</table>