Help with divs placing please =)

shadachi · Feb 25, 2009

My xhtml has div positioning problems .. the rightpanel seems off .. can anyone point out my problem please

this is my webpage code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Welcome to Ro</title>
<link rel ="stylesheet" type="text/css" href="rox.css"/>
<meta id="description" content=" Ro Official Website with the latest news and updates "></meta>
<meta id="keywords" content=" Ragnarok online , Roxinity Ro"></meta>
<meta id="author" content="Kenny@Admin"></meta>

</head>
<body>
<div id ="biggestdiv"> <!--Biggest div containint all other divs -->
<a id ="top"></a>

<div id ="header"> <!--Contains the banner -->

</div>
<div id ="bigdiv"> <!--Contains other smaller divs in the middle -->



<div id = "Leftpanel"> <!-- Panel on the left -->

<div id = "menu-main">
<h4>Main menu</h4> <!-- List of menus -->
<ul class ="menu">

<li><a href="home.html" alt="home" ><span>Home</span></a></li>
<li><a href="Register account.html" alt="home" ><span>Register account</span></a></li>
<li><a href="Server Rules.html" alt="home" ><span>Server Rules</span></a></li>
<li><a href="Server Information.html" alt="home" ><span>Server Information</span></a></li>
<li><a href="Downloads.html" alt="home" ><span>Downloads</span></a></li>
<li><a href="Forum.html" alt="home" ><span>Forums</span></a></li>
<li><a href="Faq.html" alt="home" ><span>Faq</span></a></li>
<li><a href="Contacts.html" alt="home" ><span>Contacts</span></a></li>
</ul>
</div>

<div id = "Ragnarok-Resources"> <!-- Ragnarok Resources links -->
<h4>Ragnarok Resources</h4>
<ul class ="menu">
<li><a href="[URL unfurl="true"]http://ratemyserver.net"[/URL] target="_blank"><span>Ratemyserver</span></a></li>
<li><a href="[URL unfurl="true"]http://www.roempire.com/"[/URL] target="_blank"><span>RO Empire</span></a></li>
<li><a href="[URL unfurl="true"]http://ro.truesource.info/search/"[/URL] target="_blank"><span>RO Truesource</span></a></li>
<li><a href="[URL unfurl="true"]http://ro.doddlercon.com/wiki/index.php?title=Main_Page&amp;Itemid=69"[/URL] target="_blank"><span>RO Future Wiki</span></a></li>
</ul>
</div>


<div id = "Advertisements"> <!--Advertisements -->
<h4>Advertisements</h4>
<br/>
<br/>
<br/>
</div>

</div> <!-- Closing div of leftpanels -->

<div id = "main"> <!-- This is the main div at the center -->
<div id ="News-Announce">
<p>Testing 1 2 3 </p>
<tr>
<td>1,2</td>
</tr>
<br/>
<br/>
<br/>
<br/>
</div>


</div><!-- Closing div of main div -->

<div id = "Rightpanel" > <!-- Panel on the right -->

<div id = "Status"> <!-- Server Status -->
<h4>Server Status</h4>
<p>
Login-Server : 
<br/>
Char-Server : 
<br/>
Map-Server : 
<br/>
</p>
</div> <!-- closing div of Server Status -->


<div id = "shout-box"> <!-- shout box-->
<h4>Shout Box</h4>
<br />Shout Box
<br />Shout Box
<br />Shout Box
<br />Shout Box
</div>  <!--closing of shout box div -->

</div> <!-- closing div for right panel-->






</div> <!-- closing Bigdiv div containint all other divs -->

<div id ="footer"> <!-- This is footer-->

 Private Server Copyright 2008 | All Rights Reserved | Website Designed by <a href="mailto:kk@hotmail.com">Kenny</a>


</div> <!-- closing of footer div-->
</div> <!-- closing Biggest div containint all other divs -->
</body>


</html>

This is my css

Code:

body {margin: 0px;}
/*pseudo*/
a:link {color:black;}
a:hover {color: green;}
a:visited {color: blue;}


 #biggestdiv { background-color : none; }
 
 #bigdiv { background-color : blue; 
 width:1000px;
 
		margin-left:auto;
		margin-right: auto;
		padding-top: 15px; }
		
 #header { background-color : none;
 height: 200px;
width: 1000px; text-align:center;
background-image:url(banner2.jpg);
margin-left:auto;
margin-right: auto;

}
  
 #Leftpanel{ background-color : none;
 height : 700px;
 float:left;
 text-align: left;
 padding: 0 px;}
 
 #menu-main { background-color : #FF00FF;
 margin-left : 5px;
 
 margin-top: 0px;
 width: 150px; 
 padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
 }
 
  #Ragnarok-Resources { background-color : #FF00FF;
 margin-left : 5px;
 text-align: left;
 margin-top: 0px;
 width: 150px; 
 padding-left: 0px;
		padding-right: 5px;
		padding-bottom: 5px;
 }
 
   #Advertisements{ background-color : #FF00FF;
 margin-left : 5px;
 text-align: left;
 margin-top: 0px;
 width: 150px; 

 }
 
 
#main {background-color:orange;
 
 margin-left : 170px;
 height:1000px;
 width: 600px;
}

#News-Announce {
background-color:yellow;
		  height: 500px; /*1590px*/ 
			text-align:center;  
		  
		  width: 350px; /*460px*/
		  /* padding: 10px;*/
		 /* padding-left: 20px;
		  padding-right: 20px;
		  padding-top: 10px;
		  padding-bottom: 10px;*/
}
 
 
 #Rightpanel{ 
 background-color : none; 
 width: 150px; 
 height: 700px;

 float:right;
/*margin-right: 129px;*/
 
 }
 
 
  #Status{ background-color : #FF00FF;  
  margin-top: 0px;
	width: 150px; 
 /*padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 5px;*/
}
 
  #shout-box{ background-color : #FF00FF; 
  width: 150px; 
 
 }
 

 
 #footer {background-color : #00ff00; height:70px;width: 1000px; 
 text-align:center;
padding-top: 15px;
margin-left:auto;
margin-right: auto;}

Vragabond · Feb 25, 2009

By "off" I suppose you mean it is too low. That is because you are floating it right after the main section. That means that you will first have the left column, then the main section (which is not floated) and at the bottom of the main section, you will have (floated) right column. If you want to have right and left columns to the side of the main column, you will have to have them both appear in the code before the main column.

If by "off" you mean something else, please do explain what exactly you mean by it.

Also, be aware that having specified heights for all elements your content will spill out of their boxes if there is too much content.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

shadachi · Feb 25, 2009

yes , the off i meant was the right panel is too low.. i've tested it . i put the rightpanel before the main in the xhtml coding . but the results is the same.

can u point out some examples , =) thank you for helping

Vragabond · Feb 25, 2009

If the results are the same after you have a page that (in its core) looks like this:

Code:

<div id ="bigdiv">
  <div id = "Leftpanel"></div>
  <div id = "Rightpanel"></div>
  <div id = "main"></div>
</div>

Then your elements don't fit together well -- meaning they are too big to fit into the allotted space. I suggest you make sure that all the margins, borders, paddings and widths on these three elements do not surpass the width of their container.

However, given that you have the widths of all elements defined, you might want to simply float all three of them and keep your original order (left, main, right), with left and main floated left and right floated right.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

shadachi · Feb 25, 2009

awesome Vragabond , you solved my problem =D .. thx dude

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help with divs placing please =)

shadachi

Programmer

Vragabond

Programmer

shadachi

Programmer

Vragabond

Programmer

shadachi

Programmer

Similar threads

Part and Inventory Search

Sponsor