CODEWITHSUNDEEP
csshtmlcss-floatalignment
corecase
corecase

Reputation: 1298

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

<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!

Upvotes: 7

Views: 45808

Answers (4)

munch1324
munch1324

Reputation: 1148

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;
}

Upvotes: 1

j08691
j08691

Reputation: 207861

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;
}

Upvotes: 13

dezman
dezman

Reputation: 19358

I think the problem you are having, is that you need to clear your floats. This might not be the best way to do it, but for simplicities sake, add this: <div style="clear:both;"></div> after the last <div> inside your container(#navBar).

Upvotes: 0

zb&#39;
zb&#39;

Reputation: 8049

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

Upvotes: 1

Related Questions