How do you align <ol> and <ul> elements when they are contained in a floated box?

[jasonchan]

How do you align <ol> and <ul> elements when they are contained in a floated box?

Here is my website: http://geocities.com/jasonchan483/

Here's my problem.
The markers of the lists are located out of the floated box when i set the margin to 0px. I actually want to align the <ol> and <ul> the same distance as i have aligned the paragraph of the second column, which is margin-left: 20px

i.e.

#column2 p {
margin-top: 0px;
margin-left: 20px;
}

However, when i set the margin-left to 20px in the ordered or unorder lists, only the text is aligned but the markers are not.

ie.

#column2 ul {
margin-left: 20px;
}

As of now, the ul margin-left is set to 35 px, a rough alignment.


My question is... is it possible to find out an exact alignment or fix this issue???

Thanks in advance guys,

chan

[Bethrezen]

hi

try reading this This

note the command to force the bullets to be displayed inside the containing box

list-style-position: inside;

try applying this and you might have better luck

now if you are using a lists nested in a list then things can get a lil more complicated and will likely require the uses of an additional class or id

also note when trying to align lists that you need to change both the margin and the padding. This is because Internet Explorer and Opera opted to create the indent with the left margin, while Mozilla/Netscape use padding