HTML CSS horizontal align problem

redeye_uk

redeye_uk

redeye_uk

Associate
Joined
1 May 2007
Posts
1,901
Location
London
Scratching my head a little on this one. Should be a fairly basic, but just dont seem to be able to get it working.

I have the following

Code: 
<div id="wrapper">
    <div id="header">
        <ul>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
        </ul>
    </div>
</div>

header has margin: 0 auto; width: 500px; which horizontally aligns fine. The problem comes with the content in the <ul>; its dynamic and sometimes items are hidden [display:none;]. This gives the visual appearance that the content isn't horizontally aligned. Obviously the problem is with the width:500px.

I just cant see a good alternative other than either using javascript to dynamically set the width of the header when items are hidden or by having various CSS classes for the various widths.

I guess the question is, how would you do this?
 
Thats the exact problem; the alignment stays the same.

Its a TV app so I cant link to a site. But imagine the following...

----------[<li><li><li><li><li>]----------

if i then hide the first <li>

----------[--<li><li><li><li>]----------

header is still horizontally aligned, but visually the content doesnt look centered because of the fixed width.

Does that make a little more sense?
 
gord said:
Ah so your list elements are also horizontally aligned? Like buttons? You using inline-blocks for them?
Click to expand...

The <li> are all floated left and have fixed widths.

gord said:
But, if you use display:none on the first list element the others shouldn't remain where they are, they should move left to fill the space.
Click to expand...

True, but the problem stays the same.

----------[<li><li><li><li>---]----------

There will always be white space in the header because of its fixed width. I would need to dynamically change this width based on the visible content inside. I was just curious whether there was a way of doing this without using javascript or multiple css classes.
 
You must log in or register to reply here.
Back
Top Bottom