Movement occurring outside the boundaries of the element

Whenever I hover over the hyperlink, it extends beyond the text of the link.

Check out the jsFiddle demonstration: jsFiddle

It seems like it is taking the width of the <div>, causing it to be displayed across the entire <div>.

Below is the HTML code (using foundation):

<div class="container row">
    <a href="#">
        <div id="logo" class="large-3 columns">
            <span>My Bank ,too Big</span>
        </div>
    </a>
</div>

How can I fix this issue without modifying the foundation classes? Could it be related to the <span> element?

I attempted to reduce the width of the <span>, but the behavior remained unchanged.

csszurb-foundation

Answer №1

One issue is that the div is nested within an a tag, causing layout problems. By default, all div tags are block elements and take up the full width, while a tags are inline and only take up as much space as needed. To fix this, simply move the a tag inside the div, as shown below:

.row.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}
.row.container {
  position: relative;
}
.row.container:after,
.row.container:before {
  content: " ";
  display: table;
}
.large-3 {
  width: 25%;
}
#logo {
  margin: 46px 0 0;
  padding: 0 0 46px;
}
<div class="container row">
  <div id="logo" class="large-3 columns">
    <a href="#">
      <span>My Bank ,too Big</span>
    </a>
  </div>
</div>

Answer №2

To ensure the entire clickable area is preserved within the #logo rule, simply add the following code:

#logo {
  display: inline-block;
  width: auto;
}

This will maintain the entire <div> element as the clickable region, rather than just the <span>, while also keeping the width of the <div> consistent with the text.

You can test out the code snippet below:

.row.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}
.row.container {
  position: relative;
}
.row.container:after,
.row.container:before {
  content: " ";
  display: table;
}
.large-3 {
  width: 25%;
}
#logo {
  margin: 46px 0 0;
  padding: 0 0 46px;
  background: lightgreen;
  display: inline-block;
  width: auto;
}
<div class="container row">
  <a href="#">
    <div id="logo" class="large-3 columns">
      <span>My Bank ,too Big</span>
    </div>
  </a>
</div>

Answer №3

To adjust the width of #logo, you can set it to auto and then change the anchor to inline-block.

Another option is to set #logo to either display: inline-block or inline. The issue arises when a block element like <div> is placed inside an inline element such as <a>.

.row.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}
.row.container {
  position: relative;
}
row.container:after,
.row.container:before {
  content: " ";
  display: table;
}
.large-3 {
  width: 25%;
}
header #logo {
  margin: 46px 0 0;
  padding: 0 0 46px;
}
#logo {
  width: auto;
}
.row.container a {
  display: inline-block;
}
<div class="container row">
  <a href="#">
    <div id="logo" class="large-3 columns">
      <span>My Bank ,too Big</span>
    </div>
  </a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best way to align grid items that are positioned next to each other in CSS Grid?

I'm having trouble aligning two grid elements next to each other. What I want is for the heading, paragraph, and bottom links to be in one grid element and the image to be in another. When I tried using grid-template-columns: 1fr 2fr;, one element got ...

htmlcsscss-grid

Decrease the font size of text using intervals in CSS

I'm facing a challenge where I need to decrease the font size by 10% every 2 seconds. <div class="shrink"> text </div> .shrink{ transition: 2s linear all; font-size : 20px; } Is there a way to achieve this using only CSS? ...

css

Tap and conceal feature on a mobile website

I seem to be facing a JavaScript challenge. On the desktop version of my website, I've managed to create a functionality where hovering over a button reveals some text, and clicking anywhere else on the site hides the text. However, I'm now stru ...

javascriptjquerycss

elements positioned next to each other

I currently have two nested divs like this: <div id="header"> <div id="logo"></div> <div id="header_r"></div> </div> The corresponding CSS styles are as follows: #header{ border: ...

css

What is causing the additional space at the bottom?

Why does my centered black border triangle have an extra bottom margin causing a scroll bar to appear? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; background: blue; } .canvas { border: 10px s ...

csslayoutscreenpaddingmargin

My goal is to create collapsible and expandable rows within this table

Discover the code snippet here, without pasting the entire content... As an illustration, let's utilize this example: <head> </head> <body> <table> <tr> <th></th> < ...

htmlcsshtml-table

Styling the Sidebar with a Tucked-In Header Ribbon in CSS

There are numerous methods to achieve this desired effect: I initially used a table to achieve this, but I have now chosen against using tables for that purpose. What is the most effective way to accomplish this while maintaining a right border? ...

htmlcss

Switch from flexbox layout to begin on the next column within the same row

I am attempting to create a CSS layout where, after a specific element like :nth-child(6), the elements will break and form a separate column within the same row. The parent element should split into 2 columns after every 6th element in the same row, then ...

htmlcssangular

What is the best way to align headings directly above their own bottom border?

Is there a way to make a heading align perfectly with its bottom border? Can negative padding achieve this effect, or should I use underline instead? Perhaps positioning it at the top border of the element below is an option. Thank you! h1 { font: bol ...

htmlcss

The alternative text for the oversized image exceeds the boundaries

After setting the width and height for an image, along with testing overflow:hidden, I've encountered an issue where the alt text for a broken image overflows the bounds of the image and the image size is lost. How can I contain the alt text within th ...

htmlcss

The left and right DIVs are not automatically adjusting to the height of the container

I am currently working on a grid layout consisting of 9 div tags, creating 3 rows with 3 divs in each row. Within this grid, each div is supposed to have a background image, except for the second div in the second row. My main challenge lies in getting th ...

css

Tips for aligning a row with both text and input fields in the center

I'm working on a design that includes text and input fields in rows, and I want everything to be centered. Should I wrap all the content in a div and center it as a whole, or should I center each row individually? Any suggestions? Here is the code sn ...

htmlcss

CSS - How to specify a class within an id using syntax

How can I target a specific tag within an ID using the class name in selector syntax? For example, how can I make the inner "li" turn red in the code snippet below? <html> <head> <style type="text/css"> #navigation li ...

csscss-selectors

Customizing CSS by replacing link file styles with code in the HEAD section

UPDATE: After further examination, it appears that the code is functioning correctly. My apologies for any confusion. I am attempting to override certain CSS rules on specific pages. Below is an example of my approach. Can anyone confirm if this is a vali ...

htmlcss

Align Text Center inside a Magical H1 Heading Tag

I'm having a bit of trouble with something that should be simple. I want to center the text inside my h1 tag on a wizard, and I've added this CSS to my stylesheet.css: .h1textalign { text-align:center; } Here's how I'm trying to apply ...

htmlcssasp.nettext-align

Safari Glitch in Bootstrap 4

For a simplified version, you can check it out here: https://jsfiddle.net/dkmsuhL3/ <html xmlns="http://www.w3.org/1999/xhtml"> <title>Testing Bootstrap Bug</title> <!-- Bootstrap V4 --> <link rel="stylesheet" href="https://m ...

javascripthtmlcsstwitter-bootstrapsafari

Are there any methods to create a circular z-index?

Is there a way in CSS to arrange #element-one above #element-two, then #element-two above #element-three, and finally #element-three above #element-one? Are there alternative methods to achieve this layout? ...

css

Gap in footer spacing on Internet Explorer is significantly large

The layout of the page is split into two main sections: A large header that takes up 100% of the browser height The main content area and footer When viewing the page in a browser, only one of these sections will be visible. The following code works wel ...

jqueryhtmlcssinternet-explorerfooter

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...

javascriptcssreactjsapexcharts

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Issue: Firefox is not registering the first click event when a textarea has the following CSS: textarea:focus { resize: vertical; } Check out the demo: http://jsbin.com/wuxomaneba/edit?html,css,output The fix for this problem is straightforward - ju ...

javascriptcssfirefox