1

I know this question has been asked before (1, 2, 3, 4, 5, 6), but none of these solutions seem to be working for me.

HTML

<div class="wrapper">
    <img src="http://imgur.com/5dEdRvCs.png" />
    <div>
        Lorem ipsum dolor sit amet, consectetur fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

CSS

.wrapper > *{
    float: left;
}

jsFiddle

I'd like both the img and the div under the wrapper to float left, and for the div with all the text to take up all the remaining space on the page, like this:

demo-good

Instead it looks like this:

demo-bad

I've tried adding overflow: hidden to the wrapper, tried a number of width and min-width settings, but to no avail.

There must be some relatively simple way in CSS to accomplish this.

Community
  • 1
  • 1
KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • Something is wrong with your images: they're gone. – Robbie Wxyz Nov 13 '13 at 03:22
  • I feel that this has some relevance. See **[this question](http://stackoverflow.com/questions/19941804/vertically-align-text-right-of-floated-image-image-sizes-varied-responsive)**, then see my answer below it. – Josh Crozier Nov 13 '13 at 03:35

3 Answers3

6

Just float the image, and the text will align to the right.

.wrapper img {
    float:left;
}

The fiddle.

Matthew Johnson
  • 4,875
  • 2
  • 38
  • 51
  • I like it, although is it possible for it to not [wrap below the image](http://i.imgur.com/quDptRz.png)? – KyleMit Nov 13 '13 at 03:30
  • 1
    If you want it for wrap below the image then you can use this code but you need to put your image inside the div area. – Choudhury A. M. Nov 13 '13 at 03:33
  • 2
    @KyleMit to prevent the text wrapping after the image, give the text a left margin equivalent to the width of the image. Of course this only works if all your images are the same width. http://jsfiddle.net/LgJ4w/17/ – Mark Simpson Nov 13 '13 at 03:34
  • @MarkSimpson, perfect. You link didn't have the left margin set so i created this one: http://jsfiddle.net/KyleMit/LgJ4w/18/ – KyleMit Nov 13 '13 at 03:36
  • @KyleMit Yeah i forgot to update the fiddle before posting it here. Have updated my comment. – Mark Simpson Nov 13 '13 at 03:38
  • For that, you could set widths for both as Adil mentioned. You could also float one left, and one right. – Matthew Johnson Nov 13 '13 at 03:38
0

Your code actually bringing every element to left. So the image is left and the text is also in the left.

If you put a width on both image and text that will work for you.

You can try with :

.wrapper img {
    width: 20%;
}
.wrapper > div {
    width: 80%;
}

Then it will work as you wanted.

Choudhury A. M.
  • 5,152
  • 3
  • 21
  • 21
0

Another way to do this is to use display: inline-block instead of float

Here is the fiddle:

fiddle

aash
  • 1,323
  • 1
  • 14
  • 22