How to inherit height in div?


Tags: css,table,html,height

Problem :

I'm learning basic HTML 5 and CSS by myself, and I've been using div instead of table as recommended by many bloggers and web developers. But now I'm with this question: I'm trying to make a table looks like this:

http://www.webdesign-gm.co.uk/images/blog/html5-structure.jpg (sorry for this, but I'm new here and I can't post/upload images)

Using this code:

CSS

.table {
font-size:14px;
border-style:solid;
border-width:2px;
margin:0;
padding:3px;
text-align:center;
vertical-align:middle;
display:table-cell;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;}

HTML

<div align="center">
<div id="row1">
    <div class="table" style="min-width:500px;max-width:500px;">Random Number: <?php echo $gRandNum; ?></div>
</div>
<div id="row2" style="min-height:140px;">
    <div id="row2column1" style="float:left;">
        <div id="row2column1row1">
            <div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;">test1</div>
        </div>
        <div id="row2column1row2">
            <div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;">test2</div>
        </div>
    </div>
    <div class="table" style="border-top-style:none;min-width:350px;">
        test3<br>test3<br>test3<br>test3<br>test3<br>test3
    </div>
</div>
<div id="row3" style="width:500px;">
    <div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
</div>

http://jsfiddle.net/XxRJe/2/ The row2 was supposed to have 2 columns inside of it. And the first column divided in another 2 rows, and each row would have 50% of the row2 height. But that is what is not happenning. How do I fix it? Basically, I want two columns, and the first divided in 2 rows, but I have no idea on how to set it.

Thanks.



Solution :

Hi check this code i tried to fix your problem http://jsfiddle.net/XxRJe/13/. To handle heights on divs with % you need to be carefull because to make it work all his parents need to have a height on % or px to set it.

Here the css

.table {
    font-size:14px;
    border-style:solid;
    border-width:2px;
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
}
#row2 {
    height:300px;
    width:500px;
}
#row2column1, #row2column2 {
    width:50%;
    height:100%;
    color:#fff;
    background-color:#000;
}
#row2column1 .celd{
    height:50%;
    background-color:#666;
}

and HTML

<div>
  <div id="row1">
   <div class="table" style="min-width:500px;max-width:500px;">Random Number:<?php echo $gRandNum; ?></div>
  </div>
  <div id="row2" style="min-height:140px;">
   <div id="row2column1" style="float:left;margin:auto;">
    <div id="row2column1row1" class="celd">
     <div class="celd">test1</div>
     </div>
    <div id="row2column1row2" class="celd">
     <div class="celd">test2</div>
    </div>
  </div>
  <div id="row2column2" style="float:right">
   test3<br>test3<br>test3<br>test3<br>test3<br>test3
  </div>
 </div>
 <div id="row3" style="width:500px;">
  <div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
 </div>
</div>

If you need some more complex elements you have to play with % an dinamic heights.

An additional tip don´t set styles inline make it all in the css file


    CSS Howto..

    How to specify image size in webview css using dip?

    How to position a background image in reveal.js?

    How to get a button to fill the full width of the footer in Mobile View?

    How I can set a different font size for my text by css?

    How to use relative/absolute paths in css URLs?

    How to avoid css and scripting effect when input on textbox

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    How to set content to -webkit-slider-thumb

    How to center
      in a page?

    css how to get rounded corners on button.

    how to get main div container to align to centre

    how to remove css property “element{}” [closed]

    How to vertically align div containers with CSS?

    How to center div the whole screen page using css

    How to remove space between two buttons in a table row or “column”?

    How to completely gray out an image with css?

    How to make better CSS ID rules

    how do i place a text upperright side of the image?

    How can I set all columns to be the same height? [duplicate]

    How could I add a header to a HTML page via CSS?

    Javascript/CSS- how to change the colour of a textarea scrollbar without a third party JS library?

    How to make a dotted underline link on hover?

    How to assign a Css class on an item based on click

    CSS how to fill remaining space (1 div with smaller divs)

    How to link to an image from a CSS file when using the resource plugin 1.2.14

    how do I find out which skin Telerik's RADeditor is using by default?

    How to stretch an element out vertically so that it is always at least as tall as its sibling?

    how to remove elements in document fragment after append

    Multiple Read more issue in css, how do i solve that?

    How to do grid of div elements?