Placing something next to a block level element

[Eiolon]

I am using a header tag (<H2></H2>) and am wondering how I could play something on the opposite end, but outside of the <H2></H2> tag as depicted below:

 

 

My styling:

 

h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#2858A6;
padding-bottom:5px;
border-bottom:1px dotted #DDDDDD;
}

 

Do I need to create a new DIV and tell it an absolute position to go there or is there another way?

[webdevpro]

 

 

 

 

 

.left {
float: left;
width: 50%;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#2858A6;
padding-bottom:5px;
border-bottom:1px dotted #DDDDDD;
}
.right
{
float: right;
width: 50%;
text-align: right;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:red;
padding-bottom:5px;
border-bottom:1px dotted #DDDDDD;
}

//////then your html

<h2 class="left">text on the left</h2>
<h2 class="right">text on the right</h2>

 

Maybe the code above would work for you.

[webdevpro]

Hey, just tested out the code I presented in Firefox 4.  Didn't quite work. Required setting margin and padding to 0 for both left and right class as below.  Seems to work.

 

 

 

 

 

 

 

.left {
margin: 0;
padding: 0;
float: left;
width: 50%;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#2858A6;
padding-bottom:5px;
border-bottom:1px dotted #DDDDDD;
}
.right
{
margin: 0;
padding: 0;
float: right;
width: 50%;
text-align: right;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:red;
padding-bottom:5px;
border-bottom:1px dotted #DDDDDD;
}

//////then your html

<h2 class="left">text on the left</h2>
<h2 class="right">text on the right</h2>

 

[cssfreakie]

Your require the float property. for this. If you need hep with it after you tried let me know.

[Eiolon]

thanks, worked light a charm.