CODEWITHSUNDEEP
htmlcss
Dexter Schneider
Dexter Schneider

Reputation: 2520

Element does not float to the left as told

I have a little CSS problem. This occurs in IE, FF and Chrome. However on the iPhone Safari browser, it looks fine. The problem is that the second 'block' span tag (id="myDiv") does not float to the left as the first block span tag does, it has a padding to the left of some sort, which I never applied. How can I remove that padding to the left of the id="myDiv" span tag?

<head>
 <style>
    .plansHeader{
      font-weight:bold;color:rgb(73,102,145);font-size:12pt;margin-bottom:6px;line-  
      height:14pt;
     }
 </style>
</head>
<body>
  <span style="display: block">
    <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
    <span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span> 
  </span>
  <span id="myDiv" style="display: block">
    <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
    <span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
  </span>           
</body>

Thanks You

Upvotes: 2

Views: 675

Answers (2)

saluce
saluce

Reputation: 13360

It does, but your image is slightly taller than the line on which the image appears, so the second line is floating against the margin of the image.

You need to clear floats (either by adding a div between lines with style for clear: both or setting CSS on the second block to clear the float) to prevent this from happening. You could also just set the first line to line-height: 21px, the height of your image (which I'd recommend you do anyway), and that'll fix it, but ultimately you'll want to clear the floats to be safe.

Upvotes: 2

S&#243;fka
S&#243;fka

Reputation: 993

add this after your span :

<div style="clear:both;"></div>

It's should look like this:

<span style="display: block">
   <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
   <span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span> 
   <div style="clear:both;"></div>
</span>

<span id="myDiv" style="display: block">
  <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
  <span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
  <div style="clear:both;"></div>
</span>

and remeber: Always clear floats!

Upvotes: 2

Related Questions