Want: To have one DIV class within my main content box that I can repeat across the page and down with a small amount of margin on all sides.

I could just code a new div per box that I want, but that just looks messy. I know it is possible to just code once then repeat, like my content divs, but I can't seem to figure out how.

My page: http://test1.mindkicker.com/games.html

I'm not sure I understand what it is you're talking about. What do you mean by 'repeating a div class' ??? What exactly are you trying to achieve ?

Problem with having just one class for all of them is that you might have trouble with the positioning of them, as you can't use the 'position:' option on just one of them

Sure you can, it just takes a bit more knowledge of CSS Besides, positioning may be wholly unnecessary.

I should remember not to post at 12:30 in the morning. The link shows an image of roughly what I want to achieve.

http://test1.mindkicker.com/images/div.gif

Just imagine the container that says "Games" extending down to contain all of the gray boxes.

If you want floated elements to stay within a container, you need to clear them at the end. You could add a div at the end. I style a div I use exclusively to clear things.

div#clear-me {
    clear: both;
}

And then just add it to the end

<div id="clear-me"></div>

Actually, there's no need to add a whole new div just to clear floats. There are many methods, I like this simple method:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then in my code, I add <br class="brclear" /> where I need it. Semantically it is a tiny bit of extra markup -- but pretty insignificant IMHO.

Nice tip using the <br> tag. Is the height, margin, font and line height required? Or just good practice. Using the <br> tag would make more sense to me.

It just makes your code so much more versatile - I'd definitely reccomend it

Originally Posted by Tom_M

Nice tip using the <br> tag. Is the height, margin, font and line height required? Or just good practice. Using the <br> tag would make more sense to me.

Good design practice.
It prevents the <br> taking up space in the document which may insert an unwanted gap between elements.

Hmm, never thought about using <br class="clear" /> as clearing element. I was always using <div class="clear"></div> to achieve it. Brilliant idea - a few bytes saved

I found a way of correcting my problem without having to bother with a new div for clearing floats.

http://www.tipclique.com/tutorial/cs...-clear-floats/

Thanks for all of your tips!