get text between the border lines and float them

Question

I've the below HTML.

<div class="version_text">
                <div class="left">Rakesh Keerthi</div>
                <div class="center">Rakesh Keerthi</div>
                <div class="rght">Rakesh Keerthi</div>
            </div>

And with the below CSS.

div.version_text{
    width:100%;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}

div.version_text div.left{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.center{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.rght{
    display:block;
    float:right;
    width:33%;
}

here i'm able to float the divs side by side but the content which has to go between the borders comes after the borders.

The expected output is as below.

____________________________________________________
Rakesh Keerthi     Rakesh Keerthi     Rakesh Keerthi
____________________________________________________

but i'm getting a different output. here is the fiddle link (Fiddle).

please let me know where am I going wrong and how to fix it.

Thanks.

You want to have a look at this: http://stackoverflow.com/questions/8554043/what-is-clearfix — L.Butz, Dec 01 '14 at 10:41

score 2 · Answer 1 · answered Dec 01 '14 at 10:41

Add overflow: hidden to div.version_text

div.version_text {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
  overflow: hidden;
}
div.version_text div.left {
  display: block;
  float: right;
  width: 33%;
}
div.version_text div.center {
  display: block;
  float: right;
  width: 33%;
}
div.version_text div.rght {
  display: block;
  float: right;
  width: 33%;
}

<div class="version_text">
  <div class="left">Rakesh Keerthi</div>
  <div class="center">Rakesh Keerthi</div>
  <div class="rght">Rakesh Keerthi</div>
</div>

Weafs.py · Accepted Answer · 2014-12-01T10:55:08.270

You need to specify the height and line-height. line-height will vertically center the text.

Additionally, use display: inline-block alongwith text-align: left, text-align: center and text-align: right for the alignment.

Fiddle

div.version_text {
    width:100%;
    height: 30px;
    line-height: 30px;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}

div.version_text {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
}
div.version_text div.left, div.version_text div.center, div.version_text div.rght {
  display: inline-block;
  text-align: left;
  width: 33%;
}
div.version_text div.center {
  text-align: center;
}
div.version_text div.rght {
  text-align: right;
}

<div class="version_text">
  <div class="left">Rakesh Keerthi</div>
  <div class="center">Rakesh Keerthi</div>
  <div class="rght">Rakesh Keerthi</div>
</div>

This is working awesome, but a small question, is there a way that the right text to besent even more to right? — user3872094, Dec 01 '14 at 10:46

score 1 · Answer 3 · answered Dec 01 '14 at 10:45

demo - http://jsfiddle.net/dotq44o9/5/

instead of float use inline-block and add white-space: nowrap; for removing white-space between inline-block

div.version_text {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
  white-space: nowrap;
}
div.version_text div.left,
div.version_text div.rght,
div.version_text div.center {
  display: inline-block;
  width: 33.33%;
  text-align: center;
}

<div class="version_text">
  <div class="left">Rakesh Keerthi</div>
  <div class="center">Rakesh Keerthi</div>
  <div class="rght">Rakesh Keerthi</div>
</div>

Leo · Answer 4 · 2014-12-14T09:39:22.113

Because all children of div.version_text are out of document flow (float), thus its computed height is 0.

The simplest way is to add overflow:hidden; to div.version_text, which will cause the container to consider float children when calculating computed height.

A much neater solution is to clear the float with a pseudo element:

div.version_text{
    width:100%;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}
div.version_text:after{
    content:'';
    display:block;
    clear:both;
}

div.version_text div.left{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.center{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.rght{
    display:block;
    float:right;
    width:33%;
}

<div class="version_text">
    <div class="left">Rakesh Keerthi</div>
    <div class="center">Rakesh Keerthi</div>
    <div class="rght">Rakesh Keerthi</div>
</div>

get text between the border lines and float them

4 Answers4

Fiddle