Home/ Questions/Q 9296817
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T21:54:59+00:00

This might be a really basic css question but I tried to create my

  • 0

This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn’t, also I’d like to make my content height flexible because it’s for a dynamic web app so the footer should be positioned below it accordingly. Ok so here’s the mockup of what id like to achieve
enter image description here

<body>

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">My account</a></li> 
    <li><a href="">Help</a></li> 
    <li><a href="">Contact Us</a> </li> 
    </ul>

</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">

</div>
<div id="footer">
<p>&copy; TEST</p>
</div>
</body>
</html>

here’s my css code:

body{
width: 90%;
margin: 0 auto;}

#content {
overflow: auto;
height: 29em;}

#header{
height: 60px;
overflow: hidden;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#personalised p {
float: left;
width: 20%;
margin-top:5%;}

#navigation{
margin: 1%;}

#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}

div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }

#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}

I know this is long, but I’d really appreciate your help. Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try working on your formatting first. (It’s not too bad, but can use improvement.) That’s one of the biggest benefits to you is code that you can read. You can look through what I’ve done here and play with what you like. http://jsfiddle.net/mPH8X/

    <head>
<style>
div {
 border: 1px dashed #FF0000;
}
body {
    margin: 0px;
    padding: 0px;
}

.clear {
    clear: both;
}

#header {
    min-height: 60px;
    overflow: hidden;
    margin: 1%;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#navigation{
    margin: 1%;
    float: right;
}

#navigation ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#navigation ul li {
    margin: 0px;
    padding: 0px;
    display: block;
    position: relative;
    float: left;
}

#navigation li ul { 
    display: none; 
}

.body {
    clear: both;
}

#personalised {
    margin: 1%;
    float: left;
    width: 20%;
}

#content {
    margin: 1%;
    float; right;
    min-height: 29em;
}

#personalised p {
    margin: 0px;
    padding: 0px;
}

#header, #footer, #navigation, #personalised {

}

#footer {
    padding: 0.5em 0;
    font-family: Arial, Verdana;
    font-size: 10px;
    text-align: center;
}
</style>
<body>

<div id="header">
    <h1>LOGO</h1>
    <ul>
        <li><a href= ""> Home </a></li>
        <li><a href= ""> Logout </a></li>
    </ul>
    <div class="clear"></div>
</div>

<div id="navigation">
    <ul>
        <li><a href="">Home</a></li> 
        <li><a href="">My account</a></li> 
        <li><a href="">Help</a></li> 
        <li><a href="">Contact Us</a> </li> 
    </ul>

    <div class="clear"></div>
</div>

<div class="body">
    <div id="personalised">
        <p>Hey there</p>
        <div class="clear"></div>
    </div>

    <div id="content">

    </div>
</div>

<div id="footer">
    <p>&copy; TEST</p>
</div>
</body>
</html>

    Edit: Looking at your content statement, you are looking for CSS’s min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.

    • 0