Výška pozadí spolu s obsahem

[kuxik009]

Zdravím,
mám stejný problém jako tady, jenže s dvěma rozdíly:
1. Mám jinou šablonu
2. Nefunguje to řešení
Šablona

Kód: Vybrat vše

body 
 {
  padding: 0px;
  margin: 0px auto; 
 }

#obsah 
 {
  width: 1036px;
  margin: 0px auto;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 2px;
  min-height: 660px;
  border: 1px solid black;
}

#paticka
 {
  text-align: center;
  width: 1000px;
  margin: 0px auto;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 3px 3px 3px 3px; 
 } 

#hlavni_obsah 
 {
  border: 1px solid black;
  position: relative;
  float: left;
  width: 880px;
  text-align: left;
  min-height: 100%;
}

#bocni_panel
 {
  border: 1px solid black;
  position: relative;
  float: left;
  width: 140px;
  text-align: left;
  margin-right: 10px;
  min-height: 100%;
}
 

Kód: Vybrat vše

  <div id="hlavicka">
   hlavička
  </div>
  <div id="obsah">  
   <div id="bocni_panel">
    panel
   </div>   
  <div id="hlavni_obsah">
  nějaký text, který je hóooodně dlouhý
  </div>
  </div>
  <div id="paticka">
   patička
  </div>
 </body>
</html>
 

Víte někdo prosím, jak to vyřešit? Jak už jsem řekl řešení zhora nefunguje. Děkuji předem!

--- Doplnění předchozího příspěvku (22 Led 2015 20:00) ---

Tak už jsem to částečně vyřešil...
Pozadí se prodlužuje jak má, ale mám v obsahu "stopu" po bočním panelu...

Asi to bude tím floatem, ale ani za nic nemůžu přijít na to, jak to spravit... Víte prosím někdo, jak na to? Děkuji.

Kód:

Kód: Vybrat vše

#hlavni_obsah 
 {
  border: 1px solid black;
  position: relative;
  top: 0px;
  left: 150px;
  width: 880px;
  text-align: left;
 }

#bocni_panel
 {
  border: 1px solid black;
  position: relative;
  float: left;
  left: 0px;
  width: 140px;
  text-align: left;
  margin-right: 10px;
  min-height: 660px;
 }

[kuxik009]

Nevíte někdo?

[kuxik009]

Opravdu mi nikdo neumí pomoct? :(

[LuCaCZ]

nepoužívej relativní pozicování a smaž top, left

#hlavni_obsah nastav taky float:left

[kuxik009]

Super, díky!
Patička se už posune spolu s hlavním_obsahem, mám ale takový problém, že se nezvětší obsah. Víš prosím, jak na to? Díky moc!


HTML

Kód: Vybrat vše

  <div id="obsah">  
   <div id="bocni_panel">
    Panel
   </div>  
  <div id="hlavni_obsah">
   Dlouhý text
  </div>
  </div>
  <div class="clear">
  </div>
  <div id="paticka">
   Patička
  </div>

CSS

Kód: Vybrat vše

html, body
 {
  height: 100%;
 }
 
body 
 {
  padding: 0px;
  margin: 0px auto; 
 }
 
#obsah 
 {
  width: 1036px;
  background: white;
  margin: 0px auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 2px;
  min-height: 100%;
  border: 1px solid black;
  box-shadow: black 4px 6px 30px;
}
 
#paticka
 {
  clear:both;
  text-align: center;
  width: 1000px;
  background: white;
  margin: 0px auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  border: 1px dotted black;
  padding: 3px 3px 3px 3px; 
 } 
 
.clear
 {
  clear: both;
 }
 
#hlavni_obsah 
 {
  border: 1px solid black;
  float: left;
  width: 880px;
  min-height: 100%;
  text-align: left;
  position: relative;
 }
 
#bocni_panel
 {
  border: 1px solid black;
  position: relative;
  float: left;
  width: 140px;
  text-align: left;
  margin-right: 10px;
  min-height: 100%;
 }

[x-rated]

jestli dobře koukám, mělo by stačit do css doplnit tohle

Kód: Vybrat vše

#obsah:after {
content: "";
display: table;
clear: both;
}

[kuxik009]

Super, díky moc!!!
Ten tvůj kód přesně sice nefungoval, ale když jsem vzal ten content, display a clear a vložil ho do původního #obsahu (tj. bez after), funguje to přesně tak, jak má! Ještě jednou díky!!!