470,810 Members | 1,119 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,810 developers. It's quick & easy.

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

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
Oct 15 '06 #1
1 12033
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
Oct 15 '06 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

13 posts views Thread by Chris Goldie | last post: by
4 posts views Thread by Timo Nentwig | last post: by
8 posts views Thread by Michael | last post: by
4 posts views Thread by Peter | last post: by
13 posts views Thread by meltedown | last post: by
2 posts views Thread by hawat.thufir | last post: by
2 posts views Thread by Shahid | last post: by
reply views Thread by mihailmihai484 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.