css make image and text left to right

Question

I want to make an image in the left and the text on the right.

This is a jsfiddle http://jsfiddle.net/VnnZ2/

I put the image in a div with class imageClass and I put the text in a div with class information and I gave the imageClass left float and the information right float.

I also tried to make this:

display: inline-block;

for both classes but still the result as you see in the jsfiddle.

I tried the same css with label and input and it works but I don't know why it is not working with div and div.

Plus, I already give the imageClass a width 200 and the informaton class a width 300 and the ul width 500px so I tried all what I could

Update 1

Sorry I gave you the wrong jsfiddle by mistake, this is the correct one http://jsfiddle.net/VnnZ2/9/

Have a look at this thread: http://stackoverflow.com/questions/5198392/css-float-floating-an-image-to-the-left-of-the-text is this what you mean? — roemel, Jul 02 '14 at 14:45

score 1 · Answer 1 · answered Jul 02 '14 at 14:47

1

You need to clear your floats to stop the parent element collapsing. There are a number of ways. This is probably the simplest to understand:

WORKING DEMO

<li>
    <div class="imageClass">
        <img src="https://www.google.com/images/srpr/logo11w.png"/>
    </div>
    <div class="information">nameres</div>

    <div class="clearfix"></div> /* Add an empty element with class .clearfix */
</li>

In your CSS:

.clearfix {
    clear: both;
}

Or this method:

WORKING DEMO

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

Where the clearfix class would be applied to the parent element(li)

answered Jul 02 '14 at 14:47

Turnip

35,836
15
89
111

Sorry I gave you a wrong jsfiddle, both the li must be in the same ul, there should be just one ul. could you check please ? i will edit the jsfiddle – Marco Dinatsoli Jul 02 '14 at 14:54
It makes no difference to either example above: http://jsfiddle.net/VnnZ2/10/ and http://jsfiddle.net/EB69u/1/ – Turnip Jul 02 '14 at 14:56
+1 to you but I have accepted the other answer because I don't understand this `before` and `after` very good. I hope I can accept ore than one answer, many thanks – Marco Dinatsoli Jul 02 '14 at 15:02

Gunaseelan · Accepted Answer · 2014-07-02T15:05:16.313

Check this updated code

HTML:

div class="allRestaurants">
        <ul>
        <li>
            <div class="imageClass">
                <img src="https://www.google.com/images/srpr/logo11w.png"/>
            </div>
            <div class="information">
                nameres                </div>
        </li>
    </ul>
        <ul>
        <li>
            <div class="imageClass">
                <img src="https://www.google.com/images/srpr/logo11w.png"/>
            </div>
            <div class="information">
                Zuma 2                </div>
        </li>
    </ul>
</div>

CSS:

.allRestaurants{
   background-color: #376b66;
   width:100%;
   float:left;
 }
 .allRestaurants ul{
   margin: 10px;
   padding: 0;
   width: 600px;
   background-color: #ffffff;
   margin-left: 10px;
   width:90%;
   overflow:auto;
 }
 .allRestaurants ul li{
    margin-bottom: 10px;
    list-style: none;
    box-sizing: border-box;
    border-radius: 10px;
    -webkit-border-radius: 10px;
 }
 .allRestaurants ul li .imageClass{
    float: left;
 }
 .allRestaurants ul li .imageClass img{
    width: 200px;
    height: 200px;
 }

 .allRestaurants ul li .information{
    width: 250px;
 }
 .allRestaurants ul li{
    float:left;    
    clear:both;
 }

Updated JS FIDDLE CODE

I am sorry, I gave you the wrong jsfidle, this is the correct one. could you check please? http://jsfiddle.net/VnnZ2/9/ — Marco Dinatsoli, Jul 02 '14 at 14:56
I just added the overflow:hiden to the ul and it works, many thanks — Marco Dinatsoli, Jul 02 '14 at 15:04

score 1 · Answer 3 · answered Jul 02 '14 at 14:51

1

Add overflow: auto; to .allRestaurants ul li, that way the li will know that there are elements inside it that float.

Also, check this updated Fiddle.

answered Jul 02 '14 at 14:51

GreyRoofPigeon

17,833
4
36
59

+1 to this amazing note, I have selected the other answer because he gave me a working code in the first. but his code missed the `overflow:auto` to make the ul contains all the li(s) I wish I could accept two answers. many thanks – Marco Dinatsoli Jul 02 '14 at 15:04

css make image and text left to right

Update 1

3 Answers3