Add spacing between the nav bar in CSS

Question

how do I put the reserved on the left side and the footer on right side of the footer and add space between links on CSS? without using flexbox

HTML:

    <footer>
            <div id="reserved">All rights reserved</div>
            <nav id="footer">
                <a href="">Home</a>
                <a href="">About</a>
                <a href="">Opportunities</a>
                <a href="">Terms</a>
            </nav>
    </footer>

Thanks!

Answer 1

Use float this will give what you want. If you don't want flexbox

 #reserved { float: left; } #footer { float: right; } #footer a { padding: 0 15px; } footer::after { display: block; content: ""; clear: both; }

 <footer> <div id="reserved">All rights reserved</div> <nav id="footer"> <a href="">Home</a> <a href="">About</a> <a href="">Opportunities</a> <a href="">Terms</a> </nav> </footer>

Answer 2

For layouts like this, floats can come in pretty handy. Define #reserved to float left, and #footer to float right. This will place both child elements on opposite ends. You can simply add a margin to your anchor tags to your desired size:

 #reserved { float:left; } #footer { float:right; } #footer>a { margin-right: 10px; }

 <footer> <div id="reserved">All rights reserved</div> <nav id="footer"> <a href="">Home</a> <a href="">About</a> <a href="">Opportunities</a> <a href="">Terms</a> </nav> </footer>

Answer 3

You haven't specified how you want your links to be displayed; if you want them to be displayed downwards, then use block, otherwise you don't really need to add much code except to display the ids inline-block and add some padding to the nav a links.

The snippet below shows an example of displaying the menu downwards. I added a vertical-align:top so that the "All rights reserved" would be inline with the top menu link (as opposed to displaying at the bottom of the menu. Adjust as you see fit.

 #reserved, nav { display: inline-block; position: absolute; vertical-align: top; } #reserved { margin-top: 10px; margin-left: 5%; } nav { left: 50%; } nav a { display: block; padding: 10px; text-decoration: none; }

 <footer> <div id="reserved">All rights reserved</div> <nav id="footer"> <a href="">Home</a> <a href="">About</a> <a href="">Opportunities</a> <a href="">Terms</a> </nav> </footer>

Answer 4

Just put a style on the footer

#footer{
padding: 0 10px;
}

In this example, it will give a space of 10px, both on left and right side.

But when you want #reserved to be on the right and #footer to the left, then enclose it both with div having this css

#wrapper{
display:flex;
}

#reserved{
flex: 1 1;
}

#footer{
flex: 1 1;
}

Then, do this:

<footer id="wrapper">
            <div id="reserved">All rights reserved</div>
            <nav id="footer">
                <a href="">Home</a>
                <a href="">About</a>
                <a href="">Opportunities</a>
                <a href="">Terms</a>
            </nav>
    </footer>