sigmund Posted October 4, 2007 Share Posted October 4, 2007 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 More sharing options...
sigmund Posted October 5, 2007 Author Share Posted October 5, 2007 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 More sharing options...
sigmund Posted October 5, 2007 Author Share Posted October 5, 2007 well .. at least in IE 7 it works - not firefox Link to comment Share on other sites More sharing options...
S@m Posted October 5, 2007 Share Posted October 5, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.