Reputation: 3583
I have a list with two <div>
s in every <li>
and I want to float them one next to the other and I want the <li>
to take the whole availabe space. How do I do it?
<html>
<head>
<title></title>
<style type="text/css">
body {
}
ul {
}
li {
}
.a {
}
.b {
}
</style>
</head>
<body>
<ul>
<li>
<div class="a">
content
</div>
<div class="b">
content
</div>
</li>
</ul>
</body>
</html>
Upvotes: 1
Views: 4707
Reputation: 57384
*{ margin: 0; padding: 0;}
li{ width: 100%: display: block; }
li:after{ clear: both; }
div.a{ width: 49%; float: left; }
div.b{ width: 49%; float: left; }
Should do the trick.
Upvotes: 4
Reputation:
I assume by take the whole space you mean a width of 100%. I would also assume that you do not want styling applied to the list, which is why I have removed it in this example. This is also hack-free. You need not clear anything, so long as your list item has a width and the overflow: hidden property/value pair.
ul,
li {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
overflow: hidden;
}
li div.a,
li div.b {
float: left;
}
Upvotes: 0
Reputation: 3960
I see this is an old post but if someone runs into the same issue think about this:
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
You can use span instead of div
To get a div besides the other or horizontally you have to apply brute force with .css but if you use span it will naturally. Copy and paste the following code in a html and see what I'm talking about:
<ul>
<li>
<div style="background-color:red">red</div>
<div style="background-color:blue">blue</div>
</li>
<li>
<span style="background-color:red">red</span>
<span style="background-color:blue">blue</span>
</li>
</ul>
Also, at least for Microsoft <li><div></div></li>
won't validate.
Upvotes: 1
Reputation: 9110
For the divs, you just need to float left and the li, you want to do a clear. So:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
Upvotes: 2
Reputation:
Without checking to make sure, this should work
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
Upvotes: 0
Reputation: 25727
li{width:100%;}
.a{}
.b{float: left;}
That should do as required from my knowledge of CSS
Upvotes: -1