What could be the reason behind these links not affecting the height of my div element?

I am having trouble with the links not changing the height of the "holder" element. I can't seem to figure out what is going wrong.

HTML:

<div id="holder">
<a class="button" href="#"><span>home</span></a>
<a class="button" href="#"><span>example</span></a>
<a class="button" href="#"><span>another example</span></a>
<a class="button" href="#"><span>hello</span></a>
<a class="button" href="#"><span>abc</span></a>
</div>

CSS:

*{
margin:0;
padding:0;
}
#holder{
width:100%;
background:#000;
border:1px solid red;
}
.button {
color:#444;
display:block;
float:left;
height:24px;
margin-right:6px;
padding-right:18px;
}
.button span {
display:block;
line-height:14px;
padding:5px 0 5px 18px;
}
.button:hover {
background:#333 url('./images/bg_button_a.jpg') no-repeat scroll top right;
outline:none;
}

.button:hover span {
background:#333 url('./images/bg_button_span.jpg') no-repeat;
}
htmlcss

Answer №1

Elements with floated descendents will not automatically expand to contain them.

To solve this issue, one solution is to add overflow: hidden, which acts as a type of clearfix. However, keep in mind that elements may be clipped at the element's bounding box if you use this method.

#holder {
   overflow: hidden;
}

For more information, check out Further Reading.

Answer №2

One of the reasons for this behavior is that the subelements are set to float:left, which prevents them from expanding the dimensions of their parent container. A simple solution is to add 

 <div style="clear:both;"></div>

at the end of the child elements. For example:

<div id="holder">
    <a class="button" href="#"><span>home</span></a>
    <a class="button" href="#"><span>example</span></a>
    <a class="button" href="#"><span>another examp.</span></a>
    <a class="button" href="#"><span>hello</span></a>
    <a class="button" href="#"><span>abc</span></a>
    <div style="clear:both;"></div>
</div>

Answer №3

Be cautious when opening a span but closing with a li tag, it may lead to some issues.

<a class="button" href="#"><span>hello</li></a>

Answer №4

When elements are floated, they do not affect the height of their container. In reality, they appear to be at the top of the container visually.

To ensure that the container expands and contains the floated elements, you can insert a div with clear:left at the bottom of the container.

Answer №5

When it comes to floated elements, they don't contribute to their parent's height.
An effective way to solve this issue is by applying overflow: hidden; on the #holder.

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

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...

javascriptjquerycssanimationvelocity.js

How to apply background-color to a div element with ng-repeat directive?

Hey there, I'm dealing with the following code: angular.module("myApp", []).controller("myController", function($scope) { $scope.boxList = [{ color: 'red' }, { color: '#F8F8F8' }, { color: 'rgb(50, 77, 32) ...

htmlcssangularjs

Encountering a CSS issue during the edit process with PHP and JavaScript

I'm encountering an issue when clicking on the edit button, as my data fetched from the DB should be displayed inside a text field. However, I'm facing a CSS-related error: Uncaught TypeError: Cannot read property 'style' of null Belo ...

javascriptphpcss

Execute the function once the audio has finished loading

I need help running a function once an audio file has finished downloading. This is my JavaScript code: // https://freesound.org/people/jefftbyrd/sounds/486445/ var audioFile = "https://raw.githubusercontent.com/hitoribot/my-room/master/audio/test/test.m ...

javascripthtmlhtml5-audio

What could be causing my ng-grid footer to refuse to align with the bottom border?

Currently utilizing ng-grid and various AngularJS UI Bootstrap components on my website, I have encountered a recurring issue. By diligently investigating, I have successfully replicated the problem. Access the Plunker demonstration through this link. The ...

javascripthtmlangularjsangular-ui-bootstrapng-grid

Designing a sleek border for form input fields

Seeking assistance in finding a solution as my extensive online search has been unsuccessful. Currently, I have this code to style my form labels: label { display:inline-block; height: 15px; width: 350px; float: left; padding: 5px; ...

css

Creating a Sticky Header and Footer with Responsive Design: Ensuring Content Div Expansion between Them

Greetings. I am working on creating a simple responsive HTML layout as described below: HTML: <div id="header"></div> <div id="content"></div> <div id="footer"></div> CSS: #header{ wi ...

htmlcssresponsive-design

Compatible with pure vanilla JavaScript, but not jQuery

I am currently facing an issue with attaching VKI (Virtual Keyboard Interface) to an element that is dynamically added to the DOM using JavaScript. The scenario involves a table with initially only one row, along with "Add Row" and "Delete Row" functionali ...

javascriptjqueryhtml

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue. Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly. The application consists of 2 files: 1) index.htm: <!DOCTYPE htm ...

javascripthtmlangularjsangularjs-scope

Having trouble getting Tinymce to appear on the screen

I am currently attempting to install TinyMCE for use with my text editor in order to provide the user with a text box similar to the one on Stack Overflow. However, I am encountering an issue where it is not displaying as expected. In the header of my ind ...

htmlcsstypescripttinymceangular5

Tips for getting the DIV:hover effect to work in Internet Explorer 8

Can someone provide me with the steps to get DIV:Hover functioning in Internet Explorer 8? ...

htmlcss

What is the best way to ensure that the table header is printed on every page when printing?

My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...

javascriptphpjqueryhtmlcss

Ensuring that links are functional across all directory levels: a comprehensive guide

Looking at the image included here, you can see a preview of the website I'm currently building. The plan is to have individual pages for each machine in the company's lineup. Since the navigation bar and menu will be consistent across the entire ...

phphtmlcsstwitter-bootstraphref

How to Align a Footer to the Bottom of the Page using Bootstrap 5

My issue arises when using a dark background footer, as some pages lack enough content to fill the entire browser's viewport. Consequently, an unsightly white band appears below it. How can I ensure the footer reaches the bottom of the viewport on pa ...

htmlcssbootstrap-5

Tips for effectively deleting a flash object from an HTML page

I recently created a website with AJAX (using jquery) for navigation purposes. The pages on the site slide smoothly, and I have been using remove() to get rid of the old page. Everything was working fine until I encountered an issue where the browser cras ...

jqueryhtmlflashcrash

What is the purpose of utilizing jQuery for retrieving CSS resources?

Upon reviewing the Chrome Dev Tools screenshot, I am puzzled by the fact that my CSS assets are being fetched by jQuery. The CSS sheet is included in the normal way, using a <link rel="stylesheet"> tag in the <head> section, while jQu ...

jquerycssgoogle-chrome-devtools

Using BeautifulSoup to Retrieve JPEG from an Image Tag's Src Attribute

Struggling with scraping this webpage for personal use. I am having trouble extracting the thumbnails of each item on the page. Despite being able to see image tags containing the required .jpgs when using "inspect" to view the html DOM, I cannot find the ...

javascriptpythonhtmlweb-scrapingbeautifulsoup

Error encountered when attempting to generate a hyperlink

Whenever I try to assign hyperlinks to each image name, I keep encountering an undefined imgitem error in the hyperlink(s). Could it be that I am incorrectly placing the <a> tags? echo '<td width="11%" class="imagetd">'; if (empty($a ...

phphtml

The chosenValues.filter method hit an unexpected token; a comma was anticipated

I have encountered a syntax error in the following line: queryComponents: prevState.seletedValues.filter((a, i) => (i !== index)); I am attempting to swap out splice with filter. I've attempted modifying brackets, both adding and removing them, b ...

javascripthtmlreactjsreduxmaterial-ui

Aligning divs, prevent duplicate HTML within multiple divs

Currently, I am attempting to troubleshoot a jsfiddle issue. The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the ...

javascriptjqueryhtmlcss