Member Avatar for garyjohnson

Hello, I have a few links that I have given a relative position. They have the widths set to 200px, however they do not follow this at all and only have the width wrap around text. When they had the position of float, they followed the width rule of 200px. I have no idea why they are not following the width rule, here is the CSS

ul a{
  background:rgba(0,0,0,.4);
  font-size: 15px;
  position:relative;
  height:50px;
  left:0px;
  color:#FFFFFF;
  width:200px;
  padding:2px;
  margin:0px;
  padding-right:15px;
  padding-left:20px;
  margin-left:-40px;
  font-family:"Arial Black", Gadget, sans-serif;
  text-decoration: none;
  text-shadow: 3px 3px 3px #333;
}

Thanks for looking!

This is the HTML

<ul>
    <li><a href="#" id="toggle1" class="slide_links">Contact Us</a></li>
    <li><a href="contact.asp" id="toggle2" class="slide_links">Parts Inventory</a></li>
    <li><a href="about.asp" id="toggle3" class="slide_links">Boats For Sale</a></li>
    <li><a href="about.asp" id="toggle4" class="slide_links">Marine Services</a></li>
    </ul>
  • 2 Contributors
  • 1 Reply
  • 250 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by nauticalmac

Dani AI

Generated

Short answer: the anchor is an inline element, so width and height are ignored. Floating it earlier made it behave like a block (so the 200px worked). Position: relative does not change an element’s display mode, it only affects offsetting — which is why the width appears to “vanish.”

’s idea of moving the sizing to the block-level parent (the LI) is a good, simple fix. An alternative is to make the link itself a block-level box so it becomes the full clickable area and obeys width/height. Example for the link-based approach:

.slide_links {
  display: block;
  width: 200px;
  height: 50px;
  box-sizing: border-box; /* include padding inside the 200px */
  padding: 0 20px;
  line-height: 50px; /* quick vertical centering for single-line text */
}

A modern option is flexbox on the link to handle vertical centering and longer content without hacks:

ul { list-style: none; margin: 0; padding: 0; }
.slide_links {
  display: flex;
  align-items: center;
  width: 200px;
  height: 50px;
  box-sizing: border-box;
  padding: 0 16px;
}

Troubleshooting checklist: inspect the computed display and width in developer tools, remove default UL padding/margins when necessary, beware negative margin-left which can visually hide or overlap boxes, and use box-sizing: border-box if padding should be inside the width. For animations prefer transform: translateX(...) over adjusting margins for smoother, GPU-accelerated motion. These notes complement ’s reply and explain why the float->relative change changed the behavior.

Member Avatar for nauticalmac

Apply the width and positioning to a block level tag (e.g. li) instead of inline (a)
Without knowing what the other constraints of layout are (menu animation?), here's a place to start from.

ul li {
  background:rgba(0,0,0,.4);
  position:relative;
  height:50px;
  left:0px;
  width:200px;
  padding:2px;
  margin:0px;
  margin-left:-40px;
}
ul li a {
  font-size: 15px;
  color:#FFFFFF;
  padding:2px;
  margin:0px;
  padding-right:15px;
  padding-left:20px;
  font-family:"Arial Black", Gadget, sans-serif;
  text-decoration: none;
  text-shadow: 3px 3px 3px #333;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.