How to align a fixed position element to the right side of its container?

HTML & CSS
1

I have a fixed position element that I need aligned to the right side of its parent. However, the only way I can do it is to set a fixed width on the element equal to the width of the parent element. The problem with that is there is another fixed position element (a nav menu) on the same horizontal plane that’s lower in the z-index order. This causes a problem because I cannot select anything from the menu due to the overlap.

Assuming this markup, how can I position the element to the right side of the parent container and fixed to the top of the screen?

<div class="main">
	<div class="featured-home widget_search">
		<form role="search" method="get" id="searchform" action="http://localhost/test/" >
			<div>
				<label class="screen-reader-text" for="s">Search for:</label>
				<input type="text" value="" name="s" id="s" />
				<input type="submit" id="searchsubmit" value="Search" />
			</div>
		</form>
	</div>
</div>

.main {margin:0 auto; text-align:left; width:950px; background:url(main_bg.png); padding:0;-moz-box-shadow:0px 10px 20px #ccc;box-shadow:0px 20px 20px #ccc;-moz-border-radius:12px 12px 0 0;border-radius:12px 12px 0 0;position:relative;}
.widget_search {position:fixed; top:5px; z-index:9999;}
.widget_search form div, .textbox {float:right; background:url(spot2.gif); padding:4px; height:21px; width:225px; margin:0 -1px 0 0; border:none;-moz-border-radius:7px; -webkit-border-radius:7px;border-radius:7px;-moz-box-shadow:inset 0 1px 3px #777;box-shadow:inset 0 1px 3px #777;}
.featured-home.widget_search {position:relative;right:0}
2

Which is meant to be the fixed element? Basically, give the parent position: relative and the element to be fixed position: fixed or position: absolute and place accordingly.

3

For a fixed element all you need to do is say position fixed and margin it in place (no top/left values). If it’s a fixed width container and a fixed width position fixed element then just say margin-left whatever to put it where you want. Position fixed is positioned from the viewport so no need for a relative container.

4

Maybe your nomenclature is leading us astray. A position:fixed element is positioned relative to the VIEWPORT. So it’s parent or ancestry become moot, in a sense. you have to decide do you want to have the element positioned relative to its parent or relative to the view port?

Your code also conflicts with itself.
.featured-home.widget_search {position:relative; } overrides .widget_search {position:fixed;}… so your element is actually RELATIVE not FIXED.

are you trying to move the form outside of its div? or outside the main page? Do you want it to remain present even if the user scrolls down?

5

I really think you aren’t giving us enough information on what it is you are trying to accomplish, and as d_p is pointing out – you may be using the wrong terms for things. I’d really have to see what it is you are trying to do to even weigh in on how to do it as your description makes little if any sense.

But I could say the same about your HTML with the two inner div for nothing, horde of unnecessary classes and ID’s, lack of fieldset, and CSS stuffed all into one giant run-on line that makes it such a royal pain in one’s backside to make sense out of…’

A good start would be to ditch the code you don’t need – FORM is a perfectly good block level container, USE IT!


<div class="main">
	<form method="get" action="http://localhost/test/" id="topSearch">
		<fieldset>
			<label for="searchText">Search for:</label>
			<input type="text" value="" name="s" id="searchText" />
			<input type="submit" value="Search" class="submit" />
		</fieldset>
	</form>
</div>

In terms of placing it – I can’t make any sense out of your conflicting padding’s, use of floats for no fathomable reasons… just where are you trying to put these elements?

6

Thanks for the feedback. It appears some clarification is needed so here goes…

I was not aware that an element cannot be in a fixed position vertically and relatively positioned horizontally. That’s exactly what I’m after though.

I want the search form (.widget_search) to be fixed at the top of the screen, but I want it on the right side of its “markup” container (.main). Currently, it sites on the left side (I understand that sounds contradictory to containment being the “viewport” and not the parent, but that’s just how it is).

So, my page is 950 pixels wide and centered in the viewport, and this fixed position element, is currently fixed to the top of the screen at the left edge of the 950 px container (again, should be viewport but its relative to its container horizontally and relative to the viewport vertically).

I’m just trying to make the element move over to the right side of the container rather than the left.

Here is a live site example of what I’m looking for (a similar menu exists at techcrunch.com).

In the live site example, since the element is in the “sidebar” container, its positioned relative to that container horizontally, but fixed vertically. However, when the element is moved to another markup container higher in the stack, is when I have the issue of not being able to position it to the right without first assigning a width equal to its parent.

7

Ok, for that you WOULD need the outer div (since fieldset can’t be trusted for styling) – but it belongs OUTSIDE div.main.

Move the form out of div.main, put an outer div around it (like you had) set to width:100%; position:fixed at the top, the form 950 wide and margin:0 auto; to center it. position away inside the form.

NOT that I would EVER use position:fixed on a website given it sucks down valuable height real-estate and tends to have accessibility issues too – but I’m the nut who never designs to a fixed width either so…

8

Never tried it before but I took a stab at it for experience sake. Haven’t tested it though in all browsers. Just chrome. Added a bunch of latin text for scrolling.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin:0
}
.main {
	margin:55px auto 0 auto;
	text-align:left;
	width:950px;
	background:url(main_bg.png);
	padding:0;
	-moz-box-shadow:0px 10px 20px #ccc;
	box-shadow:0px 20px 20px #ccc;
	-moz-border-radius:12px 12px 0 0;
	border-radius:12px 12px 0 0;
}

.widget_search form div, .textbox {
	float:right;
	background:url(spot2.gif);
	padding:4px;
	height:21px;
	width:225px;
	margin:0 -1px 0 0;
	border:none;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	-moz-box-shadow:inset 0 1px 3px #777;
	box-shadow:inset 0 1px 3px #777;
}
.featured-home.widget_search {
	right:0
}
#headerwrap {
	position:fixed;
	z-index:10;
	padding:15px;
	background:#CCC;
	width:100%;
	top:0
}
#header {
	width:950px;
	margin: 0 auto;
	position:relative;
}
#header form {
	margin-left:650px;
	position:absolute;
	top:0;
}
</style>
</head>

<body>
<div id="headerwrap">
  <div id="header">List Navigation
   <form role="search" method="get" id="searchform" action="http://localhost/test/" >
      <label class="screen-reader-text" for="s">Search for:</label>
      <input type="text" value="" name="s" id="s" />
      <input type="submit" id="searchsubmit" value="Search" />
    </form>
  </div>
</div>
<div class="main">
  <p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat<br>
  </p>
</div>
</body>
</html>
9

Thanks sdt76! Checking this out now. Really appreciate the extra effort.