ansaurus

Question

Divs height problem

Answer 1

+1 A:

to me works removing

margin-left: 80%;

from div id="right_down"

Dalen 2010-10-22 22:25:04

firefox and chrome, right now i cannot test it on IE bucause i'm on a ubuntu machine

Dalen 2010-10-22 22:47:23

I tried your solution in mozilla and chrome. It doesn't work .

Jane 2010-10-22 22:48:20

It works for 2 other people, but not you? I'm guessing you have some other CSS that's interfering.

jnpcl 2010-10-22 23:04:03

@Dalen and myself: This only works in Quirks Mode. :P

jnpcl 2010-10-23 00:29:58

Answer 2

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

jnpcl 2010-10-22 22:29:56

How does this .css make the div#left full height?

ghoppe 2010-10-22 22:46:57

@ghoppe: no idea, the only thing I did was separate the CSS from the HTML.

jnpcl 2010-10-22 22:50:02

This doesn't work

Jane 2010-10-22 22:52:58

Works just fine in FF3.6.3 --> http://i55.tinypic.com/34qp6s7.jpg

jnpcl 2010-10-22 22:58:07

This is what I need ! Can you give me please all html ?

Jane 2010-10-22 23:21:00

That is the exact code that I'm loading into my browser.

jnpcl 2010-10-22 23:23:31

Problem is when i put tags like doctype, html and head, then is different ! Do I need that tags, for load jquery and other javascript ? <!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">

Jane 2010-10-22 23:28:29

@ jnpcl Maybe I put wrong DTD ? In chrome and mozilla and chrome looks fine without doctyoe, but with doctype doesn't. In explorer doesn't look at all ok. Any help, pls ?

Jane 2010-10-22 23:38:36

You're right, it doesn't work with the `DOCTYPE` set to `XHTML 1.0 Strict`. I'll try to find a fix.

jnpcl 2010-10-22 23:40:40

Answer 3

+1 A:

Cheat.

ghoppe 2010-10-22 22:35:45

ansaurus

tags:

views:

answers:

Divs height problem

related questions