Getting DIV content to left left.

[Chunkee]

Sorry for the weird title. Should have been left align.
For some reason I cannot get the contents of a DIV to left align. I have tried everything from justifying, aligning, padding and margins. Listed below is what I have for the div and title class.

div.note
{
border: 1px dashed #ff8c00;
mc-auto-number-class: noteTitle;
mc-auto-number-format: 'Note';
font: normal 10pt verdana;
margin-top: 10px;
padding-left: 4px;
padding-right: 4px;
padding-top: 6px;
padding-bottom: 4px;
}

span.noteTitle
{
color: #ff8c00;
background-color: #ffffff;
position: relative;
top: -14px;
margin-left: 9px;
padding-left: 4px;
padding-right: 4px;
}

Here is the result I am getting.

http://i49.photobucket.com/albums/f286/jcoria/divnotleftaligningcontent.png

Here is the source code for the element in the page.

<h2>More Information</h2>
<div class="note" MadCap:autonum="Note"><span class="autonumber"><span class="noteTitle">Note</span></span>Topics may contain a 'More Information' control. They are interactive and provide information for Related Tasks, Reference Information, etc. Some systems may contain custom groups of related information such as configuration elements. The More Information control functions the same as the Drop Down Text listed above.</div>

I am using an XML HAT, MadCap Flare.

Any suggestions would be greatly appreciated.

Thanks

 

[ivan2]

try to put a clear:right on the span

 

[Chunkee]

try to put a clear:right on the span

Thanks Ivan for the suggestion.

span.noteTitle
{
color: #ff8c00;
background-color: #ffffff;
position: relative;
top: -14px;
margin-left: 9px;
padding-left: 4px;
padding-right: 4px;
clear:right;
}

it does not work...

Not certain why. I am seeing it even as I type this in the Post Icons below this form..dont know why i cannot get it to work.

 

[Aluvus]

You could perhaps replace the span with a floated-left div. The span is an inline element, which is (part of) why it is pushing the text over to the right.

Or use a fieldset instead, which I suppose is a slight hack.

 

[Tweak155]

Looks like Note is pushing it to the right. Maybe pop a <br /> after note and see if the text aligns ok then figure it out from there.

 

[Kr@n]

Your CSS rule "position: relative; top: -14px;" displace the span 14px upward, but as the "position: relative;" spec says, the browser renders content as if the span was still there.

You should use "position: relative;" on the containing div (to make sure subsequent absolute positioning is done relative to that bounding box), and place your span with "position: absolute;" and according coordinates. The "position: absolute;" CSS rule indeed removes the box from the flow, and the content is displayed as if the box wasn't here ...

All that said, I would still use a fieldset : this tag is exactly what you need, and has a sementical meaning (which means it has a specific "rendering" in oral browsers, accessibility properties, compatibility with older browsers, etc.)