Позиция меню по вертикали

[segail]

Здравствуйте.

Изменил меню в шаблоне электронной книге, никак не могу вывести меню по вертикали на уровень текста.
Что только не делал, уходит то в право, то влево, то вниз но на уровне текста не встает.
Подскажите где необходимо изменит код в CSS таблице, чтобы изменить вертикальное положение меню.
CSS
Меню начинается со строки
/* Sidebar Left -----------------------------------------------------------------------------*/

PHP код:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    font: 12px Verdana, sans-serif;
    width: 100%;
    background-color: #f7f5e3;
    color: #17181A;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}

#start {
    width: 409px;
    height: 499px;
    margin: 25px auto;
}
#start a {
    border: none;
}

#start p {
    text-align: center;
    font-family: Verdana;
    font-size: 11px;
    color:#333;
}

#wrapper {
    width: 900px;
    margin: 0 auto;
    border: 1px solid #EDE4A3;
    background-color: #fff;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 120px;
    background: #FFE680;
}


/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
    
}
#content {
    padding: 0 0 0 270px;
    
}

#content h1 {
    margin: 25px;
    font-weight: bold;
    color: #333;
    margin-left: 20px;
    font-size: 20px;
}

#content p {
    margin: 20px;
}


/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft li {
display: inline;
}

* html #sideLeft a {
height: 1px;
}

#sideLeft ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    }

#sideLeft  h1{
    font-size: 20px;
    font-weight: bold;
    color: #127812;
    margin: 25px;
    text-align: center;
}

#sideLeft {
    width: 200px;
    margin: 10px;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FF0000;
    border-right-color: #FF0000;
    border-bottom-color: #FF0000;
    border-left-color: #FF0000;
    }

#sideLeft li a {
    text-decoration: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #870000;
    }
#sideLeft .notopbrdr0xNone {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

#sideLeft li a:link, #sideLeft li a:visited {
    color: #870000;
    display: block;
    background-color: #F2D6A4;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 3px;
    padding-left: 10px;
    }

#sideLeft li a:hover {
    color: #FFFFFF;
    background:  #870000;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 3px;
    padding-left: 10px;
    }
/* Footer
-----------------------------------------------------------------------------*/
#footer {
    height: 40px;
    background: #BFF08E;
}

#pagiantion {
    margin: 40px;
    text-align: center;
}

#pagiantion a {
    font-size: 20px;
    text-decoration: underline;
    color:#08A9BD;
} 


HTML

<div class="sidebar" id="sideLeft">
			<h1>СОДЕРЖАНИЕ</h1>
<ul> 
<li><a href="1.html">01</a></li>
<li><a href="2.html">02</a></li>
<li><a href="10" class="notopbrdr0xNone">2</a></li>
</ul>
            
		</div><!-- .sidebar#sideLeft -->

[titan2012]

поставь для него float: left;
а вообще хотелось на весь код взглянуть

[segail]

Сообщение от titan2012

поставь для него float: left;
а вообще хотелось на весь код взглянуть

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

	<div id="header">
		<img src="img/header.jpg" width="900" height="120" />
	</div><!-- #header-->

	<div id="middle">

		<div id="container">
			<div id="content">
			<h1>ГЛАВА 1. Пробуждение.</h1>
                        
            <p>"But I must expl"

			<div id="pagiantion"><a href="2.html">Следующая страница</a></div>
            </div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar" id="sideLeft">
			<h1>СОДЕРЖАНИЕ</h1>
<ul> 
<li><a href="1.html">01</a></li>
<li><a href="2.html">02</a></li>
<li><a href="3.html">03</a></li>
<li><a href="4.html">04</a></li>
<li><a href="5.html">05</a></li>
<li><a href="6.html">06</a></li>
<li><a href="7.html">07</a></li>
<li><a href="8.html">08</a></li>
<li><a href="9.html">09</a></li>
<li><a href="10" class="notopbrdr0xNone">10</a></li>
</ul>
            
		</div><!-- .sidebar#sideLeft -->

	</div><!-- #middle-->

	<div id="footer">
		<img src="img/footer.jpg" width="900" height="40" />
	</div><!-- #footer -->

</div><!-- #wrapper -->

</body>
</html>

[titan2012]

вот тут поковырялся, думаю отличия найдешь
html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title></title>
	<meta charset="utf-8"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

	<div id="header">
		<img src="img/header.jpg" width="900" height="120" />
	</div><!-- #header-->

	<div id="middle">

		<div id="container">
											<div id="content">
											<h1>ГЛАВА 1. Пробуждение.</h1>
														
											<p>"But I must expl"

											<div id="pagiantion"><a href="2.html">Следующая страница</a></div>
											<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!</p>
											<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!</p>
											<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!</p>
											</div><!-- #content-->
		
<div id="left">
		<div class="sidebar" id="sideLeft">
			<h1>Содержание</h1>

<ul> 
<li><a href="1.html">01</a></li>
<li><a href="2.html">02</a></li>
<li><a href="3.html">03</a></li>
<li><a href="4.html">04</a></li>
<li><a href="5.html">05</a></li>
<li><a href="6.html">06</a></li>
<li><a href="7.html">07</a></li>
<li><a href="8.html">08</a></li>
<li><a href="9.html">09</a></li>
<li><a href="10" class="notopbrdr0xNone">10</a></li>
</ul>
            </div>
		</div><!-- .sidebar#sideLeft -->
</div><!-- #container-->
	</div><!-- #middle-->

	<div id="footer">
		<img src="img/footer.jpg" width="900" height="40" />
	</div><!-- #footer -->

</div><!-- #wrapper -->

</body>
</html>

[titan2012]

css

/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    font: 12px Verdana, sans-serif;
    width: 100%;
    background-color: #f7f5e3;
    color: #17181A;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}

#start {
    width: 409px;
    height: 499px;
    margin: 25px auto;
}
#start a {
    border: none;
}

#start p {
    text-align: center;
    font-family: Verdana;
    font-size: 11px;
    color:#333;
}

#wrapper {
    width: 900px;
    margin: 0 auto;
    border: 1px solid #EDE4A3;
    background-color: #fff;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 120px;
    background: #FFE680;
}


/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
    
}
#content {
    padding: 0 0 0 270px;
    
}

#content h1 {
    margin: 25px;
    font-weight: bold;
    color: #333;
    margin-left: 20px;
    font-size: 20px;
}

#content p {
    margin: 20px;
}


/* Sidebar Left
-----------------------------------------------------------------------------*/
#left{float: left;
position:fixed;
top:150px}
#sideLeft li {
display: inline;

}

* html #sideLeft a {
height: 1px;
}

#sideLeft ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    }

#sideLeft  h1{
    font-size: 20px;
    font-weight: bold;
    color: #127812;
    margin: 25px;
    text-align: center;
}

#sideLeft {
    width: 200px;
    margin: 10px;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FF0000;
    border-right-color: #FF0000;
    border-bottom-color: #FF0000;
    border-left-color: #FF0000;
    }

#sideLeft li a {
    text-decoration: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #870000;
    }
#sideLeft .notopbrdr0xNone {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

#sideLeft li a:link, #sideLeft li a:visited {
    color: #870000;
    display: block;
    background-color: #F2D6A4;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 3px;
    padding-left: 10px;
    }

#sideLeft li a:hover {
    color: #FFFFFF;
    background:  #870000;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 3px;
    padding-left: 10px;
    }
/* Footer
-----------------------------------------------------------------------------*/
#footer {
    height: 40px;
    background: #BFF08E;
}

#pagiantion {
    margin: 40px;
    text-align: center;
}

#pagiantion a {
    font-size: 20px;
    text-decoration: underline;
    color:#08A9BD;
}

таблицу стилей отдельно подключал

[titan2012]

вот скрин прилепил для визуализации

[titan2012]

некоторая поправочка

#left{float: left;
position:absolute;
top:0px}

[segail]

Закрывающий тег <div id="left"> правильно выставлен?

<div id="left">
<div class="sidebar" id="sideLeft">
<h1>СОДЕРЖАНИЕ</h1>
<ul>
<li><a href="1.html">01</a></li>
<li><a href="2.html">02</a></li>
<li><a href="3.html">03</a></li>
<li><a href="4.html">04</a></li>
<li><a href="5.html">05</a></li>
<li><a href="6.html">06</a></li>
<li><a href="7.html">07</a></li>
<li><a href="8.html">08</a></li>
<li><a href="9.html">09</a></li>
<li><a href="10" class="notopbrdr0xNone">10</a></li>
</ul>
</div>
</div><!-- .sidebar#sideLeft -->

[titan2012]

конечно правильно, я в этот тег заключил твое меню, на комент не обращай внимания, смотри вот это
</div><!-- .sidebar#sideLeft -->
</div>
</div><!-- #container-->
</div><!-- #middle-->

[segail]

А тогда зачем в тег <div id="container"> заключили меню ?