Posted on

CSS – Two Divs Side by Side

How to put two divs side by side?

<style type="text/css">
#my-container {
    width: 80%;
    margin: 20px auto 10px auto;
}
/* FIXED WIDTH DIVISION */
.my-left-div {
    float: left;
    width: 285px;
    background-color: #555;
    color: #fff;
    padding: 20px;
}
/* VARIABLE WIDTH DIVISION */
.my-right-div {
    margin-left: 335px;
    background-color: #400;
    color: #fff;
    padding: 20px;
}
</style>
<div id="my-container">
  <div class="my-left-div">Duis scelerisque dapibus purus, sodales mollis urna iaculis vel. Vestibulum a tortor eu metus rutrum laoreet at vitae urna.</div>
  <div class="my-right-div">Cras sagittis diam ligula, vel tincidunt tellus auctor non. Fusce nec lacus viverra, interdum mauris nec, rutrum nibh. Ut vitae pellentesque ligula. Morbi eu urna vitae lorem gravida imperdiet. Nulla laoreet tortor eget enim elementum hendrerit. Ut gravida, diam non lobortis finibus, ligula sapien rutrum magna, quis ultrices augue dui at nisi. Donec pellentesque, nisl a sollicitudin condimentum, libero magna varius velit, nec blandit ex lorem eu nulla. Proin nisl leo, vehicula nec gravida sit amet, viverra in lectus. Praesent vitae urna in massa interdum auctor. Phasellus ultricies risus non mauris sodales, eget gravida erat sagittis. Aliquam erat volutpat. Phasellus euismod eu mauris a mattis. Sed pellentesque ex vitae lacus porttitor molestie. Maecenas hendrerit vel leo ut lacinia.</div>
</div>
Posted on

CSS – Position a Div on top of another Div

How to position a <div> on top of another <div>?

<style type="text/css">
#container {
    position: relative;
    left: 40px;
    top: 40px;
}
#back {
    position: relative;
    top: 0px;
    left: 0px;
    background-color: #C60;
    width: 300px;
    height: 300px;
}
#front {
    position: absolute;
    top: 50px;
    left: 50px;
    color: #FFF;
    background-color: #930;
    font-size: 36px;
    border: solid 1px #FFF;
    padding: 20px;
}
</style>
<div id="container">
  <div id="back"></div>
  <div id="front">FRONT</div>
</div>

The code above will look like this:

div_on_div

Posted on

CSS – Align a Div on a Page

Align a <div> on a page (based on the width of the content):

<style type="text/css">
.outerdiv {
    margin-top: 40px;
    text-align: center;
}
.innerdiv {
    display: inline-block;
    *display: inline; /* Hack for IE7+ */
    zoom: 1; /* Hack for IE7+ */
    background-color: #CCC;
    padding: 20px;
    text-align: left;
}
</style>
<div class="outerdiv">
  <div class="innerdiv">This is the dynamic text!<br />
    <br />
    Enjoy this example.</div>
</div>

Resources:
http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block