DIV Borders

Printable View

Aug 19th, 2002, 05:24 AM
alex_read

DIV Borders

Hi all!

Can someone tell me how I can display a border on a DIV tag please?

Code:

<HTML> <HEAD> </HEAD> <BODY> <DIV style="width:100px;height:100px" style="border:5"> <TABLE width="100px" height="100px" border="0"> <TR><TD> </TD></TR> </TABLE> </DIV> </BODY> </HTML>
Aug 19th, 2002, 05:40 AM
Rick Bull

It's the border:5 bit that's wrong - you're not specifying a unit (i.e. px). Also you can add a border style and colour like so:

Code:

<DIV style="width:100px;height:100px" style="border:5px solid black">
Aug 19th, 2002, 05:45 AM
alex_read

I did try with the units, it was the colour I missed, thanks for the help Rick! :)
Aug 19th, 2002, 06:04 AM
alex_read

Last one then, can you tell me how I can make the div be positioned in the center of the screen please?

<DIV style="border:5px solid black; Align:Center">
Aug 19th, 2002, 06:30 AM
da_silvy

<DIV style="border:5px solid black;" align="center">

i think :o
Aug 19th, 2002, 06:34 AM
alex_read

nice try! ;) Thanks for the suggestion, tried that one though.
That's the only 2 ways I've ever positioned an element. :eek:
Aug 19th, 2002, 06:38 AM
alex_read

It's okay thanks, apparently the align=center bit was taken out of the DIV tag spec in HTML version 4, I've got around it using the <CENTER></CENTER> tags around the DIV.

Many thanks for all the help!
Aug 19th, 2002, 06:45 AM
da_silvy

:p

that was going to be my next suggestion...

What browser are you using as <div align="center"> works fine in ie6..?
Aug 19th, 2002, 06:46 AM
alex_read

errr, IE6 ?!?!?!?!

Maybe I've done something to bugger up my broswer then, weird! :confused: :eek:
Aug 19th, 2002, 06:53 AM
da_silvy

hehehe

yeah

just checked it again to make sure i wasn't going insane :p

Yes, it's fine, DIV tags work with the align property :)
Aug 19th, 2002, 11:13 AM
punkpie_uk

hi, it's probably best if you use use css to position the element as align for the div tag is now deprecated.

Try something like this...

Code:

<div style="width:100%; text-align:center;"> <div style="width:100px;"> Some text </div> </div>

This is actually an unofficial way to do it. The official "correct" way is to set the margins to auto...

Code:

<div style="width:100px; margin-left:auto; margin-right:auto;">Some Text</div>

..but I believe this ins't supported by all browsers as yet.

Also, did you notice in your original post you had 2 style attributes? ;)
Aug 19th, 2002, 12:11 PM
Rick Bull

Lee's right, CSS is a better way to do it, but I think it only works in Mozilla like that. The text-align thing should work at all as it's only supposed to be inline content (hence text-align) and that should center the text inside the DIV, not the DIV. If IE did what it's supposed to we wouldn't be in this mess right now :D ;)

The other thing I do is just indent either side:

Code:

<div style="margin:0em 5em;"> This should be indented 5ems from the sides. </div>