CSS Div 100% with float:left_问答_开发者_运维开发者技术经验分享

Agrh, CSS - the bane of my life. Can someone help out here?

I'm trying to get the following div layout:

*******************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*******************************************************************************

Currently my styles look like this:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
}

#b {
float:left;
width:50px;
height:50px;
}

#c {
float:left;
width:100%;
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

But this is causing the following to happen (div c drops below the others):

********************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
********************************************************************************

What needs to change to fix this? Thanks.

Additional info:

a and b must开发者_运维问答 have fixed pixel widths.
This is a simplified example - in reality the divs have borders which must not overlap.

Just don't float the last div then its gonna work. Also remove the 100% width and give it a left margin of the width of your two fixed width divs. This should look like this:

http://jsfiddle.net/YMQbh/

Don't float the "c" div. As a block element, it will naturally take up the whole horizontal width of the viewport.

What you want to do is to simply use a margin on the left side of "c" to give "a" and "b" room beside "c"

Try this:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#b {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#c {
/*   2x 50px wide div elements = 100 px
 * + 2x  1px left borders      =   2 px
 * + 2x  1px right borders     =   2 px
 *                              =======
 *                               104 px
 */
margin-left: 104px; 
}

first of all its better to have a container with a fixed width. The next thing is that the 100% with of "c" is relative to the container, so it will spann the whole container width.

Update: To say it more precise: the c div needs no floating an no width. Like others already said: A div (as blocklevel element) spans by itselfe the whole width.

I think just leaving out the width attribute at all for the c div should do the work. Normally DIVs will span the whole width they can get. This example worked for me:

<html>
<head>
    <style type="text/css">
        #a {
            width: 50px;
            height: 50px;
            float: left;

            background-color: #ffff00;
        }

        #b {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #ff00ff;
        }

        #c {
            height: 50px;
            background-color: #00ffff;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>

Rather than floating #c, I'd give it a margin-left and leave the width as automatic.

Here you go:

<div style='width:200px;background:yellow;float:left'>One</div>
<div style='width:200px;background:orange;float:left'>Two</div>
<div style='background:khaki'>Three</div>

Can adjust One and Two widths as needed. Tested working in FF 3.6, IE 8, Safari 4.0, Chrome 3.195.

EDIT

Now, with borders:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid green;margin:0 -1px'>Two</div>
<div style='background:khaki;border:1px solid black;margin-left:400px'>Three</div>

EDIT 2

Non-overlapping borders (and contrasting colors), hot off the press:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid blue;margin:0 -1px 0 1px'>Two</div>
<div style='background:purple;border:1px solid orange;margin-left:403px'>Three</div>

#container {
float:left
width:100% /*for liquid layout*/
width:960px /*fixed layout*/
height:50px;
}

#a {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#b {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#c {
float:left;
width:90%;
/*or*/
width:860px; /* subtract the sum of the container a+b from the container c. */
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

If you add padding,margin right or left or both you must subtract them from the total width too.