positioning spans within a div

djtizzlemaster · Apr 25, 2008

i am trying to position spans a certain way within a div.

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?

djtizzlemaster · Apr 25, 2008

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...

ChrisHirst · Apr 25, 2008

isn't there some easier way to push span.entrydate, for example, to the far right of the div?

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>

http://www.candsdesign.co.uk/demo/floating-boxes/

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.

ChrisHunt · Apr 28, 2008

Chris has it right, though I'd be inclined to use a heading element (probably a [tt]<h2>[/tt], but whatever fits into the structure of your document) instead of [tt]<div class="entrytitle">[/tt].

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

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!

positioning spans within a div

djtizzlemaster

Programmer

djtizzlemaster

Programmer

ChrisHirst

IS-IT--Management

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor