CODEWITHSUNDEEP
css
Jane
Jane

Reputation: 21

Divs height problem

How to get that div id="left" has height equal like divs right_up and right_down together ?

    <div style="width: 1050px;">
    <div id="left" style="width: 80%;height:80%;min-height: 80%;float: left; background-color: blueviolet;">a</div>
    <div id="right_up" style="width: 20%;height:40%;min-height: 40%; float: left; background-color: yellow;">
        <p>some text using paragraphs</p><p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
    <div id="right_down" style="width: 20%;min-height: 40%;height:40%; float: left; background-color: aqua; margin-left: 80%;">
        <p>some text using paragraphs</p><p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 143

Answers (3)

jrn.ak
jrn.ak

Reputation: 36619

UPDATED
-- Fix: Using XHTML 1.0 Strict DTD
-- Fix: Background fills to height of div#wrapper
-- Broke: No longer adjusts to browser height

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div-height</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<style type="text/css">
    div#wrapper {
        width: 1050px;
        height: 80%;
        min-height: 80%;
        background-color: blueviolet;
        overflow: auto;
    }
    div#left {
        width: 80%;
        float: left;
    }
    div#right_up, div#right_down {
        width: 20%;
        height: 40%;
        min-height: 40%;
        float: right;
    }
    div#right_up {
        background-color: yellow;
    }
    div#right_down {
        clear: right;
        background-color: aqua;
    }
    div.clearfix {
        clear: both;
    }
</style>

</head>
<body>

<div id="wrapper">
    <div id="left">a</div>
    <div id="right_up">
        <p>some text using paragraphs</p>
        <p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
    <div id="right_down">
        <p>some text using paragraphs</p>
        <p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>

</body>
</html>

Upvotes: 0

ghoppe
ghoppe

Reputation: 21784

Cheat.

Upvotes: 1

Dalen
Dalen

Reputation: 9006

to me works removing 

margin-left: 80%;

from div id="right_down"

Upvotes: 1

Related Questions