Left align float:right div

Question

I am following the accepted answer to this stack overflow question .

In the above question, the layout consists of an image followed by an unordered list (see the JSFiddle in the question above).

In my site, I am trying to do the same thing, except:

• Instead of an unordered list I am using a div with some content (this is not a big issue)
• I want the div (currently contains some text) to be left -aligned, instead of the right-aligned behaviour in the example.

I have tried setting it to float:left , however the image then obscures the div. I also tried to create another div with a   and set its width to 100% and float:right as well so as to try and create a "buffer" which will push the div with content back over to the left, however the buffer also pushes the div too far left.

What do I need to do in order to have the same behaviour as in the JSFiddle example except having the unordered list left-aligned? I can probably handle the rest from there.

Edit To be clear I want it to look like this:

|---------||-------------------|            Empty space                  |
|   Image || Unordered List    |   |--------------------------|      ... |End of page
|_________||___________________|                                         |

Answer 1

Get rid of floating the list to the right. Instead add a padding-left to the list, with the width of the image (myImg is the id of the image, and myUl being the id of the list):

var imgWidth = $("#myImg").width();
$("#myUl").css("padding-left", imgWidth.toString() + "px");

http://jsfiddle.net/78zT3/1/

Answer 2

You will have to give the ul a margin-left to push it out from under the first div. Because the first div has position: absolute; the other elements doesn't recognize the dimensions of that div and ignores it.

Here is revised code fiddle

The only changes is in the #iContainer ul .

Answer 3

See here for the updated fiddle

Crucially note that the 'image' has its position set to absolute, so when you left float the list it appears beneath it. You thus need to set its position to relative, whilst also floating it left.

Revised CSS:

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: relative;
    display:inline-block;
    float:left;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you, IE7 */
}
#iContainer img {
    height: 100%;
}
#iContainer ul {
    float: left;
}