[HTML][CSS]Blok z divów się zle rozciąga Opcje

[gambler]

Witam.

mam problem z divami i css'em. Skonstruowałem 2 bloki lewy i prawy. Jeżeli dodam dużo treści do prawego bloku blok rozciąga się wraz z blokiem nadrzędnym, natomiast jeżeli dodam do lewego, to sam lewy blok jest rozciągnięty a prawy i nadrzędny blok pozostaje bez zmian.
Widać to na rysunku zrzut ekranu

Kod html:

Kod

<div id="main-wrapper">
<div id="menu-boczne">
<div id="frame"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right"><div class="top">&nbsp;</div>
<div class="left"><div class="right"><div class="inner" style="font-size: 100%;">
Witaj czytelniku! <br/>
3. Jestem zgrabną i atrakcyjną ramką!<br/>
4. Niewiele ważę i szybko się ładuję.<br/>
5. Mam fajny niebieski wygląd.<br/>
6. Możesz mnie do woli powielać i powiększać,<br/>
7. bo można mnie bez problemu skalować.<br/>
</div></div></div><div class="bottom">&nbsp;</div></div></div></div></div></div>
</div>
      <div id="content-column" class="column">
      <div id="frame"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right"><div class="top">&nbsp;</div>
      <div class="left"><div class="right">
     <div class="inner">
         <div id="breadcrumb">naglowek</div>
          <h1 class="title" id="page-title">Tytuł</h1>
          <div class="tabs">Zakładki</div>
          pomoc
          <ul class="action-links">Action linki</ul>
            tresc gora
            tresc srodek
            tresc dol
        </div> <!-- /div.inner -->
         </div></div><div class="bottom">&nbsp;</div></div></div></div></div></div>
    </div>
  </div>
<div id="footer-wrapper" class="clearfix">
  stopka
<div id="footer-closure" class="clearfix">
      zamkniecie stopka
  </div>
</div> <!-- /#footer-wrapper -->
</div> <!-- #wrapper -->

a tutaj cssik

Kod

/*****************************************************************************
*  Wrappers
*****************************************************************************/
body {
    background: #fdfdfd url('images/body.png') 0 0 repeat;
}
body div#skipcontent {
  display: none;
}
body div#wrapper {
  margin: 0 auto;
  width: 980px;
}
/*****************************************************************************
* Header
*****************************************************************************/
div#header-wrapper {
div#header {
  height: 320px;
  position: relative;
  background: url('images/header.png') repeat-x;
}
div#logo-name-slogan {
  display: block;
  padding: 40px 0px 0px 37px;
}
div#logo-name-slogan a#logo {
  float:left;
  padding-right:12px;
}
div#logo-name-slogan h1#site-name,
div#logo-name-slogan div#site-name {
  margin: 0px;
}
h1#site-name a,
div#logo-name-slogan div#site-name a {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -2px;
  margin: 0px 0px;
  text-decoration: none;
  color: #404040; /* E */
}

div#header div#logo-name-slogan div#name-slogan div#site-slogan {
  margin: 0px;
  color: #878787;
  font-size: 24px;
}

div#header-wrapper div.region-header-menu {
}
/*****************************************************************************
* Main
*****************************************************************************/

div#main-wrapper {
  background: url('images/braz.png') repeat;
  padding: 0px 40px;
}

div#main-wrapper table {
  width: 100%;

}

/*****************************************************************************
* Content column
*****************************************************************************/

#content-column {
  vertical-align: top;
  overflow: hidden;
  width: 610px;
  border: 1px solid black;
  
}

#content-column div.inner {
  min-height: 400px;
}

#content-column div.region-content-top {
  /* -> block.css */
}

#content-column div.region-content {
  /* -> block.css */
  /* -> node.css */
}

#content-column div.region-content-bottom {
  width: 100%;
  /* -> block.css */
}

#content-column a.feed-icon {
float: right;
}


/*****************************************************************************
* First sidebar column
*****************************************************************************/

#sidebar-first-column {
  vertical-align: top;
  padding: 30px 15px;
  overflow: hidden;
}

/*****************************************************************************
* Second sidebar column
*****************************************************************************/

#sidebar-second-column {
  vertical-align: top;
  padding: 30px 15px;
  overflow: hidden
}

/*****************************************************************************
* Footer
*****************************************************************************/

div#footer-wrapper {
  min-height: 50px;
}
  
div#footer-wrapper div.region-footer {
/* --> block.css */
}

div#footer-wrapper div#footer-closure {
  clear: both;
}

div#footer-wrapper div#footer-closure div.region-footer-closure {
  /* --> block.css */
  padding: 10px 0px;
}



#content  {
  background: url('images/braz.png') repeat;
  width: 100%;
}

#side_panel {
  float: left;
  width: 300px;
  margin-left:50px;
  margin-top: 120px;
}

#main_column {
  float: right;
  width: 598px;
  margin-right:10px;
  margin-top: 120px;

}

.clear {
  clear: both;
}
#footer {
  width: 778px;
  margin: 0 auto;
  height: 20px;
  background: url('images/footer.gif') 5px 0 no-repeat;
}

img {
border:0 none;
}
div#menu-boczne{
width: 300px;
position: absolute;
float: left;
overflow: hidden;
border: 1px solid red;
  min-height: 400px;
}

jak sobie z tym poradzić???
pozdrawiam

[gigzorr]

Nie chce mi sie przegladac kodu , ale czy ustawiles wysokosc albo overflow ?

[gambler]

tak ustawione miałem

Kod

div#menu-boczne{
width: 300px;
position: absolute;
float: left;
overflow: hidden;
border: 1px solid red;
  min-height: 400px;
}

[gigzorr]

zrob tak , jak miales ustawione to ten tekst w tym slupku wes w diva ->

[HTML] pobierz, plaintext 
<div style="height: 500px;">
1.
2.
3.
</div>
[HTML] pobierz, plaintext 

i zobacz

[krzysztof_kf]

Ustaw sobie dodatkowego selektora przed klasą left

[CSS] pobierz, plaintext 
 
#content { 
width: 980px;
height: 100%;
overflow: hidden;
}
 
[CSS] pobierz, plaintext 

coś takiego

[HTML] pobierz, plaintext 
<div id="content">
<div class="left"><div class="right"><div class="inner" style="font-size: 100%;">
Witaj czytelniku! <br/>
[HTML] pobierz, plaintext 

[gambler]

Działa, dziękuję i temat do zamknięcia
pozdrawiam