calc()

calc()

by fatihhayri

HTML

<div id="kapsul">
    <div id="icerik">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed congue dolor. Praesent volutpat blandit massa. Vestibulum tincidunt, enim ac ullamcorper tincidunt, tortor nisl sollicitudin est, at iaculis enim sapien non metus. Quisque ac interdum nunc. Vivamus blandit porttitor mi vitae ullamcorper. Curabitur mollis mauris et justo cursus venenatis. Integer accumsan egestas diam, in lacinia lacus ullamcorper sollicitudin. Curabitur leo mauris, ullamcorper id sodales nec, vulputate condimentum urna. Sed iaculis felis at sapien pulvinar condimentum. Integer odio justo, elementum sed rutrum et, suscipit sed leo. Aliquam tincidunt est ac risus feugiat porta. Integer feugiat accumsan euismod. In hac habitasse platea dictumst. 
    </div>
    <div id="sagKolon">
    Quisque eros nulla, ultricies eu tincidunt ac, egestas ut orci. Quisque in ante in mi suscipit lobortis sit amet in neque. Maecenas vitae ipsum sapien, id aliquet lacus. Vestibulum a ligula augue. Integer rutrum aliquam pellentesque. Aenean ac diam sem. Suspendisse cursus lacinia rutrum. Donec eleifend rhoncus lectus nec fringilla. 
    </div>
</div>

CSS

#kapsul{
  width:800px;
  border:1px solid #B8C172;
  margin:0 auto;
  padding:10px;
  overflow:hidden;
  background-color:#CCC;
}

#icerik{
  width:500px;
  margin-right:1em;
  float:left;
  background-color:#00CCCC;
  padding:1em;
  border-radius:30px;
}

#sagKolon{
  width:-moz-calc(300px - 5em);
  width:calc(300px - 5em);
  float:left;
  background-color:#CC9933;
  padding:1em;
  border-radius:30px;
}