learningmode learningmode - 1 month ago 16
CSS Question

Align text within div tags

I've this below html

str+="<div class='label' date1='"+a+"' date2='"+a1+"' id='mydiv'> Start Date "+a;
str+="End Date "+a1;


Now I want date1 should be aligned left to the page and date2 should be aligned right to the page.

How to do this?

Regards

Answer

Make it simple with flexbox and pseudo elements.

#mydiv {
  display: flex;
  justify-content: space-between;
}
#mydiv::before {
  content: "Start Date: " attr(date1);
}
#mydiv::after {
  content: "End Date: " attr(date2);
}
<div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv"></div>

So, your code will be like this:

str+="<div class='label' date1='"+a+"' date2='"+a1+"' id='mydiv'></div>";
Comments