CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
yaylitzis
yaylitzis

Reputation: 5554

margin property in a row at bootstrap

I have coded this simple code :

Html

    <div class="row offset3">
      <div class="title">Title1</div>
        <div class="title-arrow">
           <a href="#"><i class="icon-arrow-left"></i>GoBack</a>
        </div>
    </div>

css

   .title{
      margin-top: 20px;
    }

   .title-arrow{
      margin-top: -22px;
      margin-left: 50px;
      margin-bottom: 14px;
    }

my problem is that if i change the Title1 to a bigger one e.g titllleeeeeeeeeeeeee the arrow don't move at right.. Ok i get it its normal behavior! I have to put a property margin in class title. I tried to put an margin-right:10px; but nothing happens..

Upvotes: 3

Views: 941

Answers (3)

Ruddy
Ruddy

Reputation: 9923

Just do this:

HTML:

<div class="row offset3">
  <div class="title">Titleaa</div>
    <span class="title-arrow">
       <a href="#"><i class="icon-arrow-left"></i>GoBack</a>
    </span>
</div>

CSS

   .title{
      margin-top: 20px;
      display: inline;
    }

DEMO

The class title-arrow isnt needed anymore but its there in case you want it.

Upvotes: 3

Stephan Muller
Stephan Muller

Reputation: 27630

You're using two block elements, which are rendered below eachother and are not aware of the flow of their preceding block. That means that if the Title gets longer the arrow does not know about it (and shouldn't) because it's a block-level element. It should not be influenced by it.

You moved the arrow next to the title by using static margin values. Those values don't change and yes, that means that if the title gets longer the arrow will overlap it.

Instead, try to make use of the document flow, either by using inline(-block) elements or a float. Try this for example:

To .title, add:

float: left

Replace the entire rule for .title-arrow with:

.title-arrow {
    margin-top: 20px;
    line-height: 17px;
}

(these values are the same as that of title, to make sure they are on the same height)

Upvotes: 1

Charles Ingalls
Charles Ingalls

Reputation: 4561

Its because you set a fixed margin-left: 50px on the arrow. You should wrap it as a span within the the title div.

Check it out: http://bootply.com/83546

Upvotes: 1

Related Questions