Home/ Questions/Q 8536773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:44:45+00:00

I am having a very weird html problem. My main menu is not in

  • 0

I am having a very weird html problem. My main menu is not in its place.

<html>
  <head>
    <link rel="stylesheet" href="style5.css" type="text/css">
  </head>
  <body>
  <div id="outer">
    <ul>
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">content</a></li>
      <li><a href="#">search</a></li>
      <li><a href="#">more</a></li>
    </ul>
    <div id="clear"></div>
  </div>

  <div id="wrapper">
    <div id="pic">
      <img src="logo.png">
      <div id="content">
        <p> Secure Search </p>
      </div>
    </div>

    <div id="forms">
      <form>
        <input type="text" name="submit" size="78" style="font-size:20pt;"/>
      </form>
    </div>
  </div>

  </body>
</html>

and here’s the css

body {
  margin: 0;
  padding: 0;
  background-color: white;
}

h1,h2,h3 {
  margin: 0;
  padding: 0;
}

p,ul,ol,li {
  margin: 0;
  padding: 0;
}

#outer {
  background-color: rgb(67,68,71);
}

#outer ul {
  list-style: none;
  margin-left: 5px;
  border-left: 1px solid;
}

#outer li {
  float: left;
}

.current {
  background-color: rgb(56,63,137);
}

#outer a {
  width: 90px;
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  color: white;
  border-right: 1px solid;
  padding: 5px;
}

#outer a:hover {
  color: black;
  background-color: white;
}

#outer .current a:hover {
  color: white;
  background-color: inherit;
}

#clear {
  clear: both;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
}

#pic {
  margin-top: 100px;
  margin-left: 389px;
  position: relative;
}

#content {
  position: absolute;
  top: 60px;
  left: 90px;
}

#forms {
  margin-top: 50px;
}

Now you may ask that how come i didn’t noticed my menu not in placing during early stages of coding. Well the thing is that i was using borders on wrapper div during coding and everything was in place however as soon as i removed the border the whole thing fell apart.

I think it has something to do with the float not being cleared correctly resulting in pic div messing everything up. I would be really appreciative for your suggestions.

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know what you mean by “not in its place”, but removing a border suggest you have a problem with collapsing margins.

    If that’s the case, you could solve it by adding overflow: auto or padding: 1px 0 to the rule where you removed the border.

    • 0