Divs/Padding... box model hack.

Chiz · 24 Dec 2006 at 16:50

My site uses divs, and to put it briefly, i would like space within the divs, so my text isn't right at the sides.

I've researched, and discovered the only real way around this is the Box Model Hack.

This is needed because Firefox renders the padding OUTWIDTH the box, while IE 5 and below renders it to be WITHIN the box.

I have two divs, each identicle, and each aligned next to each other. Preferably i would like padding in the box, say 10pt.

I have tried the box model hack but it messes too much of the values up and it i can't get it to work correctly, and it just seems a horrible thing to do.

Is there any other options to this? or is it something i just have to get on with and work around?

ringo747 · 24 Dec 2006 at 18:27

can you not just use the text-indent property in your CSS file?

Chiz · 24 Dec 2006 at 18:56

Yeah sure, but when the text continues onto a new line, i do not have the padding on the new line. I would need to <p> at the break if you know what i mean.

I also plan to have a table containing images within this div (or other divs containing images, not sure yet) so if i were able just to pad it a little it would save me potential problems.

ringo747 · 26 Dec 2006 at 21:13

yep see where your coming from - im not an expert on css at all. I thought text-indent was for everyline rather than just the first! I must be wrong.

EirePlane · 26 Dec 2006 at 22:08

could just use the margin property, something like:

p {margin:5px;}

robmiller · 26 Dec 2006 at 22:23

jonnyc747 said:
yep see where your coming from - im not an expert on css at all. I thought text-indent was for everyline rather than just the first! I must be wrong.

Text indent works on the left of every line. If you want an indent on just the first line, apply a left margin or text-indent to the first letter of the element.

Are you sure you don't just want padding :confused:

Code:

<div style="padding:5px;">
akudhawfhafkah
</div>

joeyjojo · 26 Dec 2006 at 22:26

He's saying that IE and FF/Opera do padding differently. I assume that the container for the text has a very specific location, so you can't just lob padding: in there, as they will look different.