CODEWITHSUNDEEP
csshtml
Rahul Shah
Rahul Shah

Reputation: 1407

Putting 2 images in the same line

i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick

I am already using it,but still they are coming in different lines.I dont know where I am going wrong.

Jsfiddle

span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
 #div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
    #topdiv3 {
display: inline-block;
float:left;
}

html

 <br />
<div id='topdiv1'><div id="widget1" class="sticky1"> 
<div id='topdiv3'>
       <a href="http://jlkjlkj.org"> <img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" /></a>
          <div id='div23'>

    <span class="tab"></span>
    <img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>

Please help.

Upvotes: 1

Views: 3948

Answers (4)

Arun Unnikrishnan
Arun Unnikrishnan

Reputation: 2349

Your topdiv3 must be closed before div div23.

<div id='topdiv1'>
<div id="widget1" class="sticky1">

    <div id='topdiv3'>
           <a href="http://jlkjlkj.org"> <img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" /></a>
    </div>
     <div id='div23'>
        <img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
    </div> 
</div>
</div>

http://jsfiddle.net/arunu/8gvvr/

Upvotes: 1

Pablo S G Pacheco
Pablo S G Pacheco

Reputation: 2600

I've tested it on firefox and it worked the way you did.

But anyway, your html markup is a little bit confuse, doesn´t it?

Upvotes: 0

Ben
Ben

Reputation: 13615

http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float

#topdiv3 > a{
    float: left;
}

More on how floats work (great article)

By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>

Upvotes: 1

Samuel Liew
Samuel Liew

Reputation: 79022

You don't apply the float to the parent container. You apply the float to the child elements:

#topdiv3 > * {
    float:left;
}

http://jsfiddle.net/samliew/b9TWE/1/

If you want to remove the space between the images, remove the span.

Upvotes: 2

Related Questions