Databases
StackOverflow2013
Postsdbo
POElements in DIV start a new line
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POElements in DIV start a new line
    text
    copied!<p>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, that elements create a new line.</p> <p>This is what <strong>I expect</strong> (more or less): <img src="https://i.stack.imgur.com/rpofz.jpg" alt="enter image description here"> </p> <p>This is what <strong>I obtain</strong>: <img src="https://i.stack.imgur.com/j3cj6.jpg" alt="enter image description here"></p> <p>This is the <strong>HTML</strong>:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;My First Website&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/reset.css"&gt; &lt;link rel="stylesheet" type="text/css" href="css/princstyle.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="fascia"&gt; &lt;h1&gt;My First Website&lt;/h1&gt; &lt;/div&gt; &lt;hr class="menu"&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="img/a.jpg"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="img/b.jpg"&gt;Photo&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="img/c.jpg"&gt;News&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="img/d.jpg"&gt;Video&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="img/e.jpg"&gt;Contacts&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;hr class="menu"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is my <strong>first CSS file</strong> (a reset standard CSS file):</p> <pre><code>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; } </code></pre> <p>This is my <strong>real CSS file</strong>:</p> <pre><code>@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; } </code></pre> <p>Sorry for the length of this message and thank you for any answers! </p> <p><strong>EDIT:</strong> here is the <a href="http://jsfiddle.net/Yfs7r/" rel="nofollow noreferrer">jsFiddle</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload