Robertico Robertico - 2 months ago 7
CSS Question

Align two div's with text in a box

I'd like to add two different pieces of text in a box

sample

Requirements:


  • Text 1: aligned top left (85% of size box)

  • Text 2: aligned bottom right (15% of size box)



I'm still struggling with the alignment.

My code so far:



/* Colored Content Boxes */

.box-gray,
.box-white {
width: 1000px;
margin: 0 0 25px;
overflow: hidden;
padding: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
position: relative;
left: 100px;
}
.box-white {
background-color: #ffffff;
border: 1px solid #ffffff;
}
#left {
float: left;
width: 85%;
text-align: left;
}
#right {
float: right;
width: 15%;
text-align: right;
font-size: x-small;
}
body {
background-color: #f2e6d9;
}

<div class="box-gray">
<div id="left">Hello</div>
<div id="right">21-02-2016 11:02:03</div>
</div>




Answer

using flexbox you can do this

/* Colored Content Boxes */

.box-gray,
.box-white {
  width: 1000px;
  max-width:80%; /* demo */
  margin: 0 0 25px;
  overflow: hidden;
  padding: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.box-gray {
  background-color: #e2e2e2;
  border: 1px solid #bdbdbd;
  position: relative;
  /*left: 100px; */
  display: flex;
  height:100px; /* demo */
}
.box-white {
  background-color: #fff;
  border: 1px solid #fff;
}
#left {
  flex: 0 0 85%;
}
#right {
  flex:0 0 15%;
  align-self: flex-end;
  font-size: x-small;
  text-align:right
}
body {
  background-color: #f2e6d9;
}
<div class="box-gray">
  <div id="left">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>
  <div id="right">21-02-2016 11:02:03</div>
</div>