floats adding up to 100%

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

floats adding up to 100%

Post by s.dot »

anytime i have floating divs that add up to 100%, the last div always breaks off and goes to a new line

for instance, this.. I had to make add up to 99% so it wouldn't break to the next line.

Code: Select all

.navButton {
	
	/* Size Properties */
	height: 30px;
	width: 20%;
	
	/* Float */
	float: left;
	
	/* Text Align */
	text-align: center;
	
	/* Border Properties */
	border-right: solid 1px #000000;
	
}

.navButtonR {
	/* Size Properties */
	height: 30px;
	width: 19%;
	
	/* Float */
	float:left;
	
	/* Text Align */
	text-align: center;
	
}
When combined with a mouseover color change on the div that's 1% less than what it should be, it adds up to an ugly effect! is there a way around this?

[edit]
Seen here: http://65.29.93.164/freegrabbag/
on the last "nav button"
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

In IE or Firefox or both?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I think this is a known issue with the way CSS boxes are handled. The outer edges are butted up against the outer edges of those elements that meet up against it (I believe), so there is a possibility that 100% is actually wider that 100% of your screen. I think, also, that addind in a fixed measurement can get hairy if your vertical scroll bars show up on the side of your browser window.

Of course, this is all speculative as I am not certain about any of it.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

astions wrote:In IE or Firefox or both?
Both
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

It's the borders. The proper way to build a menu is to use a list.

http://www.sovavsiti.cz/css/horizontal_menu.html

EDIT: Better example - http://www.projectseven.com/tutorials/css/uberlinks/
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Nice.

But if I float LI's with 20% width, won't i wind up with the same problem?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

Set the border to 0px and it will work at 100%.
(#10850)
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

arborint wrote:Set the border to 0px and it will work at 100%.
That worked.

But I was using a border for aesthetic purposes. Might just go with a thin dot for a background image instead of a border
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Wow, that looks cool.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I second that article from Alistapart. A list is better to mark up your navigation, uh... list, then divs. Also an interesting article is doors meet sprites

The problem with not being able to set a % width and border to one element at the same time might also be solved by setting the border on an element inside the element with the width. Say you give the li 20% width, and the a inside the border and display:block;
Post Reply