Placing multiple Divs (side by side) within a parent Div

My goal is to place four divs within a single "container" div. Here's my code so far:HTML\[code\]<body> <div id="navBar"> <div id="subDiv1"> </div> <div id="subDiv2"> </div> <div id="subDiv3"> </div> <div id="subDiv4"> </div> </div></body>\[/code\]CSS\[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\]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.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.Thanks for any help in advance!
 
Back
Top