I am trying to align the DIV #subnav to the right where it would line up on the right with the navigation button entitled “Contact”. I can’t seem to get it to work correctly with all of my attempts.
Can someone take a look at this link and tell me what I am doing wrong?
LINK-
http://www.securehostserver.info/fbc/
Thanks in advance.
Todd
Your subnav has a width and is positioned absolute. That way you can never align it with that button. I would take the width away from the subnav and make it float right and give it some margin right in order to align it with the contact button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}
html, body {
background-color:#F9F4EE;
height:100%;
}
img {
vertical-align:bottom;
}
a img {
border:0 none;
}
p {
font:0.75em/1.438em Arial,Helvetica,sans-serif;
padding:0 0 12px;
}
.clearfix {
height:0;
overflow:hidden;
}
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
#outer {
background:url("../i/gfx_bkg.jpg") repeat-x scroll 0 0 transparent;
}
#wrapper {
margin:0 auto;
position:relative;
width:960px;
}
* html #wrapper, * html #outer {
height:100%;
}
#header-container {
background:url("../i/gfx_header_bkg.gif") repeat-x scroll 0 0 transparent;
height:121px;
position: relative;
}
#header {
height:121px;
margin:0 auto;
position:relative;
width:960px;
}
h1.logo {
float:left;
font-size:0;
text-indent:-9999px;
}
h1.logo a, h1.logo a:link, h1.logo a:visited {
background:url("../i/gfx_nav.png") no-repeat scroll 0 0 transparent;
display:block;
height:121px;
margin:0;
width:296px;
}
#navbar {
display:inline;
float:left;
margin:81px 0 0;
width:640px;
}
#nav {
height:40px;
list-style:none outside none;
margin:0;
overflow:hidden;
padding:0;
width:640px;
}
#nav li {
float:left;
}
#nav li a, #nav li a:link, #nav li a:visited {
display:block;
height:40px;
line-height:40px;
text-decoration:none;
text-indent:-9999px;
}
#nav li.about a {
background:url("../i/gfx_nav.png") no-repeat scroll -296px -81px transparent;
height:40px;
width:73px;
}
#nav li.staff a {
background:url("../i/gfx_nav.png") no-repeat scroll -369px -81px transparent;
height:40px;
width:62px;
}
#nav li.ministries a {
background:url("../i/gfx_nav.png") no-repeat scroll -431px -81px transparent;
height:40px;
width:94px;
}
#nav li.calendar a {
background:url("../i/gfx_nav.png") no-repeat scroll -525px -81px transparent;
height:40px;
width:91px;
}
#nav li.familylifecenter a {
background:url("../i/gfx_nav.png") no-repeat scroll -616px -81px transparent;
height:40px;
width:151px;
}
#nav li.daycare a {
background:url("../i/gfx_nav.png") no-repeat scroll -767px -81px transparent;
height:40px;
width:82px;
}
#nav li.contact a {
background:url("../i/gfx_nav.png") no-repeat scroll -849px -81px transparent;
height:40px;
width:87px;
}
#nav li.about a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -296px -121px transparent;
height:40px;
width:73px;
}
#nav li.staff a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -369px -121px transparent;
height:40px;
width:62px;
}
#nav li.ministries a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -431px -121px transparent;
height:40px;
width:94px;
}
#nav li.calendar a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -525px -121px transparent;
height:40px;
width:91px;
}
#nav li.familylifecenter a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -616px -121px transparent;
height:40px;
width:151px;
}
#nav li.daycare a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -767px -121px transparent;
height:40px;
width:82px;
}
#nav li.contact a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -849px -121px transparent;
height:40px;
width:87px;
}
#nav li.about a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -296px -161px transparent;
height:40px;
width:73px;
}
#nav li.staff a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -369px -161px transparent;
height:40px;
width:62px;
}
#nav li.ministries a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -431px -161px transparent;
height:40px;
width:94px;
}
#nav li.calendar a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -525px -161px transparent;
height:40px;
width:91px;
}
#nav li.familylifecenter a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -616px -161px transparent;
height:40px;
width:151px;
}
#nav li.daycare a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -767px -161px transparent;
height:40px;
width:82px;
}
#nav li.contact a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -849px -161px transparent;
height:40px;
width:87px;
}
#subnav {
font:12px/14px Arial,Helvetica,sans-serif;
float: right;
position: relative;
clear: right;
}
#subnav ul {
height:14px;
line-height:14px;
list-style:none outside none;
overflow:hidden;
text-decoration:none;
}
#subnav li {
border-left:1px solid #BBBBBB;
float:left;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color:#949494;
display:block;
height:14px;
line-height:14px;
margin:0 8px;
text-decoration:none;
}
#subnav li a:hover {
color:#BBBBBB;
text-decoration:underline;
}
#subnav li a.last {
border-right:1px solid #BBBBBB;
padding:0 8px 0 0;
}
#main {
background:url("../i/gfx_bkg_main.png") no-repeat scroll 0 0 white;
height:100%;
margin:0 0 0 34px;
overflow:hidden;
padding:20px;
width:862px;
}
#left {
float:left;
padding:0 13px 0 0;
width:525px;
}
#left h2 {
border-bottom:2px solid #688D98;
font:2em/1.4em 'Yanone Kaffeesatz',Arial,serif;
margin:0 0 12px;
}
#right {
float:left;
padding:0 0 0 14px;
width:310px;
}
.box1 {
background-color:#FAF9E0;
border-left:13px solid #E5E264;
margin:0 0 10px;
padding:12px 15px;
}
.box2 {
background-color:#ECECD7;
border-left:13px solid #A2A138;
margin:0 0 10px;
padding:12px 15px;
}
.box3 {
background-color:#E1E8EA;
border-left:13px solid #688D98;
margin:0 0 10px;
padding:12px 15px;
}
#right h2 {
font:bold 0.8em/1.4em Arial,Helvetica,sans-serif;
text-transform:uppercase;
}
#footer {
background:url("../i/gfx_bkg_footer.png") no-repeat scroll 0 0 transparent;
height:60px;
margin:0 0 0 34px;
padding:15px 20px 0;
width:902px;
}
#footer p {
color:#CCCCCC;
font:0.625em/1em Arial,Arial,Helvetica,sans-serif;
padding-bottom:6px;
text-transform:uppercase;
}
#footer a, #footer a:link, #footer a:visited {
color:#CCCCCC;
text-decoration:underline;
}
#footer a:hover {
color:#CC0000;
}
#footer a.plug {
color:#CCCCCC;
text-decoration:none;
}
#footer a.plug :hover {
color:#CCCCCC;
text-decoration:none;
}
.floatRight {
float:right;
margin:0 0 8px 8px;
}
.floatLeft {
float:left;
margin:0 8px 8px 0;
}
input, textarea, select {
border-width:1px;
font:0.75em/1em Arial,Helvetica,sans-serif;
margin:0;
padding:1px;
}
.textInput {
margin:0;
padding:0;
}
#signup {
height:22px;
margin:0;
padding:0;
}
input#email {
margin:0 2px 8px 0;
}
</style>
</head>
<body>
<div id="outer">
<div id="header-container" class="clearfix">
<div id="header">
<h1 class="logo"><a href="#" title="First Baptist Church Clinton Tennessee">First Baptist Church Clinton Tennessee</a></h1>
<div id="subnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Location / Directions</a></li>
<li><a href="#" class="last">Photo Gallery</a></li>
</ul>
</div><!--end subnav-->
<div id="navbar">
<ul id="nav">
<li class="about"><a href="about">About</a></li>
<li class="staff"><a href="staff/">Staff</a></li>
<li class="ministries"><a href="ministries/">Ministries</a></li>
<li class="calendar"><a href="calendar/">Calendar</a></li>
<li class="familylifecenter"><a href="family-life-center/">Family Life Center</a></li>
<li class="daycare"><a href="daycare/">Daycare</a></li>
<li class="contact"><a href="contact/">Contact</a></li>
</ul><!--end nav-->
</div><!--end navbar-->
</div><!--end header-->
</div><!--end header container-->
<div id="wrapper">
<div id="main">
<div class="anythingSlider">
<div class="slideshow">
<ul>
<li><img src="i/gfx_slide1.jpg" alt="" width="862" height="236" /></li>
<li><img src="i/gfx_slide2.jpg" alt="" width="862" height="236" /></li>
</ul>
</div>
</div><!--end slideshow-->
<div id="left">
<h2>Welcome to First Baptist Clinton Tennessee</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<h2>Upcoming Events</h2>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div><!--end left-->
<div id="right">
<div class="box1">
<h2>Email Newsletter</h2>
<p>Sign up to receive breaking news as well as receive other site updates!</p>
<div id="signup">
<form id="form1" name="form1" method="post" action="">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="email" type="text" id="email" tabindex="1" value="email address" size="26" /></td>
<td><input type="image" src="i/btn_go.gif" name="go" id="go" value="Go" alt="Go" tabindex="1" /></td>
</tr>
</table>
</form>
</div><!--end signup-->
</div><!--end box1-->
<div class="box2">
<h2><img src="i/gfx_photo_gallery.jpg" alt="Photo Gallery" width="115" height="86" class="floatRight" />Photo Gallery</h2>
<p>Check out the latest photos from our past community events here. </p>
</div><!--end box2-->
<div class="box3">
<h2>Find Us On Facebook</h2>
<img src="i/gfx_facebook.jpg" alt="Find Us On Facebook" width="57" height="57" class="floatLeft" />
<p>Keep up-to-date with the latest First Baptist Clinton information by following us on Facebook. </p>
</div><!--end box3-->
</div><!--end right-->
</div><!--end main-->
<div id="footer">
<p>First Baptist Church of Clinton, Tennessee. 225 N. Main Street, Clinton, TN 37716 T: (865) 457-9353 F; (865) 457-0713 E: <a href="#">info@fbclinton.org</a></p>
<p>© Copyright 2010. All Rights Reserved. <a href="http://www.t2graphicdesign.com" target="_blank" class="plug">Website Design by T2 Design.</a></p>
</div><!--end footer-->
</div><!--end wrapper-->
</div><!--end outer-->
</body>
</html>
I didn’t have your images so I didn’t apply any margins to subnav to align them with the contact button
So do absolute positioned elements not need a width ever?
Also, your fix works in everything but IE6. Is that a HasLayout issue?
Hi,
Working with the code at the link you posted it looks like right:16px; would have done the trick.
If you add #logo a width (296px) plus #navbar width (640px) that gives you 936px.
Now subtract 936px from #header width (960px) and that gives you 24px space left on the right side.
Now take that 24px and subtract #subnav li right margin of 8px and it gives you 16px. Just simple math going on here. 
#subnav {
font:12px/14px Arial,Helvetica,sans-serif;
position:absolute;
[B]right:16px;[/B]
top:10px;
}
The subnav isn’t absolute it’s relative. Didn’t test it in IE6 though. What is happening?
Your right Ray. I made it more complicated than needed 
I saw the width and became over enthusiastic I guess, plus when I can avoid absolute positioned elements I do.
The div #subnav is using position: absolute.
In IE6 the entire subnav disappears.
The problem is that in IE6 that when a child element of a widthless float gains haslayout it stretches the element to 100% wide.
You need to float all the elements like so.
#subnav ul {
list-style: none;
overflow: hidden;
display: block;
line-height: 14px;
height: 14px;
text-decoration: none;
[B] float:right;[/B]
}
#subnav li {
[B] float: left;[/B]
border-left: 1px solid #BBB;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
text-decoration: none;
height: 14px;
display: block;
line-height: 14px;
color: #949494;
margin: 0 8px;
[B] float:left;
}[/B]
Note that if you float right inside a floated left element then again IE6 stretches it to 100% wide so as a rule of thumb children and parents should all be floated and all floated in the same direction when dealing with widthless floats.
The above example is the exception in that you can float the parent right and then float the children left without it stretching to 100%.
Clear as mud
You can also just do away with that #subnav div that the UL is nested in, it is not needed. You can style the UL alone.
That will get you out of stretching bug that Paul explained and reduce unnecessary code at the same time.
Then apply the styles from #subnav to the UL and float the anchor as well.
[COLOR=Red]/*#subnav {
font: normal 12px/14px Arial, Helvetica, sans-serif;
position: absolute;
top: 10px;
right: 16px;background:red;
}*/[/COLOR]
[B]ul#subnav[/B] {
[COLOR=Blue] font: normal 12px/14px Arial, Helvetica, sans-serif;
position: absolute;
top: 10px;
right: 16px;[/COLOR]
height: 14px;
overflow: hidden;
list-style: none;
text-decoration: none;
}
#subnav li {
[COLOR=Blue]float: left;[/COLOR]
border-left: 1px solid #BBB;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
[COLOR=Blue]float: left;[/COLOR]
text-decoration: none;
height: 14px;
display: block;
line-height: 14px;
color: #949494;
margin: 0 8px;
Then the html would simply be:
[B]<ul id="subnav">[/B]
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Location / Directions</a></li>
<li><a href="#" class="last">Photo Gallery</a></li>
[B]</ul>[/B]<!--end subnav-->
In what I posted, I changed the position to relative, so I thought It wasn’t any longer positioned absolute. But anyway, Paul O’B and Rayzur came with solutions where you didn’t have to change that at all.