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.
加载中,请稍侯......
精彩评论