Question about html-page layout?

Hello,

I was trying to build a template layout for my web-pages.

When I run the html here, the text in the side-menu is moved when I add text and a table on the right.

Could anyone advise of a approach to stop the menu text from moving?

Thank you

<html>

<head>
  <title></title>
</head>

<style type=text/css>
body {
        LEFT: 0em; COLOR: #000; FONT-FAMILY: serif; TOP: 0em; BACKGROUND-COLOR: #fff
}
a {
        TEXT-DECORATION: none
}
UL.menu {
        LEFT: -1.6em; MARGIN: 0em; POSITION: relative
}
LI.menu {
        LIST-STYLE-TYPE: none; POSITION: relative; TEXT-ALIGN: right
}
.sidebar {
        PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; PADDING-BOTTOM: 0em; PADDING-TOP: 0em; TOP: 0em; BACKGROUND-COLOR: #eee
}
.main {
        PADDING-RIGHT: 1.5em; MARGIN-TOP: 1em; PADDING-LEFT: 1.5em; LEFT: 10em; PADDING-BOTTOM: 2em; MARGIN-RIGHT: 2em; TOP: 0em
}
DIV.box2 {
        PADDING-RIGHT: 0em; PADDING-LEFT: 0em; PADDING-BOTTOM: 25ex; MARGIN: 1em; PADDING-TOP: 0.5ex
}
</style>

<body>

<table>
   <tbody>
      <tr>
         <td class=sidebar>
         <DIV class=box2>
         <table>
            <tr bgcolor="#0086b2">
               <td width="40%" height="20">
                  <font size="2" color="#FFFFFF">
                     TOOLS:
                  </font>
               </td>
            <tr>
         </table>
         <a href="index.html">Home</a><br/>
         <a href="controller?action=login">Login</a><br/>
         <a href="controller?action=add">Add Files</a><br/>
         <a href="controller?action=edit">Edit Upload</a><br/>
         <a href="controller?action=search">List Records</a><br/>
         </DIV>
         </td>
         <td valign="top" class=main>
            <p><font color="#000099">This course is interdisciplinary, drawing upon
             knowledge in the fields of&nbsp; business ethics, strategy, management,
             accounting and economics.
             This is reflected in the team teaching approach adopted during this
             module. Another&nbsp; important consideration of the course is the
             balancing of conceptual
             theoretical material with applied work.</font>
             </p><br>

             <div align="center">
             <table border="1" width="100%">
                <tr>
                   <td colspan="2">New Table</td>
                </tr>
                <tr>
                   <td>Cell one</td>
                   <td>Cell two</td>
                </tr>
             </table>
             </div>
         </td>
     </tr>
   </tbody>
</table>

</body>

</html>
AntoniRyszard656Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ian GoughCommented:
Change <td class=sidebar> to <td class=sidebar valign="top">

Now it should stay up the top.
Hope this helps,
Ian
azcn2503Commented:
Where does the left menu move to? I have copied the code and opened it in Firefox 1.5 and Internet Explorer 7 and it's showing the same thing.
AntoniRyszard656Author Commented:
Thanks

When I run the html code, I am finding the menu options are being squashed.

And this only happened when I added the text on the right was added.

Is the text on the side-menu being squashed in your browser?

azcn2503Commented:
I thought it was at first, but it was actually because I've changed my default fonts in Firefox. So no, nothing's being squashed, it looks the same width.

... Wait a sec...

On closer inspection, after having removed the block of text and the table from the right hand side I can see that the menu on the left has expanded. To get by this problem, you need to set a fixed width, here is an example of setting the width to 150 pixels (which looks pretty much spot on to the original):

<html>

<head>
  <title></title>
</head>

<style type=text/css>
body {
        LEFT: 0em; COLOR: #000; FONT-FAMILY: serif; TOP: 0em; BACKGROUND-COLOR: #fff
}
a {
        TEXT-DECORATION: none
}
UL.menu {
        LEFT: -1.6em; MARGIN: 0em; POSITION: relative
}
LI.menu {
        LIST-STYLE-TYPE: none; POSITION: relative; TEXT-ALIGN: right
}
.sidebar {
        PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; PADDING-BOTTOM: 0em; PADDING-TOP: 0em; TOP: 0em; BACKGROUND-COLOR: #eee; WIDTH: 150px;
}
.main {
        PADDING-RIGHT: 1.5em; MARGIN-TOP: 1em; PADDING-LEFT: 1.5em; LEFT: 10em; PADDING-BOTTOM: 2em; MARGIN-RIGHT: 2em; TOP: 0em
}
DIV.box2 {
        PADDING-RIGHT: 0em; PADDING-LEFT: 0em; PADDING-BOTTOM: 25ex; MARGIN: 1em; PADDING-TOP: 0.5ex
}
</style>

<body>

<table>
   <tbody>
      <tr>
         <td class=sidebar>
         <DIV class=box2>
         <table>
            <tr bgcolor="#0086b2">
               <td width="40%" height="20">
                  <font size="2" color="#FFFFFF">
                     TOOLS:
                  </font>
               </td>
            <tr>
         </table>
         <a href="index.html">Home</a><br/>
         <a href="controller?action=login">Login</a><br/>
         <a href="controller?action=add">Add Files</a><br/>
         <a href="controller?action=edit">Edit Upload</a><br/>
         <a href="controller?action=search">List Records</a><br/>
         </DIV>
         </td>
         <td valign="top" class=main>
            <p><font color="#000099">This course is interdisciplinary, drawing upon
             knowledge in the fields of&nbsp; business ethics, strategy, management,
             accounting and economics.
             This is reflected in the team teaching approach adopted during this
             module. Another&nbsp; important consideration of the course is the
             balancing of conceptual
             theoretical material with applied work.</font>
             </p><br>

             <div align="center">
             <table border="1" width="100%">
                <tr>
                   <td colspan="2">New Table</td>
                </tr>
                <tr>
                   <td>Cell one</td>
                   <td>Cell two</td>
                </tr>
             </table>
             </div>
         </td>
     </tr>
   </tbody>
</table>

</body>

</html>

I hope that this helps.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
siva350Commented:
Looks like you just need to set you all the the td widths. THis should hold your cells in place.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.