Home/ Questions/Q 7809349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T03:24:29+00:00

I cannot seem to put the div id=navigation to bottom align with the image.

  • 0

layout of my page
I cannot seem to put the div id="navigation" to bottom align with the image. Could anyone help me with the CSS? Thanks!

Here is the HTML code:

<body>
  <div class="container">
    <div class="header"><img id="logo" src="images/logo.png" />
      <div id="navigation">
        <ul>
          <li><a href="#">Menu link 1</a></li>
      <li><a href="#">Menu link 2</a></li>
          <li><a href="#">Menu link 3</a></li>
        </ul>
      </div>
    </div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main content</div>
    <div class="footer">Footer content</div>
  </div>
</body>

And the CSS:

.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: yellow;
margin: 0 auto;
}

.header {
width: 100%;
float: left;
background: orange;
}

#logo {
float: left;
display: block;
}

#navigation {
margin-left: 50px;
padding: 0px 50px 0px 0px;
float: left;
background: pink;
}

#navigation ul {
list-style-type: none;
}

#navigation li {
display: inline;
}

#navigation a {
float: left;
margin: 0px 80px 0px 0px;
}

.sidebar {
clear: both;
float: left;
width: 20%;
background: red;
}

.content {
float: left;
width: 80%;
}

.footer {
clear: both;
position: relative;
background: green;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Or you can set the height of your header and the headers position to relative, to set the navigation to bottom: 0px;

    .container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: yellow;
margin: 0 auto;
height: 150px;
}

.header {
width: 100%;
float: left;
background: orange;
    position: relative;
}

#logo {
float: left;
display: block;
}

#navigation {
margin-left: 50px;
padding: 0px 50px 0px 0px;
float: left;
background: pink;
    position:absolute;
    bottom:0px;
}

#navigation ul {
list-style-type: none;
}

#navigation li {
display: inline;
}

#navigation a {
float: left;
margin: 0px 80px 0px 0px;
}

.sidebar {
clear: both;
float: left;
width: 20%;
background: red;
}

.content {
float: left;
width: 80%;
}

.footer {
clear: both;
position: relative;
background: green;
}​
    • 0