Geek asks and answers

Placing Multiple Divs (Side by Side) Inside the Parent Div

My goal is to put four divs in one "container" div. Here is my code:

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 is relevant to my question, so I left some other parts. Ignore the width and margin of navBar, because it really is in a different container.

PS I searched Google and StackOverFlow, and I could not find an answer that would be useful. There were many questions about placing two divs in the same div, but none of them was intended to align multiple divs within the same div.

Thanks for any help in advance!

+5
source share
4 answers

, div .

jsFiddle

#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;
}
+11

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

+1

, css, , float. , . , divs . divs :

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

, , , , . , : <div style="clear:both;"></div> <div> (#navBar).

0

More articles:


All Articles