CODEWITHSUNDEEP
htmlcss
user1427661
user1427661

Reputation: 11784

Moving a far right float from the right margin

Let's say I have a navbar that has 5 elements nicely floated to the left. I then add an element that I want to be on the far right, but I want a little bit of a margin between the element floated to the far right and the edge of the actual document. If I just do float:right;, the element is smashed to the end of the document. If I try to mess with position-right or margin-right, nothing happens. How do I get the element away from the edge?

Upvotes: 4

Views: 14286

Answers (2)

Iron3eagle
Iron3eagle

Reputation: 1077

A couple options, first use a wrapper to to control the two divs seperation:

HTML:

<div id="wrapper">
<div id="left">Left Div</div>
<div id="right">Right Div</div>
</div>

CSS:

#left {
    float: left;
}

#right {
    float: right;
}

#wrapper {
    width: 500px;
    margin: auto;
    padding: auto;
    overflow: auto;
}

http://jsfiddle.net/wDjFV/

Another option is to do float: left on BOTH <div>s and seperate with margins there:

HTML:

<div id="left">Left Div</div>
<div id="right">Right Div</div>

CSS:

#left {
    float: left;
}

#right {
    float: left;
    margin-left: 200px;
}

http://jsfiddle.net/wDjFV/3/

Update:

Just a thought on the second option that you may not know, you'll want to to do clear:both on a CSS rule for any <div>s that are bellow the ones you are floating to get the normal stacking behavior.

Upvotes: 4

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

padding-right may be what you are looking for, not position-right. Either way, margin-right should be working to pull the box away from the edge of the page. padding-right will keep the box on the edge of the page, but move the containing content further away from the edge.

Upvotes: 3

Related Questions