<ul> side by side

**MK-2** · 6th July 2011, 03:42 PM

Me again!

I've used an accordion menu jscript thing to show important notices on a page, which lays it out in an <ul>. thing is i want two, side by side, but every time i try using float:left things get mixed up. i've included the whole bit that displays one menu and the css, but what i want is two individually controlled menus

HTML Code:

<ul class="acc" id="acc">
<li>
<h3><center>Important Notices (click here to show/hide)</center></h3>
<div class="acc-section">
<div class="acc-content">
<?php include "rss/urgentnotices.php"; ?>
</div>
</div>
</li>
</ul>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);

</script>

and the css that accompanies it

PHP Code:

 #acc {
width:457px; 
list-style:none; 
color:[URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=033]#033[/URL] 
margin:0 auto 40px
}

#acc h3 {
width:443px; 
border:1px solid [URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=6f9387]#6f9387[/URL] 
padding:6px 6px 8px; 
font-weight:bold; 
margin-top:5px; 
cursor:pointer; 
background:url(images/header.jpg)
}

#acc h3:hover {
background:url(images/header_over.jpg)
}

#acc .acc-section {
overflow:hidden; 
background:#fff
}

#acc .acc-content {
width:425px; 
padding:15px; 
border:1px solid [URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=9ac1c9]#9ac1c9[/URL] 
border-top:none; 
background:#fff
}

is it possible to have them both on the same line, but centred (so the two will not align from the left but from the centre yet the text in them is still normally aligned?

as an addition, i have a footer.php (and footer in css) that keeps rising up if i use float:left on the menus. but they seem to be fixed by using clear:both in css for the footer, is that the correct method?

**MK-2** · 6th July 2011, 03:47 PM

oh and as an extra addition, you cant just do an extra <li> as it needs to be a totally separate <ul> to create a new menu from

**bmdixon** · 6th July 2011, 03:56 PM

Quick and nasty but this seems to work...

HTML Code:

<html>
<head>
<style type="text/css">
ul {
display: inline;
list-style-type: none;
}

#menu1 {
float: left;
}

#menu2 {
float: right;
}

#menudiv {
clear:both;
}

</style>
</head>
<body>
<div id="menudiv">
<ul id="menu1"><li>This is a menu</li></ul>
<ul id="menu2"><li>this is a separate menu</li></ul>
<div>
</body>
</html>

**sonofsanta** · 6th July 2011, 03:56 PM

I can't quite make sense of the code - you really, really shouldn't be nesting tags inside an <li> tag like that, as far as I can tell you're trying to replicate a <dl> Definition List - but the easiest way of getting floats to work is to use a <hr> before and a <hr> after the floated items, with style="clear: both; visibility: hidden; padding: 0; margin: 0;" - that'll create an invisible break above and below so that other elements don't get confused by the two floating items.

Alternative is to contain the two UL's inside a DIV, as they will float inside the DIV and not have an impact on items outside that element.

Hope some of that makes sense!

**MK-2** · 6th July 2011, 04:09 PM

this uses an accordion menu jscript file and that is how they have it laid out, i didnt create any of that myself, it was taken from their example one so i have to lay it out like that using <ul><li><div> etc as that is what the jscript file is looking for unfortunately

**sonofsanta** · 7th July 2011, 08:38 AM

Alas, nevermind then.

If you can wrap it in a container div then, that'd be the most elegant way of doing it, something along the lines of...

Code:

<div class="floatContainer">
  <ul class="acc">
    [gubbins here]
  </ul>
  <ul class="acc">
    [gubbins here]
  </ul>
</div>

with the CSS

Code:

ul.acc {
  float: left;
  width: 48%;}

As far as I can remember, that should be enough to do the trick. You may still need some of the clearing <hr> tags mentioned earlier. If it doesn't work, try using position: relative; in the DIV styling as well, which shouldn't affect the layout but may force the floats to work differently (I think that used to work).

My CSS is a bit rusty these days I fear, but hopefully that works!

**MK-2** · 7th July 2011, 01:39 PM

i went with the overall div doing float as you suggested. thanks

**comedydave** · 13th July 2011, 01:56 PM

The overall div may have been a bit overkill. As essentially you are using a block element to wrap an inline element.
Try using "display:block;" on the ul itself to make the ul act like a div. This should help cut down on your markup

**sonofsanta** · 14th July 2011, 08:28 AM

Originally Posted by comedydave

The overall div may have been a bit overkill. As essentially you are using a block element to wrap an inline element.
Try using "display:block;" on the ul itself to make the ul act like a div. This should help cut down on your markup

<ul> defaults to display: block; anyway. Source: Default style sheet for HTML 4

LinkBack

Thread Tools

Search Thread

<ul> side by side

Thanks to sonofsanta from:

Similar Threads

Running ABTutor and NSS side by side?

[MS Office - 2007] Office 2003/2007 side-by-side problems with Outlook 2007

Crossing Over To The Other Side....

Going over to the dark side

Thread Information

Users Browsing this Thread

Posting Permissions