# Quick DIV alignment question - for putting a "\<remaining ses

**URL:** <https://www.ruby-forum.com/t/quick-div-alignment-question-for-putting-a-remaining-ses/77301>\
**Category:** Rails\
**Created:** [November 26, 2006, 1:28pm UTC](https://www.ruby-forum.com/t/quick-div-alignment-question-for-putting-a-remaining-ses/77301 "2006-11-26T13:28:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![greg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/71c47a/32.png) [@greg](https://www.ruby-forum.com/u/greg)\
**Post date:** [November 26, 2006, 1:28pm UTC](https://www.ruby-forum.com/t/quick-div-alignment-question-for-putting-a-remaining-ses/77301/1 "2006-11-26T13:28:42Z")

</div>

Hi,

Can anyone suggest how to get a simple horizontal alignment of DIVs in  
my  
header?

- horizontally align DIVs which will contain text so that they are  
seemless
- output would be " session remaining time = 22 seconds |  
anonymous | login | register"
- div view would be 

The problem I’m having is working out how to float/align these so that  
they  
are:

- overall centered in the header
- bumped up one another so it looks like they are just one text sentence

I thought of returning the whole text from the AJAX updates however  
because  
I have other items horizontally within that header strip I wanted to  
work  
out how to just get one piece of the header strip to be a DIV so that I  
can  
target this for the AJAX updates.

Thanks in advance  
Greg

---

<div class="post-metadata">

**Author:** ![greg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/71c47a/32.png) [@greg](https://www.ruby-forum.com/u/greg)\
**Post date:** [November 26, 2006, 2:53pm UTC](https://www.ruby-forum.com/t/quick-div-alignment-question-for-putting-a-remaining-ses/77301/2 "2006-11-26T14:53:06Z")

</div>

Greg H. wrote:

> Hi,
> 
> Can anyone suggest how to get a simple horizontal alignment of DIVs in  
> my  
> header?
> 
> - horizontally align DIVs which will contain text so that they are  
> seemless
> - output would be " session remaining time = 22 seconds |  
> anonymous | login | register"
> - div view would be 
> 
> The problem I’m having is working out how to float/align these so that  
> they  
> are:
> 
> - overall centered in the header
> - bumped up one another so it looks like they are just one text sentence  
> […]

How about s of text?

---

<div class="post-metadata">

**Author:** ![greg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/71c47a/32.png) [@greg](https://www.ruby-forum.com/u/greg)\
**Post date:** [November 26, 2006, 4:22pm UTC](https://www.ruby-forum.com/t/quick-div-alignment-question-for-putting-a-remaining-ses/77301/3 "2006-11-26T16:22:52Z")

</div>

Probably better off using a list.

> **[CSS Design: Taming Lists](https://alistapart.com/article/taminglists/)**
>
> Do you crave the disciplined order of proper (X)HTML lists but long for control over their presentation? You can put a stop to their wild ways and bad behavior. Mark Newhouse shows you how to tame …

Good article there that will get you what you want and degrades nicely  
in  
older browsers.

Curtis

---

<div class="post-metadata">

**Author:** ![greg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/71c47a/32.png) [@greg](https://www.ruby-forum.com/u/greg)\
**Post date:** [November 26, 2006, 10:51pm UTC](https://www.ruby-forum.com/t/quick-div-alignment-question-for-putting-a-remaining-ses/77301/4 "2006-11-26T22:51:49Z")

</div>

thanks Curtis - I’ll try to digest this today 🙂 [I probably need to buy a good CSS reference book too]

---

<div class="post-metadata">

**Author:** ![greg](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/71c47a/32.png) [@greg](https://www.ruby-forum.com/u/greg)\
**Post date:** [November 26, 2006, 2:59pm UTC](https://www.ruby-forum.com/t/quick-div-alignment-question-for-putting-a-remaining-ses/77301/5 "2006-11-26T14:59:04Z")

</div>

> > The problem I’m having is working out how to float/align these so that  
> > they  
> > are:
> > 
> > - overall centered in the header
> > - bumped up one another so it looks like they are just one text sentence  
> > […]
> 
> How about s of text?

Semantically it seems you are making a list. Try

 with a - for  
each item. Then make each li float and center the ul.

This is OT for this list. Try googling as there are many nav bar  
solutions and css sites.