Did you ever had problems when aligning DIVs, for example, you want to put the video clip on the left side, on the right side you want to put some description of the video.
I had this problem a few days ago, when div's didn't want to align beside each other. With a little bit of searching over the internet i found some simple css properties to do that, so let's see how i solved this.
First of all, i had to make one master container div to put the child divs into it.
I will set fixed width and height, and background too, so you could see which is container div and the child left and right divs.
Create the container in CSS
#container {
background:blue;
width:400px;
height:150px;
}
background:blue;
width:400px;
height:150px;
}
Now you have to create left and right DIV
#container .left {
width:200px;
height:100px;
background:red;
float:left;
}
#container .right {
width:200px;
height:100px;
background:green;
float:right;
}
width:200px;
height:100px;
background:red;
float:left;
}
#container .right {
width:200px;
height:100px;
background:green;
float:right;
}
If you look in the CSS code, I have made the left and the right div as a CLASS, the container is an ID, and set to left div to float left, and to the right to float right. Simple huh?
Now we just must put them in HTML
<div id="container">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
And you should see something like in the bottom, the blue one is the container div, the red one is left div and the green one is the right div.
Left DIV
Right DIV
Container DIVThat's all, see you next time! If you have any questions, feel free to ask.