Question

I have a div and a ul that I’m trying to float to create two columns. The items within the ul are also floated so they will expand horizontally before wrapping vertically:

http://jsfiddle.net/3dhHe/7/

<style type="text/css">
    ul {list-style-type: none;}
    li {float:left; width:275px; min-height: 50px; padding: 12px; border-radius: 4px; border: 2px outset #eee;}
    .float-right {width: 300px; float: right; margin-left: 25px;}
    .float-left {float: left;}
</style>

<div class="float-right">
    This content should float to the right
</div>
<ul class="float-left">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
    <li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li>
</ul>

If I remove the float from the list items, then everything works as expected, however, when the li elements have a float applied, the ul element seems to ‘lose’ it’s float.

Is there a way to force the ul to float to the left of the div, while allowing the contents of the ul to float?
Note: I need the width of the ul to be dynamic, so I can’t set an explicit width to it.

Thanks!!!

---

Update

I’m trying to achieve something like this:

The text on the right can have a static width, but the ul containing the boxes should not have an explicit width (so that if the width of the browser is increased, then the “Test 3” box will move to the first row).

The problem I’m having is that if I don’t set a width on the ul, then the text content is moved above the ul:

Is there a way to position the div first, then restrict the ul to only use the remaining space?

Answer 1

To Achieve your goal:

1. All li inside the ul must be floated horizontally on 1 line.

When this is achieved:

2. The ul must find enough space beside the div to float beside it.

You must give the ul a max-width, to force it not to expand and take space as much as it wants, make sure its enough so that all of its children li are floated beside one another.

If the max-width isn’t enough, then the li will have no strength to say NO!, and they will simply take new lines below each other.

Check it out : http://jsfiddle.net/AliBassam/3EmdM/

Why is this happening?

When you are telling the li to float:left; it is as if you’re telling them : Try your best to float left, take every space you can so you can float left, cry and complain to your Mum (ul) and tell her that you MUST float left! All of us on the same line!.

When the ul noticed that not all its children li have floated on the same line, it takes a new line below the div so it can achieve that.

Here’s another example, notice that when the 2 li have floated beside each other (1), and when there’s enough space for the whole ul to be beside the div(2), it will float beside it.

Here’s another example with 2 divs, same result, the second div will not float until all its children div have floated inside of it (1), and enough space have been found beside the other div(2).

UPDATE

What you need is to have both the div and the ul inside a Parent Div, this div will have a position:relatve; and min-width, giving it a minimum width will allow it to expand when you maximize the browser, and it will allow it to become smaller but only to a limit.

Then give the child div the static width, let’s say, 250px, and give the ul a position:absolute; with right:250px or a little bit more (consider it as a margin-right).

<div style="position:relative; min-width:600px;">
<ul style="position:absolute; right:250px; left:0px; ">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
</ul>
<div style="float:right; width:250px;">
    This content should float to the right
    <br />
    This content should float to the right
    <br />
    This content should float to the right
    <br />
    This content should float to the right
</div>
</div>

Check it out : http://jsfiddle.net/AliBassam/FFrev/