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

Here is my markup and styling. This is just for testing and learning how float works.
If I run this code in a browser my horizontel navigation is not within the red background.

So what I don't understand is that a solution to get my horizontel navigation within the red background is to add this style to float:left; to #nav a declaration so I get this complete styling for #nav a

#nav a
{
      float:left;
      margin:0;
      padding:40px 40px;
      color:#333;
      text-decoration:none;
      border:1px solid #9B8748;
      border-bottom:none;
      background:blue;
      background:#F9E9A9;
 }

Can somebody why that is a solution.

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
 
       body
       {
          font-family:Arial, sans-serif;
          font-size:small;
          width:720px;
          margin:0;
          padding:0;
       }
 
 
        #nav
       {
          float:left;
           width:100%;
           margin:0;
           padding:10px 0 0 46px;
           list-style:none;
           background:red;
       }
 
       #nav li
       {
          float:left;
          margin:0 8px 0 0;
          padding:0;
          font-family:"Lucida Grande", "sans-serif";
          font-size:80%;
       }
 
 
       #nav a
       {
        /*  float:left;*/
           margin:0;
           padding:40px 40px;
           color:#333;
           text-decoration:none;
           border:1px solid #9B8748;
           border-bottom:none;
           background:blue;
           background:#F9E9A9;
       }
 
 
       #nav a:hover
       {
           color:#333;
           padding-bottom:5px;
           border-color:#727377;
           background:#fff;
       }
 
   </style>
 
	<meta charset="utf-8" />
	<title>Chapter 3</title>
</head>
<body>
	<ul id="nav">
      <li id="t-intro"><a href="/">Introduction</a></li>
      <li id="t-about"><a href="about.html">About Lance</a></li>
      <li id="t-news"><a href="news.html">News &amp; Events</a></li>
      <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li>
    </ul> 
</body>
</html>

//Tony

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

List-items usually display

List-items usually display each on a separate line, vertically.
Adding float: left or changing the display value to inline or inline-block will cause them to display across the page, horizontally.

Tojo
Tojo's picture
Offline
Regular
Last seen: 6 years 18 weeks ago
Timezone: GMT+1
Joined: 2011-10-21
Posts: 44
Points: 76

why do I need the float : left in #nav a

Can you explain why I need the float:left do keep my tab within the red
background ?

//Tony

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

See Enclosing float

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.