Separating two divs with CSS
Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting 开发者_如何转开发A to take up 70% of the remaining space and B the remaining 30%?
EDIT: Accepted the answer a little early before I actually tried. Whoops.
JSFiddles:
A Tale of Two Divs
Now separated, but now with the second one on a second line?
Try this out if it solves your problem.
<html>
<head>
<style type="text/css">
#Content
{
border: 3px solid blue;
position: relative;
height: 300px;
}
#divA
{
border: 3px solid red;
position: absolute;
margin-right: 25px;
left: 5px;
top: 5px;
bottom: 5px;
right: 70%;
}
#divB
{
border: 3px solid green;
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
left: 30%;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="Content">
<div id="divA">
</div>
<div id="divB">
</div>
</div>
</body>
</html>
just set the margin-left or padding-left of div B
I believe your selected answer will not work:
http://jsfiddle.net/cNsXh/
edit:
Sorry, the above example was not correct at first. Now it is.
/edit
As you can see, div #b will move under div #a because margin-left (or padding-left) will be added to the 30%. And because we're mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.
You'll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b, but define margin-left. Because a div is a block element it will automatically fill the remaining space inside the wrapper div:
http://jsfiddle.net/k7LRz/
This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3's box-model will provide more flexible options here. But, admittedly, I'm not sure yet about cross-browser support for these new features.
@wrongusername; i know you accept that answer but you can check this solution as well in this you have no need to give extra mark-up & if you give padding to your div it's not affect the structure.
CHECK THIS EXAMPLE: http://jsfiddle.net/sandeep/k7LRz/3/
http://jsfiddle.net/efortis/HJDWM/
#divA{
width: 69%;
}
#divB{
width: 29%;
margin-left: 2%;
}
加载中,请稍侯......
精彩评论