Can't get vertical menu and content side by side

**freakinmind** · 09-17-2011, 06:31 AM

hey guys please help me out.
I am building a website for my project and i cant get the vertical menu and my contents of the page side by side.
The menu either comes above or below the content but I want it to be side by side.
here is my site.

And here are the codes.
please tell me where the mistake is.

Code:

<html>
<head>
<title>About us</title>
<link rel="stylesheet" type="text/css" href="f:\new folder\menu\menu_style.css" >
<style type="text/css">

.arrowlistmenu{
width: 180px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>

</head>
<body background="C:\Documents and Settings\Administrator\My Documents\Downloads\books-clipart.jpg">
&nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp
<img src="C:\Documents and Settings\Administrator\My Documents\Downloads\bn.jpg"  align="justify">
<div class="nav-container-outer">
   <img src="f:/new folder/menu/images/nav-bg-l.jpg" alt="" class="float-left" />
   <img src="f:/new folder/menu/images/nav-bg-r.jpg" alt="" class="float-right" />
   <ul id="nav-container" class="nav-container">
      <li><a class="item-primary" href="F:/New Folder/the book store.html" target="_self">Home</a>
	   </li>
       <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="" target="_self">Browse</a>
         <ul style="width:150px;">
            <li><a href="" title="By author" target="_self" >By author</a></li>
            <li><a href="" title="By categories" target="_self" >By categories</a></li>
         </ul>
	   </li>
       <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="" target="_self">Contact us</a>
	   </li>
       <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="" target="_self">About us</a>
	   </li>
       <li><span class="divider divider-vert" ></span></li>
      <li class="clear">*</li>
   </ul>
</div>
<b>
<br><br>
<div class="arrowlistmenu">

<h3 class="headerbar">CSS Library</h3>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<h3 class="headerbar">CSS Drive</h3>
<ul>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

</div>
<center>
<b>
<script language="JavaScript1.2">

//configure message
message="Welcome to The Book Store!"

//animate text in NS6? (0 will turn it off)
ns6switch=1

var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 50){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>

<h2><div id="jumpx" style="color:green"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script></center>
Dear Reader,<br>
the book store.com is an haven for a book lover on this planet ‘Earth’. It already has a wide collection of  titles. the book store.com believes that every Reader should get a WOW effect visiting the site for either shopping or reading.<br>

the book store is an endeavor by like-minded professionals to have your favorite books reach to you by –<br>
an user friendly menu enabling you to locate the ‘exact’ title or author<br>
a quick and user-friendly processing system from the point of choosing a book to making a payment<br>
a solid back-office and support system for faster deliveries.<br>
Now add to all of these – Never before Discounts and Deals available.<br>
We thank you for choosing us as your Book ‘partner’ and expect from you to keep those suggestions rolling to contact@uRead.com to enable us to know where things needs to change to get the WOW effect and be able to grow the “uReaders” family.
Keep tuned in for loads of exciting stuff coming soon with ebooks, book reviews, reading community, online newspapers, deals etc.
</body>
</html>

**nate51** · 09-17-2011, 06:25 PM

I could be wrong here, but it's worth a try. the divs you are using for the navigation and content, give them a float of left in your css, that will force their left sides to align and may get them to stack side by side. I tried to look at your code, but with the missing images and the missing style.css I am not getting the proper visual output, so I am unable to fully test my theory.

But I find for most cases like these " float:left; " seems to work most of the time.

**itivae** · 09-17-2011, 11:15 PM

Yeah I agree. Make sure your vertical Menu is in a div and then float that div to the left. Make sure to adjust your margins or padding for correct placement.

Good Luck.

Thread: Can't get vertical menu and content side by side

Thread Tools

Search Thread

Can't get vertical menu and content side by side

Bookmarks

Bookmarks

Posting Permissions