CODEWITHSUNDEEP
csshtml
Gaurav Gupta
Gaurav Gupta

Reputation: 4691

adjusting div in html

I am new to html. I want to make simple layout design as follows:

-------------------------------------
                                    |
-------------------------------------
    |                           |   |
    |                           |   |
    |                           |   |
    |                           |   |
    |---------------------------|   |
____|_________footer____________|___|

but my footer is not adjusted in between left and right menu. It is below left and right menu.

Below is my html code:

<html>
<head>
<style>
#container {
    height: 100%;
    width: 100%;
    background-color: aqua;
    position: relative;
}

#header {
    height: 5%;
    background-color: #FFA500;
}

#leftmenu {
    background-color: #FFD700;
    height: 90%;
    width: 20%;
    float: left;
}

#rightmenu {
    background-color: #FFD700;
    height: 90%;
    width: 10%;
    float: left;
}

#content {
    style ="background-color: #EEEE12;
    height: 85%;
    width: 70%;
    float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><tiles:insertAttribute name="title" ignore="true"></tiles:insertAttribute>
</title>
</head>
<body>
    <div id="container" class=".container">

        <div id="header" class=".header">
            <h1>Main Title of Web Page</h1>
        </div>

        <div id="leftmenu" class=".leftmenu">
            <b>Menu</b><br> HTML<br> CSS<br> JavaScript
        </div>

        <div id="content" class=".content">Content goes here</div>

        <div id="rightmenu" class=".rightmenu">
            <b>DashBoard</b><br> Recent<br> Saved Search
        </div>

        <div id="footer"
            style="background-color: #FFA500; clear: both; text-align: center;">
            Copyright © W3Schools.com</div>

    </div>


</body>
</html>

Upvotes: 3

Views: 148

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 25954

You have a few problems

The first is that you are mixing inline CSS with CSS in a <style> tag. Don't do that, just put it in the <style> tag 99.9% of the time

Secondly, you have a style="... in one line of your CSS, presumably from copying so I removed it

Thirdly, you need to set a width for the footer. Since the two side divs are both percents that total 30%, I changed the footer to have width:70%

Fourthly you need to position it to the right of the left div. You can do so by using margin-left:20%, the width of that left div

Lastly, you need to position the footer up next to the left and right divs. By using my browsers inspect element I saw that the footer was 20px. Thus I gave the two side divs both margin-bottom:-20px so that the clear:float on the footer wouldn't make it go past both elements

Demo

Although this isn't the way I'd do it, it works

Upvotes: 1

Nick
Nick

Reputation: 2549

So what I've done here is create a middle div. That contains your content and footer.

Your middle div has a relative position, and I've absolutely positioned your footer to sit at the bottom.

Note, the middle div needs a height for this to work. That shouldn't be an issue though!

Let me know if you need anything else!

<div id="middle"> 
<div id="content" class=".content">Content goes here</div>
<div id="footer" style="background-color: #FFA500; clear: both; text-align: center;">
Copyright © W3Schools.com
</div>
</div>
</div>

#middle {float: left; width: 70%; height: 80px; position: relative;}
#footer {bottom: 0px; position: absolute; width: 100%}

Here's a fiddle with an example for you!

http://jsfiddle.net/LmVKD/

Upvotes: 3

Related Questions