I want do a menu like on this site: http://www.accenture.com/us-en/pages/index.aspx ex. outsourcing. It's possible to do this using css and html. I can't create "li" or "ul" with columns.
My code
<body>
<style type="text/css">#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(menu_assets/images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 8px 0px 8px;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:underline;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:1px solid #0079b2;
border-right:1px solid #0079b2;
border-bottom:1px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:600px;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a{
background:url(menu_assets/images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
</style>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
<li class='last'><a href='#'><span>Product 4</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;"> </div>
</body>
Of course I search on web but I can't find solution.
Specific selectors
First off, when you use a CSS rule like #cssmenu ul or #cssmenu li, that CSS rule will get applied to the HTML tags for both the main menu and the sub-menus. Some of the styles may be getting applied to elements where they don't need to be applied. To avoid this possible confusion, use the > child combinator in more of the CSS selectors. For example:
#cssmenu > ul {...} // Only applied to main menu
#cssmenu > ul > li {...} // Only applied to main menu li tags
#cssmenu > ul > li > a {...} // Only applied to main menu links
#cssmenu ul ul {...} // No confusion here, since menu isn't 3 levels deep
#cssmenu ul ul li {...} // No confusion here, only applied to submenu li tags
#cssmenu ul ul li a {...} // No confusion here, only applied to submenu links
Floating the menu items
Second, if you're imitating the Accenture menu, the quickest way to display variable-width menu items on the right side of the page is to float the menu items to the left while floating the menu as a whole to the right.
#cssmenu > ul { float: right; ... }
#cssmenu > ul > li { float: left; ... }
...
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a> ... </li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
Sometimes floating a parent and child in opposite directions is problematic. If you have any trouble doing so, the safest option is to float the menu items to the right. In that case, to get them to display in the correct order, you'll have to reverse the order of the menu items in the HTML source code.
#cssmenu > ul > li { float: right; ... }
...
<ul>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a> ... </li>
<li class='active'><a href='index.html'><span>Home</span></a></li>
</ul>
Related
I'm trying to accomplish a few things and don't know where to start.
1. I would like to make it so that the menu would stretch across the entire width of the page.
2. I would like to refine the size of the subs to equal the width of the main option.
3. If I made it into a nav and changed the routing, would it be able to operate as DDM?
jsfiddle of the code in question: http://jsfiddle.net/Ph2Wb/
jsfiddle of the page I want to incorporate it into: http://jsfiddle.net/dQ3ey/
HTML
<ul id="menu">
<li>Home</li>
<li>Final</li>
<li>Midterm</li>
<li>Homework Assignments
<ul>
<li>CS/IS 101
<ul>
<li>Puzzles
<ul>
<li>Chapters 1-3</li>
<li>Chapters 4-6</li>
<li>Chapters 7-9</li>
<li>Chapters 10-12</li>
</ul>
</li>
<li>Word
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Excel
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Access
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>PowerPoint
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
<li>CS/IS 260
<ul>
<li>Ch. 1</li>
<li>Ch. 2</li>
<li>Ch. 3</li>
<li>Ch. 4</li>
<li>Ch. 5</li>
</ul>
</li>
</ul>
</li>
<li>Class Assignments
<ul>
<li>CS/IS 101
<ul>
<li>Puzzles</li>
<li>Word</li>
<li>Excel</li>
</ul>
</li>
<li>CS/IS 260
<ul>
<li>Puzzles</li>
<li>Word</li>
<li>Excel</li>
</ul>
</li>
</ul>
</li>
<li>Favorite Sites</li>
<li>About Me</li>
CSS
#menu, #menu ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2.5em;
}
#menu a:link, #menu a:active, #menu a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}
#menu a:hover{
background-color:#fff;
color:#333;
}
#menu li{
float:left;
position:relative;
}
#menu ul {
position:absolute;
width:12em;
top:2.5em;
display:none;
}
#menu li ul a{
width:12em;
float:left;
}
#menu ul ul{
top:auto;
}
#menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
You have to do lot of CSS changes to make it work like how you want. I have updated your fiddle and come up with the changes. It is very difficult to explain each and every thing. So kindly go through the code one by one yourself.
#menu{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2.5em;
width:100%;
background-color:#333;
display:inline-block;
}
#menu a:link, #menu a:active, #menu a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
width:100%;
}
#menu a:hover{
background-color:#fff;
color:#333;
}
#menu ul a:link, #menu ul a:active, #menu ul a:visited{
width:calc(100% - 12px);
}
#menu li{
float:left;
position:relative;
}
#menu ul {
position:absolute;
top:2.5em;
left:-2.5em;
list-style-type:none;
list-style-position:outside;
line-height:2.5em;
display:none;
width:100%;
}
#menu ul li{display:inline-block; width:100%}
#menu li ul a{
float:left;
}
#menu ul ul{
top:auto;
}
#menu li ul ul {
position:absolute;
left:100%;
margin:0px 0 0 -2em;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
FIDDLE DEMO
We were following this tutorial (http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/). The goal was to create a multilevel dropdown click menu with css/html and no js. The code works fine in firefox and even works in the demo shown in the tutorial in chrome, but downloading the code and using it separately doesn't work in chrome. Anyone have any ideas why? The code for the menu is:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<div class="example">
<ul id="nav">
<li>Home</li>
<li><a class="fly" href="#">Tutorials</a>
<ul class="dd">
<li>HTML / CSS</li>
<li><a class="fly" href="#">JS / jQuery</a>
<ul>
<li>jQuery</li>
<li>JS</li>
</ul>
</li>
<li>PHP</li>
<li>MySQL</li>
<li>XSLT</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#">Resources</a>
<ul class="dd">
<li><a class="fly" href="#">By category</a>
<ul>
<li>PHP</li>
<li>MySQL</li>
<li><a class="fly" href="#">Menu1</a>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li><a class="fly" href="#">Menu3</a>
<ul>
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
<li>Menu34</li>
</ul>
</li>
<li>Menu4</li>
</ul>
</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#">By tag name</a>
<ul>
<li>captcha</li>
<li>gallery</li>
<li>animation</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Go Back To The Tutorial</li>
</ul>
</div>
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}
New css Worked for me in both crome and firefox!::::
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:hover + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:hover + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}
In files for download is different html page. Difference is that live demo contain attribute tabindex="1" in some links. I downloaded source code from live example and it works in chrome now.
New code for your html page.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<div class="example">
<ul id="nav">
<li>Home</li>
<li><a class="fly" href="#" tabindex="1">Tutorials</a>
<ul class="dd">
<li>HTML / CSS</li>
<li><a class="fly" href="#" tabindex="1">JS / jQuery</a>
<ul>
<li>jQuery</li>
<li>JS</li>
</ul>
</li>
<li>PHP</li>
<li>MySQL</li>
<li>XSLT</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#" tabindex="1">Resources</a>
<ul class="dd">
<li><a class="fly" href="#" tabindex="1">By category</a>
<ul>
<li>PHP</li>
<li>MySQL</li>
<li><a class="fly" href="#" tabindex="1">Menu1</a>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li><a class="fly" href="#" tabindex="1">Menu3</a>
<ul>
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
<li>Menu34</li>
</ul>
</li>
<li>Menu4</li>
</ul>
</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#" tabindex="1">By tag name</a>
<ul>
<li>captcha</li>
<li>gallery</li>
<li>animation</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Go Back To The Tutorial</li>
</ul>
</div>
I have this CSS:
Here is the example: Here is the example: http://jsfiddle.net/GrkkW/1/
#menu{
width:952px;
height:36px;
line-height:36px;
padding:0 0 0 32px;
background-image:url(/images/menu_bg.gif);
background-position:top left;
background-repeat:repeat-x;
position:relative;
z-index:100;
float:left;
}
#menu li{
display:inline;
list-style-type:none;
float:left;
position:relative;
z-index:100;
}
#menu li a{
font-family:Tahoma;
font-size:11px;
color:black;
text-decoration:none;
margin:0 15px;
padding:3px 8px;
display: block;
}
#menu li > ul
{
display: none;
line-height: 20px;
height: 20px;
}
#menu li:hover ul{
display: block;
position:absolute;
margin: -5px ;
}
#menu li:hover li{
float: none; }
#menu li:hover li a{
background-color: #0C325F;
border-bottom: 1px solid #0C325F;
color: #D2DEEC; }
#menu li li a:hover {
background-color: #8db3ff; }
and HTML is this:
<ul id="menu">
<li>Home</li>
<li>Item1
<ul>
<li>SubItem1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>SubItem2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</li>
<li>Item2</li>
I'm using this to display a menu and submenu. What I want to achieve is that when an option from the second level is clicked then its submenu is visible. However currently when I click on menu, submenu at level 1 and level 2 are displayed simultaneously.
I'm wondering if somebody can help me with this and give some advise of the modifications I need to add to the CSS to achieve this?
Here is the example: http://jsfiddle.net/GrkkW/1/
html
<ul>
<li>Home</li>
<li>About
<ul>
<li>About-1</li>
<li>About-1</li>
<li>About-1
<ul>
<li>About-2</li>
<li>About-2</li>
<li>About-2
<ul>
<li>About-3</li>
<li>About-3</li>
<li>About-3
<ul>
<li>About-4</li>
<li>About-4</li>
<li>About-4</li>
<li>About-4</li>
</ul>
</li>
<li>About-3</li>
</ul>
</li>
<li>About-2</li>
</ul>
</li>
<li>About-1</li>
</ul>
</li>
<li>profile</li>
<li>Contact
<ul>
<li>contact-1</li>
<li>contact-1</li>
<li>contact-1</li>
<li>contact-1</li>
</ul>
</li>
</ul>
css
*{ padding:0px; margin:0px;}
ul{padding:0px; margin:0px; list-style:none; width:100%}
ul li{ float:left; padding-right:1px; position:relative;}
ul a{ text-decoration:none; display:table-cell; vertical-align:middle; text-align:center; color:#000; height:30px;
width:100px; background-color:#0CF; color:#fff;}
ul a:hover{ background-color:#36C;}
li > ul{ display:none; position:absolute; left:0px; top:100%;}
li:hover > ul{ display:block;}
li > ul li { padding:0px; padding-right:1px; padding-top:1px;}
li > ul li > ul{ top:0px; left:100%; padding-left:1px;}
li > ul li > ul li{width:100px;}
see this link
http://jsfiddle.net/bipin_kumar/DjvZ8/7/
I have got a submenu which expands from a nav menu type object when I hover over it. Right now, my main nav menu looks like so...
<div id= "navbar">
<ul>
<li><a href= "#" class= "navlink" id= "first"> First
<div class= "firstsubmenu">
<ul>
<li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
<li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
etc...
</ul>
</div></a></li>
<li><a href= "#" class= "navlink" id="second"> Second
<div class= "secondsubmenu">
<ul>
..and so on
</ul>
</div>
Right now, my css is looking like
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink:hover
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited
{
background-color:#ADD8E6;
color:#FFFFFF;
}
Before I tried making each item in the submenu a clickable link, everything showed up perfectly fine. IE: firstsubmenu showed up perfectly. It's css is
.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red;
width : 930px;
height : 25px;
z-index : 10;
}
But now that I added the links (made every list element within an block), firstsubmenu no longer appears.
The css for each link looked something like this
.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
But as I said, the submenu no longer even appears. I realize this is a bit of a long post, but any advice would be great.
You can use the below css and create pure css based menu.
Css:
body { padding: 3em; }
#navbar * { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 120px;
}
#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul {
display:block;
}
#navbar:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 120px;
margin-top: -20px;
}
Structure:
<div id="navbar">
<ul>
<li>Home</li>
<li>Abous Us »
<ul>
<li>About us 1</li>
<li>About us 2 »
<ul>
<li>XXX
<li>XXX
<li>XXX
</ul>
</li>
</ul>
</li>
<li>Download</li>
<li>Menus »
<ul>
<li>Menus 1</li>
<li>Menus 2 »
<ul>
<li>Menus 2-1
<li>Menus 2-2
<li>Menus 2-3
</ul>
</li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
jsBin live demo
I had to fix lot of errors in your HTML. Here is the css:
#navbar ul{
list-style:none;
margin:0; padding:0;
display:table;
}
#navbar li{
top:0px;
background:#bbf;
display:inline-block;
width:100px;
}
#navbar li ul li{
display:none;
}
#navbar li:hover li{
display:block;
}
And the fixed HTML:
<div id="navbar">
<ul>
<li>
First
<ul class="firstsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
<li>
Second
<ul class="secondsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
</ul>
</div>
Now, after it works, do with colors whatever you want.
Use also alt tags in your links and images, it improves your SEO and compilance.
Hey so I have a list, with some of the items containing other lists. The first level of lists needs to be inline, but any list a level down should be normal list-item. It works better if I show you. This is what I have:
However, I want Home Profile Groups Events and Frequencies to all be in one straight line, with any child lists below them. Here is the CSS:
#box1, #box2, #box3 {
background-color: #FC9;
padding:10px;
text-align:center;
}
#box1 li, #box2 li, #box3 li {
display:inline;
font-size:24px;
list-style:none;
}
#box1 li ul, #box2 li ul, #box3 li ul {
display:list-item;
list-style:none;
}
#box1 li ul li {
display:list-item;
font-size:18px;
list-style:none;
border:none;
}
#box1 li ul li ul {
display:list-item;
list-style:none;
}
#box1 li ul li ul li {
font-size:12px;
list-style:none;
border:none;
}
#box2 {
background-color:#6F9;
}
#box3 {
background-color:#C9F;
}
and here is the HTML:
<div id="box1">
<ul>
<li>Home</li>
<li>Profile
<ul>
<li>Edit Profile</li>
<li>Inbox
<ul>
<li>New Message</li>
<li>Sent</li>
</ul>
</li>
<li>Photos</li>
<li>Buddies</li>
</ul>
</li>
<li>Groups
<ul>
<li>Create Group</li>
</ul>
</li>
<li>Events
<ul>
<li>Plan Event</li>
</ul>
</li>
<li>Frequencies</li>
</ul>
</div>
<div id="box2">
<ul>
<li>Sitemap</li>
<li>Help</li>
</ul>
</div>
<div id="box3">
<ul>
<li>Private Policy</li>
<li>Code of Conduct</li>
<li>Terms of Use</li>
</ul>
</div>
Thanks for any help you can give.
Try floating the outermost lis:
#box1 li, #box2 li, #box3 li {
display:inline;
font-size:24px;
list-style:none;
float: left; /* float the outer ones so they line up next to each other */
}
/* snip */
#box1 li ul li {
display:list-item;
font-size:18px;
list-style:none;
border:none;
float: none; /* don't float the inner ones */
}
You'll need to add clear: both to #box2 to get things to line up, too.