Need help with adding more boxes, Need help with adding more boxes Options

[sim]

Hi, I want to add some more boxes to the right hand side of that bar (the brown bar which has personal profile....), but after adding the boxes, the text there goes away from its original place. Please help.

The xanga layout that I want to add boxes to: Determination



Codes:
[/code]
<!-- start code provided by createblog.com -->
<!--Determination-->
<script type='text/javascript'>
document.title = ('Determination'); </script>

<div align=left style="position: static;margin-top: -200px; margin-left: 0px"><img src="http://layouts.cbimg8.com/32/15995c.jpg">

<style type="text/css">
body
{background: #CAC5C0;
background-image: url("http://layouts.cbimg8.com/32/15995d.jpg");
background-attachment: scroll;
background-repeat: repeat-y;
background-position: 10px;
scrollbar-3dlight-color: #CBC2BB;
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #CBC2BB;
scrollbar-face-color: #CBC2BB;
scrollbar-highlight-color: #726A62;
scrollbar-shadow-color: #726A62;
scrollbar-track-color: #CAC5C0;}

.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p
{font: normal 9px Arial;
color: #726A62;
text-align: justify;}

.blogbody b, .standard b, p b, strong
{font-weight: normal;
color: #000000;}

i, em
{font-weight: italic;
color: #A69F98;}

u
{font-weight: underline;
color: #726A62;
letter-spacing: 0px;
text-decoration: underline;
text-transform: underline;
border-bottom: 1px dotted;
border-bottom-color: #000000;}

table.footer TD
{display: none;
padding: 0px;
width:0px;}

div.blogheader
{background-color: #726A62;
border-left: 1px solid #726A62;
border-right: 1px solid #726A62;
border-top: 1px solid #726A62;
color: #CAC5C0;
font: bold 10px Arial;
line-height: 7px;
letter-spacing: 0px;
text-align: center;
text-transform: none;
padding: 3px;
width: 521px;}

.韆eader
{background-color: #726A62;
border: 1px solid #726A62;
color: #CAC5C0;
font: bold 9px Arial;
line-height: 7px;
letter-spacing: 0px;
text-align: center;
text-transform: none;
padding: 3px;
width: 148px;}

.Modules
{background-color: #CAC5C0;
border-bottom: 1px solid #726A62;
border-left: 1px solid #726A62;
border-right: 1px solid #726A62;
color: #726A62;
font: normal 9px Arial;
line-height: 15px;
letter-spacing: 0px;
text-align: center;
text-transform: none;
padding: 5px;
width: 148px;}

.link a
{background-color: #726A62;
border: 1px double #A69F98;
font-color: #A69F98;
font: normal 9px Arial;
height: 8px;
letter-spacing: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 136px;}

.link a:hover
{background-color: #A69F98;
border: 1px double #726A62;
font-color: #726A62;
font: normal 9px Arial;
height: 8px;
letter-spacing: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 136px;}

a:link, .footernav.link, a.footernav:link, a.footernav:active
{color:#A69F98;
font: normal 9px Arial;
text-decoration: none;}

a:visited, a.footernav:visited,
{color:#A69F98;
font: normal 9px Arial;
text-decoration: none;}

a:hover
{color:#726A62;
font: normal 9px Arial;
text-decoration: none;}

input, select, textarea, .textfield, .button
{background: #CAC5C0;
border: 1px solid #726A62;
color: #726A62;
font: normal 9px Arial;
letter-spacing: 0px;
width: 88px;}

table.left
{display: none;
padding: 0px;
width: 0px;}

table.blogbody
{background-color: #CAC5C0;
border: 1px solid #726A62;
color: #726A62;
font: normal 9px Arial;
text-transform: none;
width: 521px;}

table.left th
{/* on your menu module, this edits the title part of it */}

table.left TD
{display: none;
padding: 0px;
width: 0px;}

table.search TD, table.announcements TH
{/* this should be left alone */
/* unless you know what to do */}

table.footer
{display: none;}

.mainleft
{padding: 1px;
width: 0px;}

hr
{border: 1px solid #726A62;}

#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
{width: auto !important;}

table.blogbody tr td
{padding: 0px;
width:0px;}

table.left, td.mainleft, table.navigation, table.search, #SearchBar1_pnlYouAreHere {display: none;}

table.blogbody div.smalltext
{text-align: center;}
</style>

<div style="margin-left: 595px; margin-top: -730px; width: 126px; height: 2000px; overflow: visible;">

<div class="韆eader">About Me</div>
<div class="Modules"><p>
<b>Name -</b>- TEXT<br>
<b>B`Day -</b>- TEXT<br>
<b>Age -</b>- TEXT<br>
<b>Gender -</b>- TEXT<br>
<b>Grade -</b>- TEXT<br>
<b>Music -</b>- TEXT<br>
<b>Other -</b>- TEXT<br>
</div><br>

<div class="韆eader">Navigation</div>
<div class="modules"><p>
<div class="link">
<center>
<a href="http://xanga.com/home.aspx?user=USERNAMEHERE">Home</a>
<a href="http://xanga.com/private/">Private</a>
<a href="http://xanga.com/private/SubscribeTo.aspx?user=USERNAMEHERE">Subscribe</a>
<a href="http://xanga.com/CLAF/default.asp">Look & Feel</A>
<a href="http://xanga.com/guestbook.asp?user=USERNAMEHERE">GuestBook</a>
<a href="http://xanga.com/signin.asp">Sign In</a>
<a href="http://xanga.com/logout.asp">Sign Out</a>
</center></div></div><br>

<div class="韆eader">Music</div>
<div class="Modules"><p>
Your <b>Darkplayer</b> // <b>Music Player</b> goes here.
</div><br>

<div class="韆eader">Etc.</div>
<div class="modules"><p>
<marquee behavior=scroll direction="up" scrollamount="1" width="136" height="100" onmouseover='this.stop()' onmouseout='this.start()'>
Put what <b>you</b> wish here. such as song <b>lyrics</b>, <b>news</b>, <b>pictures</b>, <b>quotes</b>, or <b>whatever</b> you want.<br><br>
-- <b>Absent Emotions</b>
</center></marquee></div><br>

<div class="韆eader">Friends</div>
<div class="modules"><p>
<div class="link">
<center>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
</center>
</div></div><br>

<div class="韆eader">Credits</div>
<div class="modules"><p>
<b>Layout</b><br>
-- <a href="http://xanga.com/AEProductions">AbsentEmotions</a><br>
<b>Inspiration</b><br>
-- <a href="xanga.com/Black49">Black49</a>
</div></div>
<DIV style="
background-color: transparent;
border: 0px solid #000000;
height: 1000%;
margin-left: 27px;
margin-top: -1544px;
position:static;
width: 521px;">
<!-- end code provided by createblog.com -->
[code]





Thanks.

[*Azarel*]

Okay, so this in your coding is the coding for your right column; in red asterisks, I've inserted places where you can put coding to add more boxes similar in fashion to those already there:

<div style="margin-left: 595px; margin-top: -730px; width: 126px; height: 2000px; overflow: visible;">
*****
<div class="韆eader">About Me</div>
<div class="Modules"><p>
<b>Name -</b>- TEXT<br>
<b>B`Day -</b>- TEXT<br>
<b>Age -</b>- TEXT<br>
<b>Gender -</b>- TEXT<br>
<b>Grade -</b>- TEXT<br>
<b>Music -</b>- TEXT<br>
<b>Other -</b>- TEXT<br>
</div><br>
*****
<div class="韆eader">Navigation</div>
<div class="modules"><p>
<div class="link">
<center>
<a href="http://xanga.com/home.aspx?user=USERNAMEHERE">Home</a>
<a href="http://xanga.com/private/">Private</a>
<a href="http://xanga.com/private/SubscribeTo.aspx?user=USERNAMEHERE">Subscribe</a>
<a href="http://xanga.com/CLAF/default.asp">Look & Feel</A>
<a href="http://xanga.com/guestbook.asp?user=USERNAMEHERE">GuestBook</a>
<a href="http://xanga.com/signin.asp">Sign In</a>
<a href="http://xanga.com/logout.asp">Sign Out</a>
</center></div></div><br>
*****
<div class="韆eader">Music</div>
<div class="Modules"><p>
Your <b>Darkplayer</b> // <b>Music Player</b> goes here.
</div><br>
*****
<div class="韆eader">Etc.</div>
<div class="modules"><p>
<marquee behavior=scroll direction="up" scrollamount="1" width="136" height="100" onmouseover='this.stop()' onmouseout='this.start()'>
Put what <b>you</b> wish here. such as song <b>lyrics</b>, <b>news</b>, <b>pictures</b>, <b>quotes</b>, or <b>whatever</b> you want.<br><br>
-- <b>Absent Emotions</b>
</center></marquee></div><br>
*****
<div class="韆eader">Friends</div>
<div class="modules"><p>
<div class="link">
<center>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
<a href="www.xanga.com/">Friend</a>
</center>
</div></div><br>
*****
<div class="韆eader">Credits</div>
<div class="modules"><p>
<b>Layout</b><br>
-- <a href="http://xanga.com/AEProductions">AbsentEmotions</a><br>
<b>Inspiration</b><br>
-- <a href="xanga.com/Black49">Black49</a>
</div></div>
*****

This is the coding you should customize for your extra boxes:

<div class="韆eader">Title goes here</div>
<div class="Modules">Your content goes here.
</div></div><br>

[sim]

NO, this is not working. The diarys still not staying at its right place. Moreover, after adding a box there, the box tends to go to the left side instead of the right side.

[talcumpowder]

That is going to happen no matter what, 'cause the content is being pushed down by the sidebar. If you were to add boxes, you'd need to copy this format:

CODE

<div class="韆eader"></div>
<div class="Modules">
</div><br>

To provide correct placement and alignment. Then you'd fiddle with the height section in this:

CODE

<DIV style="height: 1000%; margin-left: 27px; margin-top: -1544px; position:static; width: 521px;">

(it's at the very bottom of your code, and you should probably replace it with what I have so it's easier to edit, but hey! That's your choice.)

Change it about 50 pixels at a time, and it should go up fairly smoothly.