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

    jquery: how to determine if a style is set via css class or hardcoded by style attribute? [duplicate]

    Show/Hide Div's via | Save Scrollbar | Save State

    How long can a webpage be?

    how to manage Css Floats

    how to make a left aligned navigation with dropdown elements

    How to get css width of class?

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How to add CSS class to password field using jquery in MVC?

    CSS - how to overflow from div to full width of screen

    How do I modify the bootstrap carousel javascript file so that it can trigger this function?

    How to design the vertical scroll bar or customize the vertical scroll bar design?

    CSS: How does setting a right margin cause the element's parent to become visible in this example?

    how to transform in both X & Y direction with CSS Only [duplicate]

    How to get a textarea to fill in the height of a table column?

    How to create an email template from a responsive website?

    How do I vertically align elements within a div in CSS?

    How to implement fluid font size using pure CSS

    How to make a caret in a link change color when the LINK is hovered over?

    How to display a button over a picture only when hovering it?

    How to write CSS keyframes to indeterminate material design progress bar

    How to position a set in Raphael SVG?

    How can I check if CSS calc() is available using JavaScript?

    Show/Hide images based on tab selection

    how can tell element to get specified styles?

    How to make a CSS shape with rounded and straight edges?

    How to make css max width in IE6 and 7?

    hide form with css3 and show default div.

    How to include SASS files and CSS files into version repository and developement cycle

    How to disable and enable css rule

    How to navigate divs in a custom built single page app? [closed]