/    Sign up×
Community /Pin to ProfileBookmark

float question

Copy linkTweet thisAlerts:
Feb 09.2007

I have an unordered list. Each list item is set at 145px wide and to float:left. The container div is 750px width. Is there a way to center these, so that the group is aligned center, rather than the default left?

[code]
#nav {margin: 0; padding: 0; display: block; text-align: center;}
#nav ul {margin: 0 auto; padding: 0; width: 750px;}
#nav ul li {list-style-type: none; display: block; float: left; margin: 0 6px;
font-size: .8em; font-family: verdana, arial, san-serif; line-height: 1.5em; text-align: center; letter-spacing: .02em;}
#nav ul li a {display: block; width: 145px; padding: 6px 0;
color: #444; background-color: #000;
font-weight: bold; text-decoration: none;}
[/code]

KDLA

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriFeb 10.2007 — A little maths maybe required ?

The width of the <a> elements is 145px, plus the width of the <li> margin of 2x 6px, gives total width of each <li> of 157px. How many elements do you have as 4 will give total width of 628px, while 5 elements gives a total width of 785px.... neither of which is 750px. If you make the width of the <ul> the same as the total of the <li> widths, then your auto margins on the <ul> will centre it.

Cheers

Graeme
Copy linkTweet thisAlerts:
@KDLAauthorFeb 10.2007 — Yep, I can see where you see that, Centauri. The 145px came from constantly manipulating the widths for IE. For some reason, it kept pushing the <li> to the next line. Originally, the widths were 155px, and I was needing at least 35px of space on either side of the navigation without usage of absolute positioning. (this site has to be cross-browser friendly)

Fang's recommended method worked just fine. Thanks to you both! ?
×

Success!

Help @KDLA spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...