I cant up load the files at the moment but can do so later tonight, was just wondering if someone will know the answer. I have a javascript navigation menu to the left hand side of the page and then content to the right. I have placed the javascript in a div. Then I have the content section to the right. However the content moves down and will not wrap round the javascript menu to the left of the page. Can anyone help or does anyone have any idea what may be causing the problem?

 

Help greatly appreciated.

Can't say till i can see it, but it sounds like a float issue, are the menu or text container's floating?

 

sounds like you might need to add float:left; to the divs,

 

if they're already floating does the container have enough room for both of them?

 

stevo

If you want the content div to wrap around the menu on the left, code the menu first with float: left; and then the content div with no float and no width as item 2 here

http://www.wickham43.net/threecolumns.php

then the content div will just move up beside the floated menu and any surplus content will flow under the menu.

 

There are alternatives on the page linked above.

Hey, thanks for the reply, I dont think its to do with the room as when I change the right content to 400px it still does it. My page is 700px in total, 200 for the nav bar and 400px for the content with 20 px padding left for the nav bar. I think it is a float problem. I am sure I have floated my nav bar left and content to the right but I will put the files on later tonight and hopefully this will help you guys identify the problem. Am sure it is a float problem.

If you give the menu float: left and the content float: right, then they should go on the same level if there's enough width, but you won't get the right content to flow under the menu.

Here are the files, still cant get it to work for some reason. If I have Javascript to the left for the nav will I be able to put a flash video to the right hand side of it or will it move down and not wrap around it?

index.html

style.css

It helps to add different background-colors temporarily. At present your #nav div doesn't have a float, while #maincontent has a float: right but also clear: both so it's going on the right below the level of #nav. Try this:-

#nav { background-color: pink; float: left;

width: 200px;

padding-left: 20px;

padding-top: 30px;

} /**End Navigation Links**/

 

/**Begin Main Content**/

 

#maincontent {

width: 300px;

float: right;

margin-right: 0px;

color: #222;

background-color: lime;/*#FFFFFF;*/

/*clear: both;*/

overflow: hidden;

 

}

 

which gives them level tops.

 

You said originally that you want #maincontent to wrap around #nav, in which case leave #nav as above but edit #maincontent:-

 

#maincontent {

/*width: 300px;*/

/*float: right;*/

margin-right: 0px;

color: #222;

background-color: lime;/*#FFFFFF;*/

/*clear: both;*/

/*overflow: hidden;*/

 

}

 

No width and no float and no overflow: hidden and no clear makes the #maincontent full width and wrap around the #nav at the top left.