Home/ Questions/Q 8909971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:34:13+00:00

Can someone please explain to me how to move a at the bottom of

  • 0

Can someone please explain to me how to move a at the bottom of a ! I can’t believe I’m struggling with something I believed would have been simple task.

I’m using the mvc template (html5) provided in .net and here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left" style="border: 2px solid red">
                <p class="site-title">
                    @Html.ActionLink("My website", "Index", "Home")
                </p>
            </div>
            <div class="float-right" style="border: 2px solid red;">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>
                    &copy; @DateTime.Now.Year - MyWebsite.com</p>
            </div>
        </div>
    </footer>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

While not displayed in the code above, the height of my div will be 101px and I want the navigation menu to be displayed at the bottom of the right inside div but I’ve tried playing around with various settings in the site.css and using inline style and as I said, I can’t get it to display where I want it to! I’m still googling, but hopefully someone will have solution for me. I’ve spent way too much time on this!

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check out this one:
    working Example : http://jsfiddle.net/YNBxz/792/

    First, I have given the div’s position as relative. Then I have floated the nav to the right,gave position as absolute and bottom:0,right:0.

    HTML:

    <div id ="div1" >
        Here is a div with height 101px

        <nav>
           <a href="http://www.google.com/">Google</a> |
           <a href="http://www.bing.com/">Bing</a>
        </nav>  
</div>

    CSS:

    #div1 {
   position:relative;
   height:101px;
   width:100%;
   border:2px solid black;
}


#div1 nav {


float:right;
position:absolute;
bottom:0;
right:0;

}
    • 0