I have an image that I want to position text over. The text should be split so that part is on the left side and part on the right. The following code works great for setting up the image and the left text but I can't get the right text to display properly. It ends up a few lines down the page. Would someone please point out what I am doing wrong? <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr class="header"> <td> <div style="position: relative; background-image: url('images/bkgnd.jpg'); background-repeat: repeat-x;"> <a href="somelink.com"><img src="images/logo.jpg" alt="" title="" border="0" > <div STYLE="position: absolute; top:120px; left: 15px;">left side text</div> <div STYLE="position: relative; float: right; width: 300px;">right side text</div> </div> </td> </tr> </table> Code (markup):
You need to float the left text as well. You could also use a span instead of a div for the two pieces of text. So basically float text to left in first span float text to right in second span. then you can also set text-align to left and text-align to right for both span styles. Then don't forget to clear your floats after this.
I tried the following but it didn't change anything. Does it matter what the position is set to? I tried changing the second relative to absolute but it just moved the text to the left instead of the right. <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr class="header"> <td> <div style="position: relative; background-image: url('images/bkgnd.jpg'); background-repeat: repeat-x;"> <a href="somelink.com"><img src="images/logo.jpg" alt="" title="" border="0" > <div STYLE="position: absolute; float: left; top:120px; >left side text <span STYLE="position: relative; float: right; width: 300px;">right side text</span> </div> </div> </td> </tr> </table> Code (markup):
Yeh i don't know much about position but i guess it's something to do with that.. Because if you float one text to the left and one to the right it will do exactly that.
You can float stuff all you want, but so long as you've also got "position: absolute" in there, nothing will change : ) Position: absolute is... absolutely positioned : ) Things which are floated still pay attention to other text on the page. Things which are positioned absolutely ignore the page, and everything on the page ignores it (only exception, the absolute element pays attention to it's nearest positioned (in any way) ancestor, so it will be placed in reference to that...). I'm a visual person. Can you post an image of what you are trying to make?
This page, http://64.22.87.10/~floattex/floattext.html, displays the problem, which is that the right side text should be displayed on the same line as the left side text. It uses the code as shown below: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> </head> <body> <table border="1" width="100%" cellspacing="0" cellpadding="0"> <tr class="header"> <td> <div style="position: relative; background-image: url('images/logo_bkgnd.jpg'); background-repeat: repeat-x;"> <a href="somelink.com"><img src="images/logo.jpg" alt="" title="" border="0" > <div STYLE="position: absolute; top:120px; left: 15px;">left side text</div> <div STYLE="position: relative; float: right; width: 300px;">right side text</div> </div> </td> </tr> </table> </body> </html> HTML:
Wow, table for nothing - and if the table IS warranted by other stuff on the page then that header class is unwarranted as you should be using TH instead of TD. The anchor tag is unclosed, and you've really overthought this whole thing. Silly question, but is this the actual page header? If so, shouldn't the whole thing be an H1 tag? This is how I'd approach that - axe the table that isn't doing anything, change the outermost div to a h1, strip the border off images via CSS, apply the border around the h1 (that you had on the table) via CSS, for the left and right, we can just nest two spans - both set display:block and position:relative so they depth sort over the image, the first gets padding left and a negative margin to ride it up over the image, while the second gets padding-right and a negative margin to ride it up next to the text before it. so: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> New Layout </title> <style type="text/css"> * { margin:0; padding:0; } img { border:none; } body { padding:12px; } h1 { height:149px; font:normal 14px/16px serif; background:url(images/logo_bkgnd.jpg) 0 0 repeat-x; border:1px solid #000; } h1 img { display:block; width:780px; height:141px; margin:0 auto; } h1 span { display:block; position:relative; /* depth sort over logo */ padding-left:16px; margin-top:-19px; } h1 span span { display:block; text-align:right; padding-right:16px; margin-top:-16px; } </style> </head><body> <h1> <a href="#"> <img src="images/logo.jpg" alt="" /> </a> <span> Left Side Text <span> Right Side Text </span> </span> </h1> </body></html> Code (markup): Though I'm making a lot of assumptions like the left and right text are NOT supposed to be part of that same anchor - I would also likely trade the inlined image for a glider-levin style image replacement when/if you have the actual text that the logo.jpg represents settled in. Oh, I also set the text to a fixed px font size because I'm assuming you don't want the layout broken on large font/120dpi machines.