Set space between divs

Question

I have two divs like this    lt section id  main  gt           lt div id  left  gt               lt asp ContentPlaceHolder ID  left  runat  server    gt           lt  div gt           lt div id  right  gt               lt asp ContentPlaceHolder ID  right  runat  server    gt           lt  div gt   lt  section gt    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

User · Answer

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>

User · Answer

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

User · Answer

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

[css] Set space between divs

Examples related to css

Examples related to asp.net-mvc