i want make two icons together side by side
My html code
<head>
<style>
.icon_one{
width:25px;
height: 20px;
background:#ffffff url('icon_one.jpg') no-repeat right top;
}
.icon_two{
width:25px;
height: 20px;
background:#ffffff url('icon_two.jpg') no-repeat right top;
}
</style>
</head>
<div class="icons"><div class="icon_one"></div><div class="icon_two"></div></div>
i want show them side by side
example :
icone1|icone2
but the code output
icond1
icone2
Thank you
5 Answers 5
Just add
.icon_one, .icon_two{display:inline-block;}
Then you wont have to worry about clearing floats later.
Otherwise you can use floats,
.icon_one, .icon_two{float:left;}
answered Sep 12, 2011 at 17:53
Loktar
35.3k7 gold badges96 silver badges106 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
Add a float to your elements...
.icon_one, .icon_two {
float: left;
}
answered Sep 12, 2011 at 17:52
65Fbef05
4,5221 gold badge24 silver badges24 bronze badges
Comments
add float:left to each icon class so they float next to each other, dont forget to add some margin space in between.
answered Sep 12, 2011 at 17:53
Andres I Perez
75.5k21 gold badges159 silver badges139 bronze badges
Comments
You can also change the div's to spans instead.
<div class="icons">
<span class="icon_one"></span>
<span class="icon_two"></span>
</div>
answered Sep 12, 2011 at 17:56
Musaab
1,6143 gold badges19 silver badges37 bronze badges
Comments
You can either float:left; each div or set each div to display:inline-block;
So Example 1:
.icon_one, .icon_two{
width:25px;
height: 20px;
background:red url('icon_one.jpg') no-repeat right top;
display:inline-block;
}
.icon_two{
background:blue url('icon_two.jpg') no-repeat right top;
}
http://jsfiddle.net/jasongennaro/YESWV/1/
NB: You can actually trim down your code, as above.
Also, I changed the background-color so it was easier to see the example.
Example 2:
.icon_one, .icon_two{
width:25px;
height: 20px;
background:red url('icon_one.jpg') no-repeat right top;
float:left;
}
.icon_two{
background:blue url('icon_two.jpg') no-repeat right top;
}
answered Sep 12, 2011 at 17:53
Jason Gennaro
34.9k9 gold badges67 silver badges86 bronze badges
Comments
default