Agrupas Divs

[Felipe Mota 0]

Bom dia, gente.

Sou novo aqui no fórum e tenho uma pergunta bem básica... Tão básica que não encontrei nenhuma resposta http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

Bom, no meu site eu tenho duas divs (tableless), uma ao lado da outra, mas quando eu testo as resoluções de tela menores (apenas diminuindo o tamanho da janela pelas laterais), a div da direta pula pra baixo. Eu queria que ela ficasse fixa, junto a div da esquerda.

 

Segue o código:

 

<div id="logo">
<a href=""><img id="logopng" src="imgs/logo.png" width="200" height="120" /></a>
</div>

<div id="menutop">
<table cellpadding="0" cellspacing="0" border="0" width="600" class="sec">
<tr align="center">
<td><a href="" target="frame">Home</a></td>
<td><a href="" target="frame">A Empresa</a></td>
<td><a href="" target="frame">Promoções</a></td>
<td><a href="" target="frame">Eventos</a></td>
<td><a href="" target="frame">Fale Conosco</a></td>
</tr>
</table>
</div>

<div id="menuleft">
<h2>MENU</h2>
<table cellpadding="0" cellspacing="0" border="0" width="149" class="oth">
<tr><td><a href="vip.html" target="frame">Sala VIP</a></td></tr>
<tr><td><a href="car.html" target="frame">Cardápio</a></td></tr>
<tr><td><a href="res.html" target="frame">Reservas</a></td></tr>
<tr><td><a href="loc.html" target="frame">Localização</a></td></tr>
<tr><td><a href="gal.html" target="frame">Galeria de Imagens</a></td></tr>
<tr><td><a href="pal.html" target="frame">Palestra Motivacional</a></td></tr>
<tr><td><a href="mkt.html" target="frame">Marketing</a></td></tr>
<tr><td><a href="imp.html" target="frame">Imprensa</a></td></tr>
</table>
</div>

<div id="frame">
<iframe id="resize" src="" width="806" style="min-height:258px; overflow:hidden" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>

<div class="barbottom">
<p align="center">blablabla</p>
</div>

 

@charset "utf-8";
/* CSS Document */

body {margin: 0px;}
body,tr,td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #FFFFFF}
img {border: 0px}
h2 {font-weight: normal; font-size: 18px; margin-top: 10px; margin-left: 6px; margin-right: 0px; margin-bottom: 10px}

a:link {color:#990000; text-decoration: none}
a:visited {color:#990000; text-decoration: none}
a:hover {color: #000000; text-decoration: none}
a:active {color: #000000; text-decoration: none}

.sec a:link {color:#990000}
.sec a:visited {color:#990000}
.sec a:hover {color: #000000}
.sec a:active {color: #000000}

.oth a:link {color:#333333}
.oth a:visited {color:#333333}
.oth a:hover {color: #000000}
.oth a:active {color: #000000}

#logopng {padding-top: 15px; padding-left: 20px}

.barbottom {font-size: 10px; color: #FFFFFF; padding-top: 10px; padding-bottom: 10px;}

table.sec td {border-right: 1px solid #CCCCCC; padding: 4px; font-size: 14px; color:#990000}
table.oth td {border-bottom: 1px solid #CCCCCC; padding: 6px; font-size: 12px; color:#333333}

 

@charset "utf-8";
/* CSS Document */

#logo {width: 100%; height: 170px; background-image: url(imgs/logo_bg.gif); background-position: top; background-repeat: repeat-x}

#menutop {width: 100%; height: 36px}

#menuleft {width: 154px; height: auto; margin-left: 5px; float: left}

#frame {width: 806px; height: auto; vertical-align: top; float: left}

.barbottom {width: 100%; height: auto; background-color: #000000; float: left}

 

A partir desse códiqo, em que o 1º é o html, o 2º é o CSS para estilos e o 3º o CSS para somente a formatação das divs.

 

O problema nele é a div do menu da esquerda e a div para o iframe. Quero que fiquem sempre juntas. Como resolvo?

[Aprendiz CSS 3]

uma boa prática é englobar o site todo dentro de um div

 

procure fazer o menu usando listas ao inves de tabelas

 

abraço