[HTML][CSS] Rozciąganie Div'ów w pionie Opcje

[oomaster]

Witam

Mam prosty problem, lecz w sieci jak i na tym forum większość rozwiązań działa błędnie lub wcale.

Problem polega na tym aby lewa kolumna automatycznie rozszerzała się do wysokości kolumny treści.

Poniżej załączyłem obrazek, jak wygląda źle, a jak ma wyglądać.



Oto wypociny moje:

[HTML] pobierz, plaintext 
<div id="top">
<div id="menu"><p>Menu</p></div>
<div id="tresc"><p>Tresc</p></div>
</div>
[HTML] pobierz, plaintext 

PLIK CSS:

[HTML] pobierz, plaintext 
#top{
width: 774px;
margin:auto;
overflow: auto;
}
 
#menu{
margin-left:35px;
width:192px;
float:left;
}
#tresc{
width:500px;
margin-left:266px;
}
#menu, #top, #tresc{border:1px solid black;}
[HTML] pobierz, plaintext 

[piotrooo89]

ja miałem podobny problem mnie pomogła ta stronka:

http://2columns.net/

[oomaster]

OK, działa niby. Ale jak przeniosę na swoją stronę dalej to samo oto mój kod:

Kod

<div id="top"><div id="tresc"><div class="colLeft">
ydhgfgh
</div></div>

<div id="menu"><div class="colRight">
<b>menu</b><br/><br/>fff<br/>grtfb<br/>Zfdbv<br/>Ufdfvb<br/>
</div></div></div>

CSS:

Kod

.colLeft{
            z-index:1;
            position: relative;
            width:690px;
            background-color:#fff;
            min-height: 1px;
            height: auto !important;
            height: 1px; padding:5px;
}

.colRight{
            z-index:2;
            position: relative;
            width:240px;
            background-color:#ccc; padding:5px;
}


#top {width: 950px; margin:auto; }
#menu {width: 240px; float: right; background-color: #ccc;}
#tresc {width: 690px; float: left; background-color: #fff;}

[piotrooo89]

może daj sobie tak:

[HTML] pobierz, plaintext 
<div id="root">
  <div id="top">
    jakies logo lub naglowek
  </div>
  <div class="container">
  <div class="rightConLeftCol">
    <div class="colLeft">
      <br class="brspace" />
	<!--lewa-->
    </div>
  </div>
  <div class="leftConRightCol">
    <div class="colRight">
      <br class="brspace" />
	<!--prawa-->
    </div>
  </div>
  <br class="brclear" />
</div>
</div>
[HTML] pobierz, plaintext 

[tomsi]

Było już na forum, ale podam Ci link

http://www.ucho24.info/porady/szablon.php

[oomaster]

Dzięki dobrze działa ale jestem ciekaw jak z tym problemem radzą sobie "poważne strony" na pewno takich numerów nie robią, może jest na to normalnie rozwiązanie.

[piotrooo89]

nie wiem jak to robią ale pewnie tak bo jest to prosty i skuteczny sposób... nie ma jakiegoś innego css dla "poważnych stron".

[erix]

Dzięki dobrze działa ale jestem ciekaw jak z tym problemem radzą sobie "poważne strony" na pewno takich numerów nie robią, może jest na to normalnie rozwiązanie.

Byłoby wiele normalnych rozwiązań, gdyby nie IE. Idealne rozwiązanie, to zastosowanie display: table-cell. A dla IE trzeba kombinować.