Fri, 2009-10-30 01:36
Hey guys,
newbie here that needs a little help.. I have searched near and far for this solution but can't seem to find it.. I am creating a web site where there's going to be two div columns (one being a menu and the other being where the content of the site will b), i was able to use the float function to have them lined up side by side. Here is the coding to allow you guys to know what i'm talking about.
#menu { position:relative; float:left; width:200px; height:auto; padding:0px; margin:0px; } #main { position:relative; float:right; width:580px; height:auto; padding:0px; margin:0px; }
I was able to have them side by side, but if there is any content in #main that is longer than #menu, the content will appear under where #menu ends. I can't seem to have the content contained within #main. It's driving me crazy. I'm sorry if this is as easily fix, i just can't see it.
Thanks for your time.
Raza
Fri, 2009-10-30 01:46
#1
Post the markup.
Post the markup.
Fri, 2009-10-30 01:51
#2
Hi Verschwindende, here is
Hi Verschwindende,
here is what i have.
<style type="text/css"> body { background-color:#ffffff } #global { position:relative; margin-left:auto; margin-right:auto; width: 780px; height:auto; text-align:left; background-color:#ffffff; padding:0px; border: 1px solid #000; z-index:1; } #banner { position:relative; width:auto; height:auto; border-bottom: 1px #000000; } #content { position:relative; width:auto; height:auto; } #menu { position:relative; float:left; width:200px; height:auto; padding:0px; margin:0px; } #main { position:relative; width:580px; float:right; height:auto; padding:0px; margin:0px; } </style> <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="global"> <div id="banner"><img src="../images/banner2.jpg" width="780" height="113" /></div> <div id="content"> <div id="menu"> <ul id="MenuBar1" class="MenuBarVertical"> <li><a href="index.htm">Home</a> </li> <li><a href="rods.htm" class="MenuBarItemSubmenu">Rods</a> <ul> <li><a href="/rods/jigging.htm">Jigging</a></li> <li><a href="/rods/popping.htm">Popping</a></li> <li><a href="/rods/inshore.htm">Inshore</a></li> <li><a href="/rods/offshore.htm">Offshore</a></li> <li><a href="/rods/blanks.htm">Blanks</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">Item 3</a> <ul> <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul> <li><a href="#">Item 3.1.1</a></li> <li><a href="#">Item 3.1.2</a></li> </ul> </li> <li><a href="#">Item 3.2</a></li> <li><a href="#">Item 3.3</a></li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> </div> <!-- TemplateBeginEditable name="EditRegion1" --> <div id="main"></div> <!-- TemplateEndEditable --> </div> </div> </script> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> </body> </html>
Thanks,
Raza
Fri, 2009-10-30 02:01
#3
Add, margin-left: 200px; to
Add, margin-left: 200px; to #main or margin: 0 0 0 200px; if you want to use shorthand.
You can also remove the position on everything...
and the width: auto and height: auto which are default styles, no need to repeat them.
Fri, 2009-10-30 03:10
#4
Hey Deuce, thank you so much
Hey Deuce,
thank you so much for your reply.. I had added margin-left: 200px to #main but the problem is still around.. I attached a picture below to show you what is happening.
#main { position:relative; width:580px; float:right; height:auto; padding:0px; margin:0px; margin-left:200px; } </style>
And that is where i added the margin-left.
Fri, 2009-10-30 05:51
#5
float both of them left and
float both of them left and if that doesn't work, post a live example.
Fri, 2009-10-30 06:53
#6
You can't have the width and
You can't have the width and a margin.