I have two divs like this:
<section id="main">
<div id="left">
<asp:ContentPlaceHolder ID="left" runat="server" />
</div>
<div id="right">
<asp:ContentPlaceHolder ID="right" runat="server" />
</div>
</section>
And here is my css:
#left
{
float: left;
margin-right: 17px;
}
#right
{
float: right;
}
I want the space between the divs to be 40px. I tried adding padding, margin and width in my css, but I think it didn't set the padding to correct 40px. How to do it?
This question is related to
css
asp.net-mvc
You need a gutter between two div gutter can be made as following
margin(gutter) = width - gutter size E.g margin = calc(70% - 2em)
<body bgcolor="gray">
<section id="main">
<div id="left">
Something here
</div>
<div id="right">
Someone there
</div>
</section>
</body>
<style>
body{
font-size: 10px;
}
#main div{
float: left;
background-color:#ffffff;
width: calc(50% - 1.5em);
margin-left: 1.5em;
}
</style>
For folks searching for solution to set spacing between N divs, here is another approach using pseudo selectors:
div:not(:last-child) {
margin-right: 40px;
}
You can also combine child pseudo selectors:
div:not(:first-child):not(:last-child) {
margin-left: 20px;
margin-right: 20px;
}
Source: Stackoverflow.com