ansaurus

Question

Divs width problem

Answer 1

+1 A:

First of all you cannot use percentage heights on floated elements.

Second, I see no height set on the wrapper div

FutureKode 2010-10-24 22:13:31

Sorry, my mistake.

Rebecca 2010-10-24 22:23:16

Answer 2

A:

http://www.positioniseverything.net/easyclearing.html

Enrico Pallazzo 2010-10-24 22:14:58

Answer 3

A:

Make sure that your code validates: http://validator.w3.org/ . Fixing the little errors it find will remove a lot of variance between browsers.

For instance, you've specified the width attribute twice for #wrapper, which doesn't make any sense.

bemace 2010-10-24 22:15:01

Answer 4

A:

Hey Rebecca and welcome to SO! :)

First of all, I don't think you could ever get mixed measurements units act the way you want. You have divs width in percentages and border width in pixels, basically you're hoping that 1% will never mean more than 2px for the wrapper width.

Let's take it step by step. First of all, you have 2 widths for the wrapper div. The second will overwrite the first and you'll end up with a width of 700px. That's very little, you should reconsider to a width of 960px or a max. of 990px (which assures you won't have an horizontal scrollbar on 99.9% of the screen resolutions today.

Let's rewrite that to:

div#wrapper {
    width: 700px; /* 700 to stick to your design */
    margin: 0 auto; /* which is basically the same as you have, but in one property, not two */
    overflow: hidden;
}

div#left {
    width: 558px; /* 80% of 700px (wrapper div) minus the border width. It will never change so there's no need to set it in percentages */ 
    height: 80%; /* height will overwrite min-height on FF for example. Also, min-height doesn't work in IE, setting a fixed height might be the best way to go */
    min-height: 80%;
    float: left;
    background-color: #DFDFDF;
    border: 2px solid #606060; /*set a border all over the div */
    border-right: 0; /* and remove the right border */
}

div#right_up {
    width: 140px; /* 20% of 700px */
    height: 80%; /* same height problem as you have for the other div here */
    min-height: 80%;
    float: right; /* float right, not left like the other one */
    background-color: whitesmoke; /* please set colors in hex, not like this */
    border: 2px dashed #FF2A2A;
    border-left: 2px solid whitesmoke; /* again, colors in hex please */
    border-bottom: 0;
}

Also, add a div with class clear in the markup like this:

<div id="wrapper">
    <div id="left">
        REFERENCE:
    </div>
    <div id="right_up">

    </div>
    <div class="clear"></div>
</div>

And add a class definition in the css like this:

.clear {
    clear: both;
}

The last advice is to allways put your CSS in an external stylesheet and reference it in your page in the head section of the HTML like this:

<link rel="stylesheet" type="text/css" href="path/to/style.css">

Good luck!

Claudiu 2010-10-24 22:27:45

ansaurus

tags:

views:

answers:

Divs width problem

related questions