...

View Full Version : CSS - Floating Div Question



Elisabet
08-18-2005, 10:36 PM
I need to have three boxes, each with headers that float to allow for varying content. I need each box to be 10 pixels from the one above/below it.

My question is, what is the best way to include the spacing between the boxes?

I know of servral methods to do it, but what I am trying to figure out is what the CSS standard method would be.

mrruben5
08-18-2005, 10:56 PM
You could do the following:

(X)HTML

<div class="columnbox">text here blablabla</div>
<div class="columnbox">text here blablabla</div>
<div class="columnbox">text here blablabla</div>Or something along those lines.

CSS:

.columnbox {
float:left;
clear:left;/*No floated elements must be left to the element*/
background:#ccc;
border:1px solid #999;
padding:.5em;
margin:5px 0 /*the right number, the zero, stands for left and right. It is a shorthand. */
}

But offcourse you could always have one div with an id attached, style that to be floated left, and just make nested boxes in that so you don't have to float them.

There is an explorer bug with padding, in IE it strips up the text by 3 pixels: http://www.cssplay.co.uk/boxes/floatfix.html

If you could give us a screenshot and link to what you are trying are making, I'm sure it is easier to find a decent and proper solution.

Elisabet
08-18-2005, 11:21 PM
For discussions sake, simply using exactly the code you posted, my question is in this:

<div class="columnbox">text here blablabla</div>
HOW DO I PUT
<div class="columnbox">text here blablabla</div>
SPACES BETWEEN?
<div class="columnbox">text here blablabla</div>

Should that be done in the CSS somewhere (Obviously I can just stick a <br/> in thre, but I'm trying to make sure I'm following CSS standards).

Elisabet
08-20-2005, 05:26 PM
Anyone know what the standard is on this?

yonni
08-22-2005, 05:06 PM
doesnt really matter, use what works I say. Your users arent really going to care if youve used the CSS standards or not

Pepe, the bull
08-22-2005, 05:24 PM
Do you want the spaces in the code or on the page? mrruben5's way has the space between the boxes being set by the top and bottom margin of the box in the CSS code. Change the first number of the margin and the space between boxes change. In my opinion, that is the best way to do it.

In addition, I think you are doing the right thing to find out what the best standards-compliant way to do this is. I think you'll be happier in the long run when more browsers start to be more compliant.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum