Page 1 of 1

floats adding up to 100%

Posted: Fri Aug 04, 2006 10:09 pm
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"

Posted: Fri Aug 04, 2006 10:17 pm
by Benjamin
In IE or Firefox or both?

Posted: Fri Aug 04, 2006 10:18 pm
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.

Posted: Fri Aug 04, 2006 10:19 pm
by s.dot
astions wrote:In IE or Firefox or both?
Both

Posted: Fri Aug 04, 2006 10:22 pm
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/

Posted: Fri Aug 04, 2006 10:26 pm
by s.dot
Nice.

But if I float LI's with 20% width, won't i wind up with the same problem?

Posted: Fri Aug 04, 2006 10:28 pm
by Christopher
Set the border to 0px and it will work at 100%.

Posted: Fri Aug 04, 2006 10:31 pm
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

Posted: Fri Aug 04, 2006 10:32 pm
by Benjamin

Posted: Fri Aug 04, 2006 10:45 pm
by s.dot
Wow, that looks cool.

Posted: Sat Aug 05, 2006 1:18 am
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;