Hello sir,
I am trying to create the FOoter...

My Work (Code):

<html>
<body>
<div id='footerdiv' style="height:400px;background-color:#091d22">
    <div id ="Socialbar" style="height:50px; background-color:#0c3239">
    </div>

    <div id="ftNavBar">
        <div class="ftNav" id="ft_summary">
           <script type="text/javascript" src="http://ji.revolvermaps.com/2/1.js?i=8yc9f8z4elm&amp;s=350&amp;m=8&amp;v=true&amp;r=false&amp;b=000000&amp;n=false&amp;c=ff0000" async="async"></script>

        <div class="ftNav" id="xsoftware"><h1>Software-1</h1>
            <ul>
                <li><a href="">Advance Notepad</a></li>
                <li><a href="">X Content</a></li>
                <li><a href="">y Content</a></li>
                <li><a href="">z Content</a></li>
            </ul> 
        </div>   
        <div class="ftNav" id="ysoftware"><h1>Software-2</h1>
            <ul>
                <li><a href="">Advance Notepad</a></li>
                <li><a href="">X Content</a></li>
                <li><a href="">y Content</a></li>
                <li><a href="">z Content</a></li>
            </ul> 
            <div class="ftNav" id="zsoftware"><h1>Software-3</h1>
            <ul>
                <li><a href="">Advance Notepad</a></li>
                <li><a href="">X Content</a></li>
                <li><a href="">y Content</a></li>
                <li><a href="">z Content</a></li>
            </ul> 
        </div>   
        </div>   
        </div> 

    </div>   


</div>
</body>
</html>

but now what the problem is that I have to insert the Nav bar in proper padding, Example the script is the Earth Views. and rest all are the software content as per title.
I hav to put all those software in DIV Footer ID. but as after globe all goes DOWNWARD.
As You can see in the Below Img.

Capture.PNG

And it should be like
sss.PNG

Member Avatar

diafol

Hello sir,

You've just alienated our female members.

ok, Sorry for that.
Hello Sir/Madam :p

Anyone plz help me, i m stuck here from a week...

Have you tried to use float on your ftNav divs?

I am noob in this, I just google and do all.
Am i correct to use Float="right" on here
Line no:11
<div class="ftNav" id="xsoftware" float="right"><h1>Software-1</h1>
not working...
Plz help me here...

No no, "float" is a style property, you'd have to put it in your CSS ;).

So, instead of float="right", use style="float: right;" or put a float: right; in your stylesheet for the element it needs to be applied to.

You might want to check out some tutorials on using the float CSS rule by the way :p.

hey thanks your code somewhat work but its not showing the proper paddings between them...
Capture.PNG
:(

EDITED CODE:

<html>
    <body>
    <footer>
    <div id='footerdiv' style="height:400px;background-color:#091d22">
        <div id ="Socialbar" style="height:50px; background-color:#0c3239">
        </div>

        <div id="ftNavBar" style="float: left">
            <div class="ftNav" id="ft_summary">
               <script type="text/javascript" src="http://ji.revolvermaps.com/2/1.js?i=8yc9f8z4elm&amp;s=350&amp;m=8&amp;v=true&amp;r=false&amp;b=000000&amp;n=false&amp;c=ff0000" async="async"></script>
            <div class="shlink" id="shortcut" style="float: right;">
            <div class="ftNav" id="xsoftware"><h1>Software-1</h1>
                <ul>
                    <li><a href="">Advance Notepad</a></li>
                    <li><a href="">X Content</a></li>
                    <li><a href="">y Content</a></li>
                    <li><a href="">z Content</a></li>
                </ul> 
            </div>   
            <div class="ftNav" id="ysoftware"><h1>Software-2</h1>
                <ul>
                    <li><a href="">Advance Notepad</a></li>
                    <li><a href="">X Content</a></li>
                    <li><a href="">y Content</a></li>
                    <li><a href="">z Content</a></li>
                </ul> 
                <div class="ftNav" id="zsoftware"><h1>Software-3</h1>
                <ul>
                    <li><a href="">Advance Notepad</a></li>
                    <li><a href="">X Content</a></li>
                    <li><a href="">y Content</a></li>
                    <li><a href="">z Content</a></li>
                </ul> 
            </div>   
            </div>   
            </div> 
        </div>
        </div>   


    </div>
    </footer>
    </body>
    </html>

use the new html5 elements like this
html code

<!DOCTYPE html>
<html>
<head>
    <title>Sample HTML5 Layout</title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>This is page heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <article>
        <h1>This is article heading</h1>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </article>
    <aside>
        <figure>
            <img src="images/laptop.png" height="100px" width="100px" />
            <figcaption>Figure caption goes here</figcaption>
        </figure>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </aside>
    <section>
        <h1>This is a section heading</h1>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </section>
    <footer>
        <hr />
        Copyright (C) 2013. All rights reserved.
    </footer>
</body>
</html>

css code

article
{
    padding:5px;
    border:dotted 3px #ff006e;
    margin-top:5px;
}

header
{
    padding:0px;
    text-align:center;
}

aside
{
    margin-top:5px;
    background-color:#f0eaea;
    padding:5px;
    text-align:center;
    font-style:italic;
    border:double 3px #b200ff;
}

section
{
    padding:5px;
    border:dashed 3px #0026ff;
    margin-top:5px;
}

footer
{
    padding:5px;
    text-align:center;
    font-weight:bold;
}

nav
{
    text-align:center;
}
ul li
{
    display:inline;
    padding-left:5px;
    padding-right:5px;
    text-align:left;
    font-size:16px;
    font-weight:bold;
}
commented: Glad you weren't alienated! +15