Placing multiple Divs (side by side) within a parent Div <p>My goal is to place four divs within a single "container" div. Here's my code so far:</p> <p><strong>HTML</strong></p> <pre><code>&lt;body&gt; &lt;div id="navBar"&gt; &lt;div id="subDiv1"&gt; &lt;/div&gt; &lt;div id="subDiv2"&gt; &lt;/div&gt; &lt;div id="subDiv3"&gt; &lt;/div&gt; &lt;div id="subDiv4"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>#navBar { width: 75%; height: 75px; margin-left: 25%; margin-right: auto; margin-top: 2%; border-width: 1px; border-style: solid; border-radius: 10px; border-color: #008040; overflow: hidden; } #subDiv1, #subDiv2, #subDiv3, #subDiv4 { width: 25%; height: 75px; border-width: 1px; border-color: #000; border-style: solid; } #subDiv1 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; float: left; margin-left: 0%; } #subDiv2 { float: left; margin-left: 25%; } #subDiv3 { float: left; margin-left: 50%; } #subDiv4 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; float: left; margin-left: 75%; } </code></pre> <p>As far as I know this is the only part of my code that's relevant to my question so I left some other parts out.. Don't mind the width and margin of the navBar, because it's actually within another container as well.</p> <p>P.S I searched Google and StackOverFlow and I could not find an answer that was helpful. There were many questions about placing two divs within a single div, but none for aligning multiple divs within a single div.</p> <p>Thanks for any help in advance!</p>