3 replies [Last post]
Tojo
Tojo's picture
Offline
Regular
Last seen: 5 years 27 weeks ago
Timezone: GMT+1
Joined: 2011-10-21
Posts: 44
Points: 76

Hello!

If I display this markup in the browser as it is now I can see that my list is within the red box that I create in the style class wrapper.This is understandable.

If I now uncomment this line /*float:left;*/
in .nav li something strange happen.
What I don't understand is why is not the horizontel list within the red box any longer
The red box is now positioned above the horizontel list.
can somebody explain this ?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
 
    body
    {
        background-color:#fff;
        color:#000;
        margin:0;
        padding:0;
        font:0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdena ,Tahoma, sans-serif;
        background-image: url(brushed_alu.png);
    }
 
    .wrapper
    {
       width:50%;
       margin:5px;
       padding:0;
       border:2px solid red;
    }
 
   .nav
   {
       list-style: none;
       margin:5px;
       padding:0px;
   }
 
 
   .nav li
   {
     /*float:left;*/
      min-width:1em; 
      margin-right:1.0em;
      text-align:center;
   }
 
 
   .nav li a:link, .nav li a:visited
   {
       background-color:  Aqua;
       text-decoration :none;
       color : rgb(85,85,102);
       padding:0.5em;
       display:block;
       font-weight: bold;
       margin:  0 0 0.2em 0;
 
       -webkit-border-radius:3px;
       -moz-border-radius:3px;
        border-radius:3px;
 
       -webkit-box-shadow: 3px 3px 3px 3px rgba(43,43,77,0.5);
       -moz-box-shadow: 3px 3px 3px 3px rgba(43,43,77 ,0.5);
       box-shadow: 3px 3px 3px 3px rgba(43,43,77,0.5);
   }
 
   .nav li a:hover
   {
        background: rgba(255,255,255, 0.9); 
        color: rgb(43,43,77);
   }
 
 
 
</style>
    <title></title>
</head>
<body>
   <div class="wrapper">
      <ul class="nav">
         <li><a href="">Wine</a</li>
         <li><a href="">Fruit</a></li>
         <li><a href="">Spreads</a></li>
         <li><a href="">Biscuits</a></li>
      </ul>
 
   </div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Un-enclosed float elements

When you float the "li" elements, they are removed from the flow. It's as if the ul has no content, thus zero height. See Enclosing Float Elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

TJTojo
TJTojo's picture
Offline
newbie
Last seen: 8 years 4 weeks ago
Timezone: GMT+2
Joined: 2013-01-11
Posts: 9
Points: 16

I'm the same person that

I'm the same person that asked the question

Below is another test just to confirm what you said here.
When you float the "li" elements, they are removed from the flow. It's as if the ul has no content, thus zero height.

Here I use another inline element the span element.
I can see that the box in the styled class foo has just a straight line and the span element is displayed below just as you said.

Now to my question when I use float why is the container acting as if their was no contents ?
What is the reason for this ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
   span
   {
      float:left;
   }
 
   .foo
   {
       border:1px solid red;
   }
 
   </style>
    <title></title>
</head>
<body>
<div class="foo">
   <span>saab</span>
   <span>opel</span>
</div>
</body>
</html>

//mod edit: Use the 'code' button or the bbcode [code][/code] tags to mark source code. Fixed. ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Reread my link in my previous

Reread my link in my previous post, and read, reread, and read again ยง9 Visual formatting model. This is important stuff.

Now do this:

.foo {
  border:1px solid red;
  overflow: hidden;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.