By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,510 Members | 1,815 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,510 IT Pros & Developers. It's quick & easy.

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

P: 16
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
Share this Question
Share on Google+
1 Reply


P: 5
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.