Geek Answers Handbook

Why don't float elements match when using width?

I have the following code below, but I don’t understand why the div rightnav element appears below the leftnav div leftnav if I applied the width property to it. What am I doing wrong, or am I misunderstanding the use of floats?

CODE

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="en-us" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="copyright" content="&copy; 2012" /> <title>DIV example</title> <base href="" /> <link rel="stylesheet" href="" /> <style type="text/css"> * { margin: 0px; padding: 0px; font-family: Arial, Verdana, sans-serif; font-size: 100%; } #content { width: 700px; margin-top: 20px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #leftnav { float: left; width: 200px; border-width: 1px; border-color: #000000; border-style: solid; } #rightnav { border-width: 1px; border-color: #000000; border-style: solid; } </style> </head> <body> <div id="container"> <div id="content"> <div id="leftnav">left nav</div> <div id="rightnav">right nav</div> </div> </div> </body> </html>

Exit

enter image description here

Now, if you change the code as follows by applying the width property to the rightnav , the element appears below leftnav . I thought this might be related to the width of the div content element, but there is enough width with a combination of both div elements, i.e. 200px + 200px <700px

CODE

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="en-us" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="copyright" content="&copy; 2012" /> <title>DIV example</title> <base href="" /> <link rel="stylesheet" href="" /> <style type="text/css"> * { margin: 0px; padding: 0px; font-family: Arial, Verdana, sans-serif; font-size: 100%; } #content { width: 700px; margin-top: 20px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #leftnav { float: left; width: 200px; border-width: 1px; border-color: #000000; border-style: solid; } #rightnav { width: 200px; border-width: 1px; border-color: #000000; border-style: solid; } </style> </head> <body> <div id="container"> <div id="content"> <div id="leftnav">left nav</div> <div id="rightnav">right nav</div> </div> </div> </body> </html>

OUTPUT

enter image description here

+4
source share
2 answers

In your first example, #rightnav does not float, but it remains on the right because it does not have a clear:left; rule clear:left; . See here: http://jsfiddle.net/5sHdg/

In your second example, when you specify the width for #rightnav, the browser has an explicit rule about the size of the div, so it displays it as a block element. But it does not float near C # leftnav, because it lacks the float:left; rule float:left; . See here: http://jsfiddle.net/Br4Lm/

So remember:

  • Use a float in each div that should be placed in addition to another, thereby overriding its appearance as a block element.
  • If you expect the div element below the divs to be floating, be sure to include clear:both; ( left , right or both );
+6
source

Adding overflow: hidden to #rightnav will solve your problem. http://jsfiddle.net/Wexcode/gCVaz/

An explanation of why this works can be found here: http://colinaarts.com/articles/the-magic-of-overflow-hidden

+3
source

More articles:


All Articles