CODEWITHSUNDEEP
htmlcssweb
user1778459
user1778459

Reputation: 115

Float 2 elements side by side inside a container div

This is supposed to be an easy task, but I've been looking at it for the last 30 minutes and couldn't figure it out.

Here is the html code;

<div style="width: 250px;">
  <img style="float: left; width: 20px;" src="public/_images/ok_kutu.jpg" alt="kutu" /> 
  <h3 style="float: left; width: 50px; color: #FFF; font-size: 18px;">Jobs</h3>
  <div style="clear: left;"></div>
</div>

All i want is keeping the img and h3 items side by side. Instead I'm getting this;

enter image description here

Upvotes: 2

Views: 12332

Answers (2)

BenM
BenM

Reputation: 53198

By default, <h3> elements have a top and bottom margin. You should remove them using margin: 0:

<div style="width: 250px;">
    <img style="float: left; width: 20px;" src="public/_images/ok_kutu.jpg" alt="kutu" /> 
    <h3 style="float: left; width: 50px; color: #FFF; font-size: 18px;margin:0">Jobs</h3>
    <div style="clear: left;"></div>
</div>

Also, maybe look into using external CSS, rather than placing all of your style information inline. It will be much easier to maintain in the long run...

Please see this jsFiddle demo

Upvotes: 4

Itay
Itay

Reputation: 16777

You can use:

display: inline-block;

Instead of:

float: left;

And everything will work out :)

Here's the demo (change the image): http://jsfiddle.net/JjTfy/2/

P.S - You should really use separate CSS stylesheets instead of inline styling.

Upvotes: 0

Related Questions