ansaurus

Question

CSS floats messed up

Answer 1

+2 A:

Be sure the margin of both are set to 0:

<img src="{avatar}" alt=""  style="float: left; width: 30%; margin: 0px"/> 

<div style="float:right; width: 70%; text-align: left; margin: 0px">
 {message}
</div>

<div style="clear:both"></div>

As css can be really tricky, some other solutions to try:

Let both float left, should make no difference.
Make sure the border doesn't increase the size.
Descrease the width of one a bit, IE is stubborn.

Dykam 2009-07-11 14:42:00

still the same, but thanks for trying to help

Digerdoden 2009-07-11 14:48:36

Edited slightly. Always remove unnecessary overhead.

Dykam 2009-07-11 14:55:07

Answer 2

A:

This happens because the sum of the (external) widths of the two floating divs is larger than the internal width of the external box, so they don't fit in the same row.

Try increasing the width of the external div, decreasing its padding, decreasing the width or margin or padding of the internal boxes.

DrJokepu 2009-07-11 14:42:55

70% + 30% = 100%... means an exact fit. Makes me think.

Dykam 2009-07-11 14:44:53

Not in CSS world. That's the "beauty" of CSS box model.

buti-oxa 2009-07-11 14:54:20

Yeah, true... padding and border can destroy layouts with ease.

Dykam 2009-07-11 14:57:24

In CSS, the `width` property measures the internal width of an element (*excluding* the padding, border, and margin). You're trying to line up external width (*including* the padding, border, and margin). What you're ending up with is a total external width of 70% + 30% + div1-padding + div1-border + div1-margin + *etc.* If the padding, border, and margin don't total 0 (margins can be negative), they'll be too wide.

Ben Blank 2009-07-11 14:59:44

Not if you have margins or paddings or borders. See http://css-tricks.com/the-css-box-model/ for an explanation of the box model.

Emily 2009-07-11 15:04:31

Answer 3

A:

Code works fine when I tried it. You sure there isn't any padding or margin on the image or the text? That would mess up the percentages you're using. If you have it examine the image and text in Firebug to see what styles are being applied.

Jared 2009-07-11 14:56:59

Answer 4

A:

When you say width: 30% or width: 70% it implies the width of the content inside the div excluding the padding, border and margin of the div. Looking at the images I am sure you have added some padding etc to both divs. Also I do not see any 'background: #fff' in your code, so I am not sure which one is the 'white' box.

Virat Kadaru 2009-07-11 15:03:40

Answer 5

A:

Ok, did I get voted down because I used a table? I am not by trade a designer, I am actually a programmer and I know there are hard-core css designers that cringe at the idea of using a table layout but it seems to works for me. The graphic designers that I work with give auto generated table layout from fireworks to work with which is a real pain.

Anyway the way I personally would try to accomplish the dersired effect though pure css would be more like.

<html>
<head>
    <title>SandBox</title>  
    <style type="text/css">
        #outerDiv
        {
            margin:0;
            background-image:url(myImage.gif);
            background-position:top left;
            background-repeat:no-repeat;
            padding-left:30%;
            min-height:200px;
            background-color:#777777;               
        }
        #innerDiv
        {
            background-color:#333333;
        }
    </style>     
</head>
<body>
    <div id="container" style="width:500px;">
        <div id="outerDiv">
            <div id="innerDiv">content goes here</div>
        </div>
    </div>
</body>

Note: I am not a designer. I also made this a wiki. So please edit or at least leave a comment if you going to vote down.

x13 2009-07-12 16:42:17

ansaurus

tags:

views:

answers:

CSS floats messed up

related questions