CODEWITHSUNDEEP
htmlcss
divakar
divakar

Reputation: 1379

Float right moves the span element up?

Hi i have beeen trying to make span and h1 element on the same line. However float:right will result span to move top. I have tried with different approach, i dont want to use margin property. Any sugesstions on this?

.pull-left {
  float: left;
  width: 70%;
}

.pull-right: {
  float: right;
  width: 20%;
}
<div class="block">
  <h1 class="pull-left">Carl</h1>
  <span class="pull-right">$4.81</span>
  <div style='clear:both'></div>
</div>

Any help would be appreciated.

Upvotes: 3

Views: 4165

Answers (6)

sani
sani

Reputation: 230

Its just the default margin of h1 tag that is doing this, you need to remove that.

If you wanna vertically center the span based on h1 then just use line-height:font-size of h1

Fiddle Here

.block h1
    {
      margin:0px;
    }
    .block span
    {
      line-height:2em;
    }
    .pull-left{
      float:left;
      width:70%;
    }
    .pull-right:{
      float:right;
      width:20%;
    }
<div class="block">
  <h1 class="pull-left">Carl</h1>
  <span class="pull-right">$4.81</span>
  <div style='clear:both'></div>
</div>

Upvotes: 2

christian
christian

Reputation: 64

Add this at the start of your css file :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

You have applied pull-left class on <h1> and all html headings have some margin applied by browsers by default. If you will apply pull-left to a <div> then you will not see any extra space but if you will use <h1> or some other heading then you need to remove default margin from heading.

.pull-left {
  float: left;
  width: 70%;
}
h1.pull-left {
  margin: 0;
}
span.pull-right {
  padding-top: 10px;
}
.pull-right {
  float: right;
  width: 20%;
}
<div class="block">
    <h1 class="pull-left">Carl</h1>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

If you wants heading and span as middle aligned then better to use inline-block as follows:

.block h1,
.block span {
  vertical-align: middle;
  display: inline-block;
}

.block h1 {
  width: 70%;
  margin: 0;
}

.block span {
  width: 20%;
}
<div class="block">
  <h1>Carl</h1>
  <span>$4.81</span>
</div>

Upvotes: 1

Anubhav pun
Anubhav pun

Reputation: 1323

Use table-cell & vertical align that's equally vertically align your text

.block{
display:table;
width:100%;
}
.pull-left{
  width:70%;
  display:table-cell;
  vertical-align:middle;
}
.pull-right{
   width:20%;
   display:table-cell;
  vertical-align:middle;
}
<div class="block">
    <h1 class="pull-left">Carl</h1>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

Upvotes: 1

Asim K T
Asim K T

Reputation: 18134

Use line-height to make different sized texts in same level.

.pull-left {
  float: left;
  width: 70%;
  line-height: 30px;
  margin: 0;
}
.pull-right {
  float: right;
  width: 20%;
  line-height: 30px;
}
<div class="block">
    <h1 class="pull-left">Carl</h1>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

What we've done here is, we made both h1 and span same height even though they have different font-size.

Check the MDN link:

https://developer.mozilla.org/en/docs/Web/CSS/line-height

Upvotes: 1

Hem&#227; Vidal
Hem&#227; Vidal

Reputation: 1872

Use display inline css value:

<h1 class="pull-left" style="display:inline">Carl</h1>
<span class="pull-right" style="display:inline">$4.81</span>

Upvotes: 1

Related Questions