javascript - How to divide 1 div into 3 sections - Stack Overflow

admin管理员组

文章数量:1426855

All i want to do is to make a footer, that stretches across the whole page. And is split in 3 sections/buttons (with the width of each button 33.333%).

I've tried so many binations of code trying to get it to work, however failed every time. So the code below is not very necessary, just how I tried to go by making this footer. (which failed miserably)

.footerMain {
    width: 100%;
    background-color: green;
    clear: both;
    padding: 20px 0px;
    border: solid 2px;
    display: block;
}


#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;

}

.footerMain div a{
    display: inline-block;
    background-color: red;
    text-align: center;
    height:100%;
}

footer p {
    text-align: center;
    clear: both;
    background-color: darkgreen;
}

Html:

        <footer>

        <div class="footerMain">

            <div id="facebook-div">
                <a href="#">Facebook</a>
            </div>

            <div id="youtube-div">
                <a href="#">Youtube</a>
            </div>

            <div id="instagram-div">
                <a href="#">Instagram</a>
            </div>
        </div>

        <p>&copyExample</p>


    </div>
    </footer>

PLEASE HELP! This is driving me insane.

Thanks in advance :)

All i want to do is to make a footer, that stretches across the whole page. And is split in 3 sections/buttons (with the width of each button 33.333%).

I've tried so many binations of code trying to get it to work, however failed every time. So the code below is not very necessary, just how I tried to go by making this footer. (which failed miserably)

.footerMain {
    width: 100%;
    background-color: green;
    clear: both;
    padding: 20px 0px;
    border: solid 2px;
    display: block;
}


#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;

}

.footerMain div a{
    display: inline-block;
    background-color: red;
    text-align: center;
    height:100%;
}

footer p {
    text-align: center;
    clear: both;
    background-color: darkgreen;
}

Html:

        <footer>

        <div class="footerMain">

            <div id="facebook-div">
                <a href="#">Facebook</a>
            </div>

            <div id="youtube-div">
                <a href="#">Youtube</a>
            </div>

            <div id="instagram-div">
                <a href="#">Instagram</a>
            </div>
        </div>

        <p>&copyExample.</p>


    </div>
    </footer>

PLEASE HELP! This is driving me insane.

Thanks in advance :)

• javascript
• html
• css
• navigation
• footer

Share Improve this question Follow asked Oct 14, 2014 at 14:25 BriannaXDBriannaXD 17933 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You just need to set the width of the inner DIVs:

#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;
    width: 33.33%;
}

DEMO

The html given by you is not valid

</div>
</footer>

(the second last line: the div is not needed/invalid). I made a fiddle, with 33% width for divs. Does this do what you want?

#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;
    width: 33%;
}

http://jsfiddle/4u6rftrL/

.footerMain > div {
    width: 33%;
    float: left;
}

That would be the most basic way, based on the markup you provided.

UPDATED

Make it like this http://jsfiddle/detezp42/2/

The CSS

*{
    margin: 0px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.footerMain {
    width: 100%;
    background-color: green;
    clear: both;    
    border: solid 2px;
    display: block;
    overflow: hidden;
}
#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;
    width: 33.33%;    
}
.footerMain div a {
    display: inline-block;
    background-color: red;
    text-align: center;
    width:100%;
    padding: 20px 0px;
}
footer p {
    text-align: center;
    clear: both;
    background-color: darkgreen;
}

本文标签： javascriptHow to divide 1 div into 3 sectionsStack Overflow