html - How to adjust floating elements? -


how adjust floating elements in css? code below got result on attached picture. have left , right divs aligned vertically.

* {    margin: 10px;    padding: 10px;  }    body {    background: #c0ffc0;  }    .header {    background: #c0c0ff;    height: 100px;  }    .left {    background: #ffc0c0;    float: left;    height: 200px;    width: 25%;  }    .right {    background: #ffffc0;    overflow: hidden;    height: 200px;  }    .bottom {    background: #c0ffff;    clear: both;    height: 100px;  }
<div class="header">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>  <div class="left">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>  <div class="right">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>  <div class="bottom">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

enter image description here

just wrap left , right divs inside div (main) , go.

* {    margin: 10px;    padding: 10px;  }    body {    background: #c0ffc0;  }    .header {    background: #c0c0ff;    height: 100px;  }    .main {    overflow: hidden;    margin: 0px;    padding: 0px;  }    .left {    background: #ffc0c0;    float: left;    height: 200px;    width: 25%;  }    .right {    background: #ffffc0;    height: 200px;    overflow: hidden;  }    .bottom {    background: #c0ffff;    clear: both;    height: 100px;  }
<div class="header">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>  <div class="main">    <div class="left">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>    <div class="right">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>  </div>  <div class="bottom">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>


Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -