How to place two divs side by side when having a sidebar - html

Question

When I place two different divs side by side with a sidebar, and have only margin to the right on the first one (that is on the left). And the right one don't have one.
How do I create a good structure so I don't have to manually add style="margin:0" to the right HTML element?
To demonstrate this I have created this illustration:

Answer 1

You can use nth-child(odd) to target every odd item in the order of your items.
Since you didn't provide any actual code example, I have put together a structure I felt appropriate for such a design.
Here's an example I knocked up: http://codepen.io/michaelpumo/pen/OMgEKp
In the CodePen, I am using Jade for HTML and SCSS for the CSS. I recommend using them, but if you want the compiled code, it's below.
HTML
<div class="grid">
<div class="grid__left">
<div class="grid__hero"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
<div class="grid__right">
<div class="grid__sidebar"></div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
padding-top: 10px;
}
.grid {
width: 600px;
overflow: hidden;
margin: 0 auto;
}
.grid__left, .grid__right {
float: left;
}
.grid__left {
width: 400px;
}
.grid__right {
width: 200px;
padding-left: 10px;
}
.grid__hero, .grid__item, .grid__sidebar {
background: #000;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__item {
float: left;
clear: none;
width: 195px;
height: 200px;
margin: 0 10px 10px 0;
}
.grid__item:nth-child(odd) {
margin-right: 0;
}
.grid__sidebar {
width: 100%;
height: 410px;
}
Hope it makes sense. The real meat of the matter is on the .grid__item divs, that have a margin right, but this being removed for every odd one, which results in the effect I think you're after.
In any case, it looks like you're after a grid system. There are many out there; most popular being Bootstrap. I strongly recommend using one of them: http://getbootstrap.com
Personally, I use a SCSS based grid called Neat: http://neat.bourbon.io/