Подскажите, проблема с таблицами

[tmEuphoria]

Есть сайт, объясню проблему по скриншоту ниже

Белая область - это див элемент, в котором я расположил таблицу с 2мя колонками. В этих колонках уже сделал дивы с заголовком и самим контентом.

Сама проблема:

Наполнинл 1ю колонку заголовком+несколько скриншотов и кнопок, когда начал наполнять 2ю колонку, заголовок 1й начинает отступать от top элемента вниз, как показано на скриншоте. Не пойму в чем может быть проблема.

Мой быдлокод, css:

.backgrnd1231445{
position: absolute;
width: 100%;
height: auto;
background: url(/img/fon.jpg);
background-repeat: repeat;
background-attachment: scroll;
}
#mainwrapper {
position: relative;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
width: 80%;
height: 80%;
padding: 50px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #fff;
}


#zagolovok1 {
position: relative;
text-align: center;
margin-top: -53%;

}
h1 {
font-family: 'Cuprum', sans-serif;
font-size: 25px;
}
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#6b6b6b 0%,
#000000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#6b6b6b),
to(#000000));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 1px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}

#wrap1 {
position: inheirt;
width: 100%;

}
#wrap2 {
position: relative;
width: 100%;
}
#zagolovok2 {
position: relative;
margin-top: %;
font-family: 'Cuprum', sans-serif;
font-size: 25px;
text-align: center;
}
img {
padding: 5px;
}
ul {
font-family: 'PT Sans', sans-serif;
}
.text1 {
font-family: 'PT Sans', sans-serif;
}
.text2 {
font-family: 'PT Sans Caption', sans-serif;
}
#Screenbox {
position: relative;

}
#knopka {
margin-top: 12%;
margin-left: 31%;
}
#socknopka {
margin-top: 10%;
margin-left: 10%;
}

margin-top у #zagolovok1 сделал -53% чтобы хоть чутку подтянуть наверх контент

[Switch74]

на jsfiddle.net выложи, а то без html не понятно к чему эти стили

Edited March 26, 2013 by Switch74

[tmEuphoria]

Вот http://jsfiddle.net/6mHTC/

а ниже продублировал сюда html код

<div class="backgrnd1231445">
<div id="mainwrapper">

<TABLE width="100%">
	 <TR>
			 <TD width="50%" height="1000px">
<div id="wrap1">
	 <div id="zagolovok1">
			 <h1>text</h1>
		 </div>
	 <div id="Screenbox">
<span class="img1"><a href="img/text.gif" rel="lightbox" title="text"><img src="img/text.gif" alt="text" title="text"></a></span>
<span class="img2"><a href="img/text.jpg" rel="lightbox" title="text"><img src="img/text.jpg" alt="text" title="text"></a></span>
<span class="img34"><a href="img/text.jpg" rel="lightbox" title="text"><img src="img/text.jpg" alt="text" title="text"></a></span>
<span class="img34"><a href="img/text.jpg" rel="lightbox" title="text"><img src="img/text.jpg" alt="text" title="text"></a></span>
</div>
<div id="knopka">
<a href="#"><button type="button" name="" value="" class="css3button">text</button></a>
</div>
<div id="socknopka">
<script type="text/javascript">(function() {
if (window.pluso && typeof window.pluso.start == "function") return;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = d.location.protocol + '//share.pluso.ru/pluso-like.js';
var h=d[g]('head')[0] || d[g]('body')[0];
h.appendChild(s);
})();</script>
<div class="pluso" data-options="big,square,line,horizontal,nocounter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print" data-background="transparent"></div>
</div>
<div id="liver">
</div>
<div id="pustodiv">
<p><span class="text2">text</span></p>
<ul>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
</ul>
</div>


</TD>


<TD width="50%" height="1000px">
<div id="wrap2">
	 <div id="zagolovok2">
	 text
	 </div>
	 <div id="content2">
	 <p><span class="text1">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <p><span class="text1">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <p><span class="text2">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <p><span class="text1">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <ul>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 </ul>
	 <p><span class="text2">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <ul>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 </ul>
	 <span class="text1">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <span class="text2">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <ul>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <li>texttexttexttexttexttexttexttexttexttexttext</li>
	 <p><span class="text1">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <p><span class="text1">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 <p><span class="text1">texttexttexttexttexttexttexttexttexttexttext</span></p>
	 </div>


</div>

</TD>
	 </TR>

</TABLE>



</div>

</div>

[Switch74]

у вас по умолчанию выравнивание в td идет по центру и т.к. в правом столбце больше информации вся таблица и соответственно левая колонка увеличиваются в размерах, выставите для td vertical-align:top и уберите свой отрицательный margin

[tmEuphoria]

у вас по умолчанию выравнивание в td идет по центру и т.к. в правом столбце больше информации вся таблица и соответственно левая колонка увеличиваются в размерах, выставите для td vertical-align:top и уберите свой отрицательный margin

Спасибо Вам, помогло