<p>I have a list with two <code>&lt;div&gt;</code>s in every <code>&lt;li&gt;</code> and I want to float them one next to the other and I want the <code>&lt;li&gt;</code> to take the whole availabe space. How do I do it?</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type="text/css"&gt;
            body {
            }
            ul {
            }
            li {
            }
            .a {
            }
            .b {
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;div class="a"&gt;
                    content
                &lt;/div&gt;
                &lt;div class="b"&gt;
                    content
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

```
```
li{width:100%;}
.a{}
.b{float: left;}
```
```
That should do as required from my knowledge of CSS