CODEWITHSUNDEEP
css
SebastianZdroana
SebastianZdroana

Reputation: 209

placing text on the bottom of an element

I have a div with text inside it

<div>
    FC
</div>

for example that div is 100px wide and 200px tall is there any way to make the text sit on the bottom of the div

_____________
|           |
|           |
|           |
|           |
|           |
|           |
|__FC_______|

the reson i want this is because i have a bar on a website i'm working on to improve my css, the bar sits at the top of the page inside that bar there's 1img with a float left and 2divs with a float right, the one with the fc sits to the left of the 2 on the right

________________________________________________________________________
|                                                                      |
| logoimg                                               div2(fc)  div1 |
|______________________________________________________________________|

I want the FC to sit on the bottom of the div, the bar isn't fixed, i used percentages with a min-height so i can't just give it a margin-top or i could by giving it a percentage however i want that fc to always sit on the exact bottom of where it is placed.

enter image description here

Upvotes: 0

Views: 57

Answers (4)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can do something like this with flexbox

DEMO

nav {
  display: flex;
  flex-direction: row;
  background: white;
  padding: 25px 0;
}

.left {
  flex: 1;
}

.right {
  margin-left: auto;
}

a {
  padding: 0 25px;
  text-decoration: none;
  color: black;
}

@media(max-width: 480px) {
  nav {
    flex-direction: column;
  }

  .right {
    display: flex;
    flex-direction: column;
    margin-left: 0;
  }

  .fc {
    order: 2;
  }  
}

<nav>
  <div class="left">
    <a href="">Left</a>
  </div>

  <div class="right">
     <a class="fc" href="">FC Right 1</a>
     <a href="">Right 2</a>
  </div>
</nav>

Upvotes: 2

Gianca
Gianca

Reputation: 481

Look at this:

https://jsfiddle.net/pajxLngr/

HTML:

<div class="menuBar">
  <div class="imgLogo">logo</div>
  <div class="last">last</div>
  <div class="textOnBottom"><span>FC</span></div>
</div>

CSS:

.menuBar {
  width: 100%; 
  height: 24px;
  padding: 5px;
  background-color: grey;
  }
.imgLogo {
  width: 40px;
  height: 20px;
  padding: 2px;
  background-color: white;
  float: left;
}
.last {
  width: 40px;
  height: 20px;
  padding: 2px;
  margin-right: 2px;
  background-color: white;
  float: right;
}
.textOnBottom{
  width: 40px;
  height: 60px;
  padding: 2px;
  margin-right: 4px;
  background-color: white;
  float: right;
  position: relative;
}

.textOnBottom span {position: absolute; bottom: 0;}

Upvotes: 2

Phiter
Phiter

Reputation: 14992

Wrap the text in a span and set the bottom to 0, which refers to the y position of the element in it's location. It will glue to the bottom of the parent div. Remember that the parent div must be relative and the child must be absolute in order for this to work.

.parentdiv
{
  border: 1px solid black;
  width: 50px;
  height: 90px;
  position: relative;
}
.child{
  bottom: 0; position: absolute;
}
<div class="parentdiv">
    <span class="child">FC</span>
</div>

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You need to have it inside an element for sure. You can use position: relative on the parent and give position: absolute and bottom: 0 on the element. Example:

.parent {position: relative; border: 1px solid #999; height: 200px;}
.parent .elem {position: absolute; bottom: 0; left: 35%; width: 30%; border: 1px solid #99f;}
<div class="parent">
  <div class="elem">FC</div>
</div>

Upvotes: 2

Related Questions