Question

I’m still new to CSS but I’ve been trying to find the answer to this problem for a couple of days now and I just cannot hit on the right site or search phrase to uncover the information. Or I am just not getting what I’m reading.

What I want is to have like a title bar across the top of the DIV. I’ll have some elements that are children to this DIV and then one or more DIVs .insertAfter’d each other. These title bar DIVs will also be used to collapse and expand to hide and show their children if that makes any difference.

How would I do that with a CSS class? Like class=”titleDiv” then

.titleDiv {
text: left align;
span: right align;
}

<div>Title Text Left Aligned  <span>Item Count Right Aligned</span>
  <element></element>
  <element></element>
  <element></element>
</div>
<div>Title Text Left Aligned  <span>Item Count Right Aligned</span>
  <element></element>
  <element></element>
  <element></element>
</div>
<div>Title Text Left Aligned  <span>Item Count Right Aligned</span>
  <element></element>
  <element></element>
  <element></element>
</div>

Answer 1

Are <element></element> part of the title bar or of the to-be-expanded window?

I think you should a DIV for each whole window and separate DIV‘s for the title and content. If the right-aligned elements in the title are the least noted, a float: right; for the SPAN might be sufficient.

<div class="window">
    <div class="title_bar">
        <!-- left aligned title bar elements -->
        <span style="float: right;">
            <!-- item count -->
        </span>
    </div>
    <div class="window_content">
        <!-- window-contents -->
    </div>
</div>

Otherwise, you may give a position: relative; (without top or any other distance given) to the title-bar-element. Then you are able to position the SPAN absolutely (using position: absolute; right: 0; top: 0;).