How to float a span in a div?

Question

I'm trying to learn how to actually use CSS without the help of Bootstrap.

I have the following: (can be viewed here: http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview)

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
</div>

<div class="block">
  <span class="pull-left">Carl</span>
  <span class="pull-right">$4.81</span>
</div>

<div class="block">
  <span class="pull-left">Steve</span>
  <span class="pull-right">$0.34</span>
</div>

and the CSS...

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
}

If I was using Bootstrap, I could achieve the desired effect, by putting my html in a container div and instead of using my custom class of block, add the class btn and btn-block.

I want to have the names align vertically on the left and the prices align vertically on the right. What am I missing?

Sort of like:

George                                     $23.20
Carl                                        $4.81
Steve                                       $0.34

Please don't mention tables, like I said, I could use bootstrap and wrap the above html in div.container, and then use button.btn.btn-block instead of my div.block to achieve the exact same effect. Thanks.

Update 1:

OK, I didn't expect there to be more than maybe one or two solutions, but there's quite a bit. Can someone explain the pros/cons of each solution? I'm really at a loss here.

Solution #1:

Add a new div element:

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
  <div style='clear:both'></div>
</div>

Solution #2:

Add clear:both; overflow:auto; to the block class by thgaskel

Solution #3:

This one seems to create margins between the blocks.

Change display:block to display:inline-block for the block class.

Solution #4:

Add float:left to the block class.

Solution #5:

Discovered this one while messing around. Create a new selector:

.block:after {
  content: ":" /* <--- at a complete loss why this works */ 
}

Solution #6:

Discovered this one from reading this page.

.block:after {
  content:"";
  display: table;
  clear: both;
}

I'm feeling pretty overwhelmed and am not sure which to pick. Thanks.

score 5 · Answer 1 · edited May 23 '17 at 11:45

5

Instead of display: block;, use the below css

.block {
display: inline-block;  //change like this
background-color: #87CEEB;
width: 100%;
}

Update: Since the gap is distrubing, better use

.block {
    display: block;
    float: left;
    background-color: #87CEEB;
    width: 100%;
}

Actaully inline-block tends to leave space which can be prevented in many ways.

Even this solves your problem, check jsfiddle

edited May 23 '17 at 11:45

Community

1
1

answered Jul 30 '13 at 04:29

Praveen

55,303
33
133
164

But the `btn-block` in Bootstrap has a `display: block`? – JP Richardson Jul 30 '13 at 04:32
This works, but I don't understand why this places a margin between the blocks whereas the other solutions don't? – JP Richardson Jul 30 '13 at 04:40
@JPRichardson I dont think pros and cons in applying the css. The only thing I would say, it should not affect other styles in your in html. – Praveen Jul 30 '13 at 05:19

score 3 · Answer 2 · answered Jul 30 '13 at 04:29

You are close in your approach, the only thing you will need to do to make this work is to clear the float after it's been applied to the span's.

Have a look at how clear works in HTML/CSS : http://www.w3schools.com/cssref/pr_class_clear.asp

Your html would look like this:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="block">
      <span class="pull-left">George</span>
      <span class="pull-right">$23.20</span>
      <div style='clear:both'></div>
    </div>

  <div class="block">
    <span class="pull-left">Carl</span>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

  <div class="block">
    <span class="pull-left">Steve</span>
    <span class="pull-right">$0.34</span>
    <div style='clear:both'></div>
  </div>


  </body>

</html>

You could also just apply `clear:both; overflow:auto;` to the `.block` class. — thgaskell, Jul 30 '13 at 04:34
Jeeze, sooo many solutions that seem to work... I really don't know the pros/cons of each one. — JP Richardson, Jul 30 '13 at 04:40

score 2 · Answer 3 · edited Jul 30 '13 at 05:07

2

Add float:left; to .block class since its child are floating that why you need to float its parent div to get the full width

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
    float:left;
}

edited Jul 30 '13 at 05:07

answered Jul 30 '13 at 04:33

Hushme

3,108
1
20
26

well you will see the difference after adding the tags.. :) – zzlalani Jul 30 '13 at 05:11

How to float a span in a div?

3 Answers3

Linked