• Locked
6 replies [Last post]
Fri, 2009-10-30 01:36
razaazar
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT-4
Joined: 2009-10-30
Posts: 3
Points: 4

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

Top
Tags:
Fri, 2009-10-30 01:46
#1
Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2043
Points: 2268

Post the markup.

Post the markup.

Top
Fri, 2009-10-30 01:51
#2
razaazar
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT-4
Joined: 2009-10-30
Posts: 3
Points: 4

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

Top
Fri, 2009-10-30 02:01
#3
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Fri, 2009-10-30 03:10
#4
razaazar
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT-4
Joined: 2009-10-30
Posts: 3
Points: 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.

Top
Fri, 2009-10-30 05:51
#5
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

float both of them left and

float both of them left and if that doesn't work, post a live example.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Fri, 2009-10-30 06:53
#6
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You can't have the width and

You can't have the width and a margin.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
  • Locked