CODEWITHSUNDEEP
htmlcss
Vor
Vor

Reputation: 35109

Move span in the bottom of the div

just want to move 'More...' at the bottom of the box: enter link description here

  <div id="box1">
  <span class="more">More...</span>
  </div>


.more {
    margin: 4px 4px;
    left: 0px;
    bottom: 0px;
}

#box1 {
    float: left;
    margin: 10px auto;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 120px;
    width: 500px;
}

Upvotes: 1

Views: 17375

Answers (2)

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

You can use position: absolute for more span

Live:

http://jsfiddle.net/cHKF4/16/

You can look at here for using position.

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Upvotes: 3

Jon Newmuis
Jon Newmuis

Reputation: 26492

Set absolute positioning on the span, and relative positioning on the bounding box.

<div id="box1">
    <span class="more">More...</span>
</div>


.more {
    margin: 4px 4px;
    left: 0px;
    bottom: 0px;
    position: absolute;
}

#box1 {
    float: left;
    margin: 10px auto;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 120px;
    width: 500px;
    position: relative;
}

See the Updated jsFiddle for a live example.

Upvotes: 8

Related Questions