Databases
StackOverflow2013
Postsdbo
POFluid Width On a Block Element Containing A Horizontal List
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFluid Width On a Block Element Containing A Horizontal List
    text
    copied!<p>I have a problem. Working on a php script, I must first get the HTML/CSS down right. My goal is to write a vertical menu, that shows a horizontal list sub menu, containing more vertical menu lists.</p> <p>The problem I'm having is my horizontal list with my block element will not appear horizontal, not unless I add a fixed width to the block element. Is there a way around that?</p> <p>Sample Document:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;style type="text/css"&gt; #vertimenu { width: 150px; font-size: 0.75em; } ul.main-links { background: none; } ul.main-links li { background: #999; margin-bottom: 1px; list-style: none; width: 150px; } ul.main-links li:hover { background: #ccc; position: relative; } ul.main-links li div.sub-container { background: #ccc; display: none; margin: 0; padding: 5px 5px 5px 0; } ul.main-links li:hover div.sub-container { background: #999; display: inline-table; position: absolute; top: 0; left: 150px; } ul.sub-categories { margin: 0 0 0 5px; padding: 0; } ul.sub-categories li{ float: left; list-style: none; display: inline; text-align: center; background: #ccc; margin: 0 0 1px 0; } ul.sub-links { margin: 0; padding: 0; background: none; } ul.sub-links li{ list-style: none; margin: 0; padding: 0; background: #999; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="vertimenu"&gt; &lt;ul class="main-links"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;div class="sub-container"&gt; &lt;ul class="sub-categories"&gt; &lt;li&gt;Category A &lt;ul class="sub-links"&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Category B &lt;ul class="sub-links"&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Category C &lt;ul class="sub-links"&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>If you add a fixed width of about 500px to the .sub-container, then the horizontal list within it works. I cannot add a fixed width because it wouldn't work as intended when I add in my php. I tried using other display values besides block, but none do the trick. </p> <p>I suppose I could use a table instead of a horizontal list within my display:block element, but I would like to avoid that if possible because it's not really tubular data. <strong>EDIT</strong>: using a table has the same issue as the horizontal list, so that won't work properly either.</p> <p>Sorry if i don't make sense, I'm not an expert with proper terminology...</p> <p>Any ideas?</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