Placing text on seperate sides of a <div>

.Simon. · #1 02-05-2009, 10:53 AM

http://www.teamdual1ty.com/college/index.html

I want the headers of the news pieces to have the title on the left, and the date on the right. How can i do it?

I think i did read the code somewhere a while ago, so im gonna go and look for it aswell.

atholon · #2 02-05-2009, 12:37 PM

WelcomeFebruary 5th
.newsTitle { text-align:left; }
.newsDate{ text-align:right;}

Acid · #3 02-05-2009, 02:51 PM

Quote:

Originally posted by atholon
WelcomeFebruary 5th
.newsTitle { text-align:left; }
.newsDate{ text-align:right;}

This part goes in the style tag above the head tag? Or even maybe in a style sheet?

.newsTitle { text-align:left; }
.newsDate{ text-align:right;}

EDGE · #4 02-05-2009, 03:06 PM

Now, I really like that. Nice and simple

.Simon. · #5 02-05-2009, 05:34 PM

Sweet, Thanks ath

.Simon. · #6 02-05-2009, 05:53 PM

Hmm its not working 8-)

i put the CSS in my external style sheet as you typed it, and the span tags like this:

PHP Code:


			
<div class="newsHead"><span class="newsTitle">Welcome</span><span class="newsDate">February 5th</span> </div>

atholon · #7 02-05-2009, 11:37 PM

Yeah just noticed it.... weird.
Let me try some other stuff.

atholon · #8 02-05-2009, 11:43 PM

Grr I thought I had done something like that before!!!

Anywho, this works...not as pretty as I wanted but... the reason the above CSS won't work is because it is aligning the text inside of the span and not the span itsself. I assume you could do this with margins and shiz as well but this was the easiest way.

Code:

.newsHead
{
padding: 2px;
width: 400px;
border:1px solid black;
}
.newsTitle{
float: left;
}
.newsDate{
float: right;
}

.Simon. · #9 02-06-2009, 05:32 AM

Yeah that works, thanks

I have another problem now. The div isnt stretching across the whole space, its ending before the text margin. Ive tried width to the div but that didn't do anything.

atholon · #10 02-06-2009, 09:05 AM

Can you show me what you mean? And what HTML you are using?

.Simon. · #11 02-06-2009, 09:25 AM

http://www.teamdual1ty.com/college/index.html

The red bar with the headline and date on doesnt reach across far enough.

on my index.html page, ive got:

PHP Code:


			
<td colspan="9" bgcolor="#311724" width="540" valign="top" align="center">





            <iframe id="myframe" src="news.html" scrolling="no" marginwidth="0" marginheight="0"

             frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:500; display:none">

            </iframe>            





        </td>

and on the news.html page, i have:

PHP Code:


			
 <html>



<head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>



<body bgcolor="#311724">



    <div class="newsHead" width="480"><span class="newsTitle">Welcome</span><span class="newsDate">February 5th</span> </div>



    <p class="news">

              Text Here

    </p>

    <p class="news">

               Text Here

    </p>





</body>

</html>

atholon · #12 02-06-2009, 10:46 AM

First off you should be using CSS for the width

width: 540px;

.Simon. · #13 02-06-2009, 12:12 PM

Ah fixed it. It was because i copied your css for the div, and forgot to change the width from there ^^

Im still a major css noob, still making the transition

atholon · #14 02-06-2009, 12:37 PM

NP's I am still a n00b

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Dave61 <<< happy birthday >>>	MERMITE	General Chat	4	06-27-2010 06:44 PM
News Flash <<< Dem Shuttind Down For Ever >>>	silentraiders	News	4	04-28-2005 07:21 PM
<<>> News Flash <<>>	silentraiders	Gaming Talk	0	08-20-2004 04:24 AM
<<>>BHD GLITCH<<>>	Stu	Delta Force	7	10-24-2003 01:22 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)