Set space between divs

Question

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?

Answer 1

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; } 

Answer 2

Float them both the same way and add the margin of 40px. If you have 2 elements floating opposite ways you will have much less control and the containing element will determine how far apart they are.

#left{     float: left;     margin-right: 40px; } #right{    float: left; }