Div Boxes

CSS Coding Tutorials | Submited Nov 18, 2007

Written by:

Notes

A pretty often asked question is how to put something 'anywhere'.
That's called a DIV box. Using two small bits of code you can position anything anywhere.
Take notice that the css code and the html code have the same names, like
.className{}
and
<div class="className">
if they're different they won't work.
And each new box needs it's own unique class name.

Editing

The only things you need to edit are the numbers next to height, width, top, and margin-left.
left:50%; needs to stay the same so it looks good in all resolutions/browsers/

Non-scrolling box

Everything you put in will be visible, regardless of how much.

<style>
.noScroll{
position:absolute;
left:50%;
top:200px;
margin-left:-500px;
}
</style>

<div class="noScroll">
Z0mFg! A box!
</div>

Scrolling box

Once your content exceeds the height in the code, it'll have a scrollbar.

<style>
.autoScroll{
position:absolute;
left:50%;
top:200px;
margin-left:-500px;
overflow:auto;
height:150px;
width:150px;
}
</style>

<div class="autoScroll">
Z0mFg! A box!
</div>

Limited content

Using the overflow:hidden; attribute you can limit how much of the box content is displayed, if the height is set to 200px the content will be hidden once it exceeds 200px.

<style>
.hiddenContent{
position:absolute;
left:50%;
top:200px;
margin-left:-500px;
overflow:hidden;
height:100px;
width:100px;
}
</style>

<div class="hiddenContent">
Z0mFg! A box!
</div>