Divs are going out of the parent div

Question

I'm currently working on a webpage.

Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.

Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar. How can I make it go to the next line instead of going behind the sidebar?

Thanks in Advance.

Answer 1

Maybe the reason is width: 100% for the main section?

.main {
        width: auto;
        margin-left: 250px;
}

Answer 2

The reason the block is not wrapping is because it is ignoring the margin right.

Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.

This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.

Answer 3

From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.