list based horizontal nav 1

[jimmyshoes]

I'm experimenting with list based navigation
I want to use a list to generate the following

1 2 3

I am using the following code

<style>
ul li{list-style:none;display:block;padding:10px;float:left}
</style>
<div style="border:1px solid #ffffff">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

The problem is that the float:left is for some reason causing the list to be rendered below the surrounding bordered div

Why is this?

 

[feherke]

Hi

Get the clearfix CSS class from the How To Clear Floats Without Structural Markup article and apply it to the [tt]ul[/tt] tag.

Feherke.

http://free.rootshell.be/~feherke/

 

[feherke]

Hi

Oops, missed your question.

Why is this?

The contents of floats are stacked as if floats generated new stacking contexts, except that any positioned elements and elements that actually create new stacking contexts take part in the float's parent stacking context. A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.

In CSS 2.1 | Visual formatting model | Floats see the illustration below the quoted paragraph. Your [tt]div[/tt] is like their first [tt]p[/tt], but your has no visible un-floated content, so it collapses around the [tt]ul[/tt], which by itself has only its [tt]margin[/tt]s.

Feherke.

http://free.rootshell.be/~feherke/

 

[jimmyshoes]

I have applied the fix as follows

<style>
ul li{list-style:none;display:block;padding:15px;float:left;}
</style>
<div style="border:1px solid #ffffff">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div style="clear:both"></div>
</div>

The problem now is that the padding is uneven (there is more at the top)

Is there a fix to this?

 

[feherke]

Hi

That looks like in case of applying clearfix on the outer [tt]div[/tt]. That is why I suggested to use clearfix on the [tt]ul[/tt].

Going forward with your latest code, I would just remove the [tt]ul[/tt]'s [tt]margin[/tt]'s so it can pass "invisible" :

ul [teal]{[/teal] [blue]margin:[/blue] [green]0[/green]; [teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[jimmyshoes]

That's fixed it!

<style>
ul { margin: 0; }
ul li{list-style:none;display:block;padding:15px;float:left;}
</style>
<div style="border:1px solid #ffffff">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div style="clear:both"></div>
</div>

 

[jimmyshoes]

To add a footnote, my understanding of this problem is as follows:

a floated element is taken out of the normal flow of the page
So you need to add an empty div below your floated divs
The container div will then stretch to accomodate this empty div

 

[Vragabond]

Here's a little more reading material, to familiarize yourself with the issue (and possible solutions):

http://www.quirksmode.org/css/clearing.html

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]