PDA

View Full Version : How to wrap around a spry menubar


Abbica
09-03-2010, 09:38 AM
Hi, I have a vertical spry menu bar on the left of my web page but the main body text which is to the right will only go below the spry menu, won't float beside it. Anyone any idea what I have done wrong here, I can't figure it out at all. I have copied my body and left bar in. I have also included the main parts of the menu vertical bar in, maybe it is there, I would be really grateful for help with this, I can't get it to float along side it.

}
#body {
width: 570px;
margin-left: 230px;
position: relative;
margin-top: 32px;
bottom: 0px;
right: 17px;
}

Then for my Spry menu I just have it in a left Bar:-
}
#leftbar {
float: left;
width: 165px;
position: relative;
left: 10px;
}

Then my first part of my menu bar Vertical reads this ul.MenuBarVertical
{
margin: 0;
list-style-type: none;
font-size: 85%;
cursor: default;
width: 145px;
font-weight: normal;
padding-left: 15px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
padding-right: 0;
padding-bottom: 0;
}

and then the ul.MenuBarVertical ul reads this
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 95%;
position: absolute;
z-index: 1020;
cursor: default;
width: 145px;
left: -1000em;
top: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #CCC;
font-weight: normal;
border: 1px inset #CCCCCC;
}

DWcourse
09-03-2010, 04:13 PM
I assume the content you want to wrap is in a div. In that case the combined width of the menubar and the content div is probably greater than the width of the container or wrapper div that holds them. That forces the content div to drop below the menu.

The answer is either to make the container wider or the content narrower. (remember the width includes padding, borders and margins in addition the the width setting.