How to indent text within a div using HTML and CSS?

huh??

I am new to both Boards and to web development but I must create a website using the two technologies mentioned above.

Anyway my burning issue at the moment is how to indent entire divs, Can this be done by changing my CSS?

For example I want:

___________Hello,

___________I'm new here.

___________Your help would be great

Instead of:

Hello,

I'm new here.

Your help would be great.


P.s. I tried using the npsb or whatever keyword it is that indents text but this was very messy as it only indents that line.

Thanks for any advice!

Giblet

Use padding, text-indent only works on the first line.
div { padding: 10px; }

Margins can be used too, but they are used for spacing on the outside of the element.

If you are having issues with the width after using padding, either subtract the width of the padding (both sides) from the width of the container, or use
box-sizing: border-box;
or
box-sizing: padding-box;

box-sizing isn't supported in some browsers though, and some browsers require prefixes such as -moz-box-sizing, or -webkit-box-sizing.

Liam Byrne

Giblet wrote: »

Use padding, text-indent only works on the first line.
div { padding: 10px; }

Margins can be used too, but they are used for spacing on the outside of the element.

If you are having issues with the width after using padding, either subtract the width of the padding (both sides) from the width of the container, or use
box-sizing: border-box;
or
box-sizing: padding-box;

box-sizing isn't supported in some browsers though, and some browsers require prefixes such as -moz-box-sizing, or -webkit-box-sizing.

Avoid padding! It's completely different across browsers.

Just set the margin of everything within the div to 10 or whatever.

Giblet

Why avoid padding? Just take the other browsers into account? You would have to create another inner element to use margins in that way. If you want all padding to be consistent, use the correct box-sizing if need be (as in, make newer browsers behave like older browsers), or just use a conditional statement to target ie if that's the issue, and just avoid the float/margin bug is ie.

Placebo

isnt box model just different in older ie's?
not sure how you can avoid padding without using extra div's

Giblet

Box model is border-box in quirks mode. (Old IE and IE6 in some respects).
Margins have problems in old IE too, the infamous
http://www.positioniseverything.net/explorer/doubled-margin.html

Liam Byrne

Placebo wrote: »

isnt box model just different in older ie's?
not sure how you can avoid padding without using extra div's

They don't need to be divs - they can be standard elements inside the "padded" div, such as paragraphs and uls and the like.

Smithy2306

Use the css margin and float attributes. If you want the text inside the div centered use text-align: center in the divs css.