Jump to content

right alignment woes


sigmund
 Share

Recommended Posts

For my heading, i need two images to the left and two hyperlinks to the furtherest right hand side, adjustable for browser size. After reviewing this forum - I tried to putting my two sections each in containers within the header. Can not get the right side to work. I uploaded the file here:http://geocities.com/fmh102560/(pls disregard javascript is yahoo - sorry)and I will paste the code here as well.

<!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' xml:lang='en'>    <head>        <title>Multi-column Layout</title>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">        <style type="text/css">div#header_container,div#footer {    border: 1px solid black;	/*max-width: 1000px;manip width here*/    min-width: 600px;    background: rgb(244, 244, 244);}div#header_container {    /*margin: 10px auto -1px auto;*/	margin: 2px auto -2px 0;}div#header_one {width: 400px;float:left;}span.header_two{clear:both;margin-right:5%;}div#header_two{clear:both;}img.head_img2{	margin: 0 auto 0 30px;}</style></head><body>	<div id='header_container'>		<div id="header_one"><img name="placeHolderImage" src="" width="153" height="64" alt="placeHolderImage" style="background-color: #FFFFFF" /><img class="head_img2" src="images/header_identifier.gif" /></div>				<!-- tried both div and span below, both went to new line, neither went to right margin 	-->				<span class="header_two">hyperlinks go here - need to be on further right hand side regardless of browser size - same line as images </span>		<div id="header_two">hyperlinks go here - need to be on further right hand side regardless of browser size - same line as images </div>							 	</div></body></html>

Link to comment
Share on other sites

Got it - here's the code - woohoo

<!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' xml:lang='en'>    <head>        <title>Multi-column Layout</title>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">        <style type="text/css">div#header_container, {position: relative;	width: auto;    height: 300px;    margin: auto;}div {    width: 350px;    height: 100px;    border: 1px solid rgb(200, 200, 200);    position: absolute;}div#header_left {top:0;left:0;}div#header_right{top:0;right:0;}img.head_img2{	margin: 0 auto 0 30px;}</style></head><body>	<div id='header_container'>		<div id="header_left"><img  src="images/logo_1.gif" /><img style class="head_img2" src="images/header_identifier.gif" /></div>				<div id="header_right">hyperlinks go here - need to be on further right hand side regardless of browser size - same line as images </div>							 	</div></body></html>

Link to comment
Share on other sites

Give this a shot. If nothing else it might give you some ideas on what you can try.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">ul#header_nav {float:right;position:relative;}ul#header_nav li {display:inline;}#header p {display:inline;}</style></head><body><div id="header"><p>First image</p><p>Second image</p><ul id="header_nav">	<li><a href="">Link 1</a></li>    <li><a href="">Link 2</a></li></ul></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...