incompatibility between html and css

Question

The following is my html code:

#logo {
  position: fixed;
  left: 400px;
  top: 20px;
}

#home-logo {
  position: fixed;
  left: 590px;
  top: 20px;
}

#main-menu {
  position: relative;
  left: 800px;
  top: 50px;
}

#main-menu a {
  display: inline;
  font-size: 20px;
  color: black;
  padding: 14px 13px;
  text-decoration: none;
}

#main-menu a:hover {
  background: #f8f8ff;
}

#dropbtn {
  position: absolute;
}

#clickable-button {
  position: relative;
  font-size: 20px;
  color: black;
  padding: 14px 13px;
  border: none;
  background-color: inherit;
}

#clickable-button:hover {
  background: #f8f8ff;
}

#dropdown-content {
  overflow: hidden;
  position: absolute;
  left: 88px;
  top: 50px;
  display: none;
  background-color: #f9f9f9;
}

#dropdown-content a {
  overflow: hidden;
  display: block;
  font-size: 20px;
  color: black;
  padding: 14px 13px;
  text-decoration: none;
  text-align: left;
}

#dropdown-content a:hover {
  background: #f8f8ff;
}

#dropbtn:hover #dropdown-content {
  display: block;
}

<body>
  <div id="logo">
    <a href="http://www.manchester.ac.uk/">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/en/7/72/UniOfManchesterLogo.svg" width="150" height="80" alt="University logo">
      </figure>
    </a>
  </div>
  <div id="home-logo">
    <a href="main.html">
      <figure>
        <img src="http://www.diywebsitetools.com/wp-content/uploads/2012/05/homeicon.jpg" class="img-rounded" width="120" height="70" alt="going back to the main page">
      </figure>
    </a>
  </div>
  <div id="main-menu">
    <a href="#Markup languages and scripting"> M&amp;S </a>
    <a href="#Health & saftely issues when working with computers"> Health&amp;Saftely </a>
    <div id="dropbtn">
      <button id="clickable-button">U&amp;C</button>
      <div id="dropdown-content">
        <a href="#1">Statistics and backgroud information</a>
        <a href="#2">Research groups / research projects</a>
        <a href="#3">Courses</a>
      </div>
    </div>
    <a href="#A group team page with information about each group member"> About us </a>
  </div>
</body>

when I run this program the U&C icon jumps to the next line,but I want to keep it between "health&saftely" and "about us" icons. I really appreciate if someone let me know about this glich.

Make a fiddle, is more readeable for us, and we can solved there. — Roy Bogado, Apr 03 '17 at 16:44
Please use the "edit snippet" link to edit the snippet to include a [mcve] to remove all of the extra code. Note that I replaced the `&` symbols in your text with the entity `&`, as that is valid HTML. Note that your `href` values are similarly invalid. — Heretic Monkey, Apr 03 '17 at 16:49

score 0 · Accepted Answer · edited May 23 '17 at 12:17

On the one hand, the div element is a block-level element by default. This means that it is positioned by default below the previous one (instead of at its side as you want).

On the other you are applying absolute positioning, which does not leave space for the element.

Change the #dropbtn element to a span (instead of div): <div id="dropbtn"> to <span id="dropbtn">

and remove the absolute positioning for it (delete CSS rule):

#dropbtn{
          position:absolute;
        }

Complete code in snippet below.

A brief explanation about the reasons why:

div/span

div is a block-level element, span is an inline element (by default, now their behaviour can be changed with the CSS display property). Neither of them has semantic meaning (unlike p (=paragraph), table (=table), ol/ul (=lists), etc.), they are just containers usually for presentation purposes.

An inline element occupies only the space bounded by the tags that define the inline element (https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements). Inline elements are usually positioned following the page flow: from left to right, top to down; one line is full before starting the next one.

Block-level elements occupy the entire space of its parent element (container), thereby creating a "block" (https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements) A block-level elements always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can) (https://www.w3schools.com/html/html_blocks.asp).

More info: What is the difference between HTML tags div and span?

CSS absolute positioning

The position CSS property chooses alternative rules for positioning elements. When assigned the absolute value, does not leave space for the element (among other things) (MDN: CSS position property). position : absolute also implies that the element is positioned relative to its first positioned (not static) ancestor element (w3schools: CSS position property)

static is the default value for HTML elements. This keyword lets the element use the normal behavior. That is, it is laid out in its current position in the flow. (MDN: CSS position property)

Application to your case:

In your case, you need your element be laid out in its "normal" position in the flow (between the two adjacent elements). It should not start in a new line (i.e. inline instead of block, which means span instead of div), and you need it to occupy its space normally (thus absolute positioning does not apply).

Complete code snippet

#logo{ position:fixed;
       left:400px;
       top:20px;
     }
#home-logo{ position:fixed;
            left:590px;
            top:20px;
          }
#main-menu {
              position:relative;
              left:800px;
              top:50px;
           }
#main-menu a{  
               display:inline;
               font-size:20px;
               color:black;
               padding:14px 13px; 
               text-decoration: none;
             }
#main-menu a:hover{
                    background:#f8f8ff;
                  }
/*#dropbtn{
          position:absolute;

        }*/

#clickable-button{
                   position:relative;
                   font-size:20px;
                   color:black;
                   padding:14px 13px; 
                   border:none;
                   background-color:inherit;
                 }

#clickable-button:hover{
                         background:#f8f8ff;
                       }  
#dropdown-content{
                   overflow:hidden;
                   position:absolute;
                   left:88px;
                   top:50px; 
                   display:none;
                   background-color: #f9f9f9;
                  }
#dropdown-content a{
                     overflow:hidden;
                     display:block;
                     font-size:20px;
                     color:black;
                     padding:14px 13px; 
                     text-decoration: none;
                     text-align:left;
                   }

#dropdown-content a:hover{
                           background:#f8f8ff;
                         }
#dropbtn:hover #dropdown-content{
                                  display:block;
}

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="design.css" media="all">
  <meta charset="UTF-8">
  <title>First website</title>
</head>
<body>
  <div id="logo">
    <a href="http://www.manchester.ac.uk/">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/en/7/72/UniOfManchesterLogo.svg" width="150"   height="80" alt="University logo" >
      </figure>
    </a>
  </div>
  <div id="home-logo">
    <a href="main.html">
      <figure>
        <img src="http://www.diywebsitetools.com/wp-content/uploads/2012/05/homeicon.jpg" class="img-rounded" width="120"   height="70" alt="going back to the main page">
      </figure>
    </a>
  </div>
  <div id="main-menu">
   <a href="#Markup languages and scripting"> M&S </a>
   <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
   <span id="dropbtn">
    <button id="clickable-button">U&C</button>
      <div id="dropdown-content">
        <a href="#1">Statistics and backgroud information</a>
        <a href="#2">Research groups / research projects</a>
        <a href="#3">Courses</a>
      </div>
   </span>
   <a href="#A group team page with information about each group member"> About us </a>
  </div>
</body>

Screenshot of result:

Could you please check the snippet I have just added? Let me know if it is what you are searching for... — airos, Apr 03 '17 at 17:35
Yes, it works. Thanks a billion. But some queries. Firs of all, what is the difference between span and div which using div caused an error. second of all, why the use of dropbtn{ position:absolute; } caused error. — user4353393, Apr 04 '17 at 11:02
I have added some explanations, let me know if it clearer. If you found my answer useful and solved your problem, please mark it as accepted so that the question appears as solved. — airos, Apr 04 '17 at 15:39

incompatibility between html and css

1 Answers1