Menu
My goal is to place four divs within a single "container" div. Here's my code so far:
HTML
<body>
<div id="navBar">
<div id="subDiv1">
</div>
<div id="subDiv2">
</div>
<div id="subDiv3">
</div>
<div id="subDiv4">
</div>
</div>
</body>
CSS
#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%;
}
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!
398
I'd do two things, get rid of the margins on your floated divs and add the box-sizing rule.
jsFiddle example
#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;
box-sizing:border-box;
}
#subDiv1 {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
#subDiv2 {
float: left;
}
#subDiv3 {
float: left;
}
#subDiv4 {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
You can use display: table
.menu {
display: table;
width: 100%;
border: 1px solid black;
border-right: none;
box-sizing: border-box;
}
.menu > div {
display: table-row;
background-color: green;
}
.menu > div >div {
border-right: 1px solid black;
display: table-cell;
text-align: center;
}
@media screen and (max-width: 400px) {
.menu {
display: block;
float: left;
width: auto;
border: none;
}
.menu > div {
display: block;
}
.menu > div > div {
border: none;
padding-right: 10px;
display: block;
text-align: left;
}
}
fiddle
22
The main issue that I saw with your css is that you add in a margin for each float item. This would make sense if it was positioned absolutely. Since it isn't the divs will stack. Removing the margins will allow the divs to fit in the container:
http://jsfiddle.net/eGLTM/
#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: 24%;
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;
}
#subDiv3
{
float: left;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
