Forum PHP.pl > [HTML][CSS] Rozciąganie Div'ów w pionie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Rozciąganie Div'ów w pionie

oomaster

27.05.2008, 10:38:31

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

27.05.2008, 10:40:42

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

http://2columns.net/

oomaster

27.05.2008, 11:12:57

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

27.05.2008, 11:19:52

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

27.05.2008, 12:54:07

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

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

oomaster

27.05.2008, 14:22:19

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

27.05.2008, 14:24:19

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

28.05.2008, 09:26:12

Cytat

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ć.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.