Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

positioning spans within a div

Status
Not open for further replies.
djtizzlemaster

djtizzlemaster

Programmer
Mar 5, 2008
17
0
0
US
i am trying to position spans a certain way within a div.

help.jpg


this ^ is pretty much how i want it to look, but so far i am doing this using absolute positioning, and i know there has to be some easier way to do it.

here's the code i'm currently using:

Code: 
div.entry {
	border: solid;
	width: 500px;
	margin:0 auto;
	text-align: left;
}

div.entrycontent{
	padding-top: 20px;
}


span.entrydate {
	position: relative; 
	left: 250px;
}

span.entrytitle {
	font-weight: bold;
	left: 130px;
	position: relative;
}

in case this helps, here's the xhtml i'm using:

Code: 
	<div class="entry">
	
		<span class="entryname">
			
			billie jean
			
		</span>
		
		<span class="entrytitle">
			
			interesting stuff
			
		</span>
		
		<span class="entrydate">
			
			1999.12.31
			
		</span>
	
		<div class="entrycontent">
		
			here's an entry. it's about stuff and quite frankly i find it to be extremely interesting.
	
		</div>
		
	</div>

isn't there some easier way to push span.entrydate, for example, to the far right of the div?
 
Sort by date Sort by votes
i meant to say that i'm using relative positioning. there still has to be a better way though, so when someone adds an entry i don't have to be there to set the positioning to a certain number, check to see if that looks ok, adjust it, etc. etc...
 
Upvote 0 Downvote
isn't there some easier way to push span.entrydate, for example, to the far right of the div?
Click to expand...

Yep use divs not spans, then size them and float them right and left.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL] ">

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
div.entry {
    border: solid;
    width: 500px;
    margin:0 auto;
    text-align: left;
}

div.entrycontent{
    padding-top: 20px;
}
div.entryname {
	float:left;
	width:25%;
}

div.entrydate {
	float:right;
	width:25%;
	text-align:right;
}

div.entrytitle {
    font-weight: bold;
	width:40%;
	margin:0 auto;
	text-align:center;
}
</style>
  </head>
  
  <body>
    <div class="entry">    
        <div class="entryname">billie jean</div>
        <div class="entrydate">1999.12.31</div>
        <div class="entrytitle">interesting stuff</div>
        <div class="entrycontent">
            here's an entry. it's about stuff and quite frankly i find it to be extremely interesting.
        </div>
    </div> 
	
	 </body>
</html>




Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
231
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
113
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
504
Mike Lewis
Mike Lewis
cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
337
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
254
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top