Soldier (Level 11) Join Date: Dec 2011 Posts: 121 iTrader: (0) unordered list

charisma44 · 12-02-2012, 06:55 PM

I have two unordered list side by side. How do I start a second row below it.

Code:

<ul id="left-menu">
<a>Cuba</a>
 <li><a href="http://trypcayococo.ca/" target="_blank">TRYP Cayo Coco</a></li>
<li><a href="http://www.meliacuba.com/cuba-hotels/hotel-melia-cayococo/?gclid=CMHnyNqE_LMCFc5cMgod7i8AIQ" target="_blank">Meliá Cayo Coco</a></li>
<li><a href="http://www.meliacuba.com/cuba-hotels/hotel-sol-cayococo/?gclid=CJesp5iF_LMCFelDMgodLCAA9A" target="_blank">Sol Cayo Coco</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

<ul id="right-menu">
<a>Jamacia</a>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

Code:

#menus {
   overflow:hidden;
}
#left-menu, #right-menu {
   float: left;
}
#left-menu {
   margin-right:250px; 
}

Excavator · 12-02-2012, 09:44 PM

Hello charisma44,
Your ul lists are invalid, you are not allowed to put an anchor there. Has nothing to do with your issue but it's a perfect place to use a definition list.

To place another list under the first, it can be floated just like the first one. You will also need the clear to stop it from going beside #right-menu.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;	
	padding: 200px 20px 300px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
.left-menu, #right-menu {float: left;}
.left-menu {margin-right:250px;}
#right-menu {clear: right;}
</style>
</head>
<body>
    <div id="container">
        <dl class="left-menu">
            <dt><a>Cuba</a></dt>
                <dd><a href="http://trypcayococo.ca/">TRYP Cayo Coco</a></dd>
                <dd><a href="http://www.meliacuba.com/cuba-hotels/hotel-melia-cayococo/?gclid=CMHnyNqE_LMCFc5cMgod7i8AIQ">Meliá Cayo Coco</a></dd>
                <dd><a href="http://www.meliacuba.com/cuba-hotels/hotel-sol-cayococo/?gclid=CJesp5iF_LMCFelDMgodLCAA9A">Sol Cayo Coco</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
        </dl>        
        <dl id="right-menu">
            <dt><a>Jamacia</a></dt>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
        </dl>
        <dl class="left-menu">
            <dt><a>Cuba</a></dt>
                <dd><a href="http://trypcayococo.ca/">TRYP Cayo Coco</a></dd>
                <dd><a href="http://www.meliacuba.com/cuba-hotels/hotel-melia-cayococo/?gclid=CMHnyNqE_LMCFc5cMgod7i8AIQ">Meliá Cayo Coco</a></dd>
                <dd><a href="http://www.meliacuba.com/cuba-hotels/hotel-sol-cayococo/?gclid=CJesp5iF_LMCFelDMgodLCAA9A">Sol Cayo Coco</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
                <dd><a href="#">Linky</a></dd>
        </dl>        
    <!--end container--></div>
</body>
</html>