CODEWITHSUNDEEP
htmlcsscss-tables
user2680079
user2680079

Reputation:

How to inherit height in div?

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:


(source: webdesign-gm.co.uk)

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

Upvotes: 2

Views: 1412

Answers (1)

DaniP
DaniP

Reputation: 38252

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

Upvotes: 1

Related Questions