CSS class forcing new line

I have one line of code...

<a href="home.php" class="maintextsmallwhite">HOME</a><div class="maintextsmallwhite">|</div>

and the | after the link, I want on the same line of code, but it goes below the actual link.  Why is this and how can it be fixed?
body {
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 0px;	
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
 
 
.maintext {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
}
 
.maintext_midsize {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	vertical-align: top;
}
 
a {  font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
 
	text-decoration: none;
 
  }
 
 
 
.maintextsmallwhite {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	vertical-align: top;
}
 
a.maintextsmallwhite:Hover { 
 
font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	vertical-align: top;
	
}
 
 
.maintextsmallblack {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	vertical-align: top;
}
 
 
 
.subtopictext {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #7b7b7b;
}  
 
a {  font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
 
	text-decoration: none;
 
  }
 
a:hover {  font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	background-color: #FFCC33;
 
	
 
  }
 
div#main h1 {
	margin:10px 0 0 7px;
	padding:0;
	width:98%;
	text-align:left;
	font-size:25px;
	color:#333;
	border-bottom:1px dotted #003300;
	font-weight:normal;
}

Open in new window

tru504187211Asked:
Who is Participating?
 
unassassinableCommented:
Here you go, you need to float those suckers.

 
.maintextsmallwhite {
      float:left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #000;
        vertical-align: top;
}

PS - I would HIGHLY recommend you these in your body {  } parameters (that way you can remove the many redundant phrases and clean your code up a bit:

font-family: Arial, Helvetica, sans-serif;font-size: 12px; color: #000000;
 
0
 
unassassinableCommented:
BTW, I think I know what your doing, but your going about it the wrong way...

please take a look at this site that I am currnetly building for a client:

http://equinoxits.com/home.php

look at the footer.  I am using \ where it looks like you want to use | .  Same thing really. Feel free to look at/use/copy the code all you want.  Here is the CSS:

http://equinoxits.com/style.css

just do a search for FOOTER in the css and that will bring you to the area you'r looking for

Rich
0
 
oleberCommented:
instead of div use a span, it is the correct for this situation


remove: <div class="maintextsmallwhite">|</div>

use: <span class="maintextsmallwhite">|</span>

0
 
glumlunCommented:
hi you need to float the .maintextsmallwhite class, so that the next element will 'float up' next to it

also you need to add a new class that targets just the div so you can display it inline, this stops it pushing in width all the way to the right of the page, you could specify a width instead.

presuming you are going to have a list of horizontal links, i added some padding around the |

.maintextsmallwhite {
          font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #ffffff;
        vertical-align: top;
        float: left;
}

div.maintextsmallwhite {
   display: inline;
   margin: 0 4px 0 4px;
}
0
 
tru504187211Author Commented:
Thanks for the help!  I'll take a look at your code example from your second post eventually! THANKS!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.