To define a box we use <div> element and than we define the features of the this element to have an box.
.myBox{
background-color:#999999;
border: solid 1px black;
width:300px;
}
<div class="myBox">text here</div>
If you have more than one box, you can position them by using CSS positioning.
Relative positioning: if you define relative position, this element will stay exactly where it is.
.myBox{
background-color:#999999;
border: solid 1px black;
width:300px;
Position: relative;
}
Absolute positioning: if you define an element position absolute it means that other elements in document will act as that absolutely positioned element was never over there. Mostly people use this dynamic menus that when you move over the links it shows sub-menu to you.
.myBox{
background-color:#999999;
border: solid 1px black;
width:300px;
Position: absolute;
}
To position boxes we can also use floating.
.myBox{
background-color:#999999;
border: solid 1px black;
float:left;
width:300px;
}
.myBox img {
float:left;
}
.myBox p {
float:right;
}
<div class="myBox">
<img src=tst.gif />
<p>some text</p>
</div>
But by using floating causes some problems. For example if you want to type any text under this box, it will be presented nead this box again. To solve such problem you should use undefined width or clear option.
.clear {
Clear: both;
}
<div class="myBox">
<img src=tst.gif />
<p>some text</p>
</div>
<div class="clear"></div>
New text
Also there are other solution like using JavaScript. It is up to you and you design.
