[html] <ul> side by side

[MK-2]

Me again!

 

I've used an accordion menu jscript thing to show important notices on a page, which lays it out in an

. 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

 

</pre><ul class="acc" id="acc">

Important Notices (click here to show/hide)






</ul><br><script type="text/javascript" src="js/script.js"></script><br><script type="text/javascript"><br />
var parentAccordion=new TINY.accordion.slider("parentAccordion");<br />
parentAccordion.init("acc","h3",0,0);<br />
<br />
</s

 

and the css that accompanies it

 

#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]

oh and as an extra addition, you cant just do an extra

as it needs to be a totally separate

to create a new menu from

[bmdixon]

Quick and nasty but this seems to work...

<br />
ul {<br />
display: inline;<br />
list-style-type: none;<br />
}<br />
<br />
#menu1 {<br />
float: left;<br />
}<br />
<br />
#menu2 {<br />
float: right;<br />
}<br />
<br />
#menudiv {<br />
clear:both;<br />
}<br />
<br />




This is a menu
this is a separate menu

[sonofsanta]

I can't quite make sense of the code - you really, really shouldn't be nesting tags inside an

tag like that, as far as I can tell you're trying to replicate a

Definition List - but the easiest way of getting floats to work is to use a

---

before and a

---

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]

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

• etc as that is what the jscript file is looking for unfortunately

[sonofsanta]

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...

 

 
   [gubbins here]
 
 
   [gubbins here]
 

 

with the CSS

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

---

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]

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

[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

[sonofsanta]

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

 

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