Div To The Right Side Of The Page

January 30, 2024 Post a Comment

I'm having a problem with placing the 'navigation' div (within 5 buttons) to the right side of the page in the '#header' div. The 'navigation' div is still next to the 'logo' div.

Solution 1:

There are multiple approaches to this, and you might have to experiment what works for you.

First of all, there's the position property, if you wanted to place the navigation to the right you'd get:

#navigation
{
    position: absolute; /*or fixed*/right: 0px;
}

This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.

The other way, which may or may not work, again, is to use the float property

#navigation
{
    float: right;
}

Solution 2:

Do like this (use float & dont forget the clear in content div) :

#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}

#content {
clear:both;
height: auto;
}

Solution 3:

#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}

adjust padding right and top px if u want....

Solution 4:

You need to use float in navigation div and some width.

#navigation {
 display: inline-block;
 vertical-align: middle;
 float:right;
 }

Update this class and check it should work

Solution 5:

Youri,

There are a few ways to accomplish this effect, here is one.

Take a look at this:http://jsfiddle.net/legendarylion/8jKUP/1/

THEHTML
<body>
<divid="header"><divid="logo"><!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...--><imgclass="example-logo"src="images/logo.png"width="90px"></div><!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus--><nav><ul><li><ahref="#"><!--add your image code back here-->Home</a></li><li><ahref="#"><!--add your image code back here-->Overons</a></li><li><ahref="#"><!--add your image code back here-->Product</a></li><li><ahref="#"><!--add your image code back here-->Media</a></li><li><ahref="#"><!--add your image code back here-->Contact</a></li></ul></nav></div><divclass="DivHelper"></div></div><divid="footer"></div>
</body>

</html>

THECSS/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
 #header {
    position:relative;
    border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
 nav {
    position:absolute;
    top:0px;
    right:0px;
    border:1px dashed blue;
}
/*So what happened?  The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner.  Nav will stay there even if the parent container has more elements added to it.

Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls?  That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*//* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
 nav ul li {
    list-style-type:none;
    display:inline-block;
    margin:0 10px;
}
nav ul li a {
    text-decoration:none;
}
.example-logo {
    height:50px;
    width:50px;
    background:blue;
}

What we're doing here is declaring a parent element relative, and the element you want styled in the top right corner absolute to that relation.

Also take a look in my comments in that code for some other ideas that I think might be helpful to you.

Html5 Lite