1 reply [Last post]
kuxa
kuxa's picture
Offline
newbie
Last seen: 6 years 33 weeks ago
Timezone: GMT+1
Joined: 2015-01-24
Posts: 1
Points: 2

Hey,
I have on my website following code:

HTML

  <div id="obsah">  
   <div id="bocni_panel">
    Side panel
   </div>  
  <div id="hlavni_obsah">
   Really long text
  </div>
  </div>
  <div class="clear">
  </div>
  <div id="paticka">
   footer
  </div>

CSS

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;
}
 
#hlavicka
 {
  width: 1040px;
  background: white;
  margin: 0px auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 147px;
  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%;
 }

And I need obsah to have same height as hlavni_obsah - but it hasn't. Can someone help me please? You can see it in real here. Thank you very much!

Sorry for bad English Smile
...and sory for strange names of divs, they are in my language Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

???

They are the same heights. The parent's height is 810px and the child's is 800px plus 10px padding.

The real question is why are you setting the height in the first place? That's a print concept. The web is not print. For the web, let the content set the height.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.