CODEWITHSUNDEEP
css
Tom Gullen
Tom Gullen

Reputation: 61727

Simple CSS problem, 100% width

<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!

Upvotes: 1

Views: 219

Answers (5)

Tom Gullen
Tom Gullen

Reputation: 61727

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

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

Upvotes: -1

Yi Jiang
Yi Jiang

Reputation: 50105

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;
}

Upvotes: 0

opatut
opatut

Reputation: 6864

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 ;(

Upvotes: 0

Alberto Santini
Alberto Santini

Reputation: 6562

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>

Upvotes: 0

Nik
Nik

Reputation: 2726

Because it's floated, you need to give it a width.

Upvotes: 2

Related Questions