Выравнивание вертикальной границы изображения при максимальном увеличении экрана

Question

У меня есть довольно простой HTML-код с несколькими таблицами для организации различных элементов текста или изображений. Все работает отлично, за исключением того, что мне нужно разместить вертикальную границу как на левой, так и на правой сторонах экрана. Я могу сделать это с изображением 2x2 пикселей, которое я растягиваю. Когда пользователь имеет максимальный экран, все выглядит великолепно. Но когда пользователь нажимает «Восстановить вниз», границы остаются на месте, но таблицы отбрасываются так, что они начинаются ниже, когда границы заканчиваются, что не отображается. другими словами, реляционное выравнивание между границами и таблицами становится все испорченным. Кто-нибудь знает, как сделать это выравнивание постоянным при восстановлении вниз? Я довольно много новичок с html и asp, так что говорите медленно. Если есть лучший способ сделать это, я все уши. Благодарю.

Вот соответствующий раздел кода:

<form id="form1" runat="server"> 
<asp:Image ID="LeftBorder" src="../Images/Border_Blue.jpg" runat="server" 
      WIDTH="15" HEIGHT="1000" BORDER="0" alt="Image Missing" align="left"/> 

<asp:Image ID="RightBorder" src="../Images/Border_Blue.jpg" runat="server" 
      WIDTH="15" HEIGHT="1000" BORDER="0" alt="Image Missing" align="right" /> 

<table id="BannerTable" style="height: 100px"> 
     <tr> 
      <td width="934px"> 
      <img src="../Images/Header.jpg" 
       alt="Image Missing" id="ImgBanner" align="left"/></td> 
     </tr> 
</table> 

Answer 1

Существует гораздо лучший способ делай то, что делаешь.

Прежде всего --- вы действительно не должны использовать таблицы вообще.

С учетом сказанного вам необходимо использовать divs.

Контейнер для хранения всего.

Внутри этого, a для левой и правой границы. Используйте CSS для установки фонового изображения. repeat-y на нем.

Ваш стол также должен зайти в тоже.

<div class="container"> 
    <div class="leftBorder"></div> 
    <div> 
     Your table 
    </div> 
    <div class="rightBorder"></div> 
</div> 

Если вы столкнетесь с проблемами вашего основного контейнера не предполагающих высоту это дети, смотрите в clearfix