Elements in DIV start a new line
css, html
Solution
Elements that are laid inline are sensitive to their structure in your HTML - if you comment out the white-space between the `<li>`'s or manually remove the white-space the menu will line up as expected.
Another alternative is to set `font-size` on the `<ul>` to 0 and then re-declare the desired font-size for the `<li>`'s. Here is an informative article that discusses this popular issue and additional ways to solve it.
Problem
I need your help in a HTML/CSS issue: I'm creating a very simple web page in which there is a navigation bar composed of a "ul" containing five "li". The "ul" is 900px wide and it's inside a "div". Each "li" is 900/5 = 180px wide. Despite that, those elements create a new line. This is what I expect (more or less): This is what I obtain: This is the HTML: ``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>My First Website</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/princstyle.css"> </head> <body> <div id="container"> <div id="fascia"> <h1>My First Website</h1> </div> <hr class="menu"> <div id="nav"> <ul> <li><a href="img/a.jpg">About</a></li> <li><a href="img/b.jpg">Photo</a></li> <li><a href="img/c.jpg">News</a></li> <li><a href="img/d.jpg">Video</a></li> <li><a href="img/e.jpg">Contacts</a></li> </ul> </div> <hr class="menu"> </div> </body> </html> ``` This is my first CSS file (a reset standard CSS file): ``` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ``` This is my real CSS file: ``` @charset "utf-8"; /* CSS Document */ body { background-color:#363636; background-image:url(../img/noise.png); height:100%; width:100%; margin:0; padding:0; } #container { position:relative; width:1000px; height:700px; margin:0 auto; } #fascia { width:950px; padding:25px; font-size:4em; position:relative; } html { height:100%; } h1,h2,h3,h4,h5,h6,p{ color:#FFF; font-family:Arial,Helvetica,sans-serif; text-align:center; } hr.menu { margin:0; } #nav { width:100%; position:relative; } #nav ul { width:900px; margin:0 auto; } #nav ul li { display:inline-block; } #nav ul li a { display:block; width:180px; font-weight:bold; color:#FFF; text-transform:uppercase; text-align:center; text-decoration:none; padding:5px 0; } #nav ul li a:hover { background-color:#C09; } ``` Sorry for the length of this message and thank you for any answers! EDIT: here is the jsFiddle