Avoid allowing text to spill out of the designated container

Hey there, I've run into this issue twice now and I can't seem to find a solution for the second occurrence. The first time it happened with an image, I used max-height and width to prevent it from overflowing the div when zoomed in. But now, for the footer which contains links, none of the solutions seem to work.

I've experimented with position: absolute; and various other suggestions from Google, but after forty minutes of trying, I'm still stuck on this problem with no progress in sight.

#footer {
    padding-top: 0.5%;
    width: 98%;
    height: 9%;
    padding-left: 1%;
    padding-right: 1%;
    text-align: center;
    background-color: #00FF1E;
}
#footer li {
    max-width: 100%;
    max-height: 100%;
    display: inline;
    padding: 1%;
    background: #7e7e7e; /* Old browsers */
    background: -moz-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7e7e7e), color-stop(34%, #595959), color-stop(60%, #6d6d6d), color-stop(93%, #666666)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* IE10+ */
    background: linear-gradient(to bottom, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#666666', GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 30px;
    word-wrap: break-word;
}
#footer a { display: inline-block; }

HTML:

 <div id="footer">
    <ul>
    <li><a href="home.php" title="homepage"> Homepage </a></li>
    <li><a href="signin.php" title="signin"> Signin </a></li>
    <li><a href="playlist.php" title="playlist"> Playlist </a></li>
    <li><a href="settings.php" title="settings"> Settings </a></li>
    </ul>
 </div>

Answer №1

Here is an example to help you: See Demo

CSS:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

HTML:

<div id="footer" class="clearfix">...</div>

Resource for more information: Link to Article

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

Having a CSS position fixed within a div container with the same width as its parent container

At the moment, I have three sections: left, center, and right. I want to add a fixed position div (notification) inside the center section so that it remains in place when scrolling. Additionally, I want this notification to resize according to changes in ...

Designing a dynamic 1-3 column arrangement with Angular for animated content

Let's discuss the current setup: I am in the process of creating a webpage for an application that includes a navigation bar, a footer, and a 3-column body layout. Initially, only one column is visible. This primary column will contain interactive d ...

How do I ensure that my absolutely positioned element is centered in this specific scenario?

I've been working on centering an element within its parent container, and I'm having trouble ensuring it remains centered responsively. Here's what I have so far: HTML <div class="example"> <span class="element1">Element ...

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

I am having an issue with the bottom border starting from the extreme left of the page. I want it to start from the letter "T" in Tech instead. #page-container { width: 1250px; margin: 0 auto; } h2 { font-weight: normal; padding-left: 15px; ...

Highcharts: Show tooltip above all elements

Is there a way to configure tooltip display above all elements? I want to define specific coordinates so that the tooltip remains open even if it is covering the chart, and only closes when interacting with the top block. Screenshot 1 Screenshot 2 For e ...

Update Input field by eliminating white spaces using jQuery version 3.2.1

I am currently developing an HTML/PHP form for user registration. Using the code below, I have managed to prevent any blank spaces from appearing in the input field: <!DOCTYPE html> <html> <head> <script> function stripspaces( ...

Transform a series of images into a slider for compact devices

Looking to transform this row of images... I need to create a small carousel for displaying the images on mobile devices (Responsive Design) using bootstrap. Here is the code for the current arrangement of images: <div class="row d-flex justify-co ...

What setting should I adjust in order to modify the color in question?

Looking to Customize Radar Chart Highlighted Line Colors I am currently working on a Radar Chart and I am trying to figure out which property needs to be edited in order to change the color of the highlighted lines. I have already attempted to modify the ...

What is the best way to adjust a map to completely fill the screen?

I am experiencing an issue with my Openlayer map not fitting to full screen automatically. Despite trying various settings, I am unable to resolve this issue. Can anyone suggest what might be causing this problem? Thank you in advance https://i.stack.imgu ...

Showing XML content with JavaScript

Trying to parse a simple XML list using JavaScript, but having trouble formatting it the way I need. <TOURS> <MONTH> <TOUR> <NUMBER>1</NUMBER> <VENUE>City Name - Venue Name</VENUE> < ...

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

Is there a way to eliminate the space between the gray background and the right edge of the browser window?

body{ font-family:'Montserrat'; } .content{ background-color:#d9d9d9; } p.dates{ display:inline-block; font-weight:800; margin-right:20px; width:120px; text-align:center; margin-top:0; margin-bott ...

Utilizing Angular to Handle Undefined Variables in String Interpolation

Seeking a way to showcase data obtained from an external API on a webpage using Angular's string interpolation. If no data is retrieved or is still pending, the aim is to display 'N/A'. An attempt was made following this method, but encoun ...

Comparison of Web Development Techniques: localStorage versus Cached HTTP

Imagine a scenario where there is a web server responding to a GET request by sending a .json file. The response instructs the browser to cache it for a period of 5 years. Furthermore, picture a webpage that initiates this GET request for the JSON data du ...

Finding the Row Number of an HTML Table by Clicking on the Table - Utilizing JQuery

Seeking assistance to tackle this issue. I currently have an HTML table with a clickable event that triggers a dialog box. My goal is to also retrieve the index of the row that was clicked, but the current output is not what I anticipated. //script for the ...

Trouble with formatting a HTML form

I have been working on dynamically creating HTML forms using a function called makeInput(). However, I am facing an issue where the text input boxes are appearing next to each other when I click the "Add Course" button, instead of one per line. Below is ...

Using Bootstrap to style the <option> element with RGBA colors

Struggling to figure this out and seeking assistance. I have a form using bootstrap where I can apply rgba color for my select tag but not for the options. Select CSS: select { background-color: rgba(0,0,0,0.25) !important; border: 1px solid rgba ...

modify brand information through the use of javascript and customizable settings

In the default setting, I want all product details to be displayed. If the option value matches the product's brand name (b_name), then I want to display the corresponding details. Let's consider a list of products with their details: Samsung ...

The use of the picture element, with its ability to support various image formats and sizes, must always include

Recently, I came across a VueJS template that closely resembles HTML but has the following structure: <picture> <source type="image/avif" :scrset="avif" /> <source type="image/webp" :scrset="webp" ...

What is the best approach for creating HTML and CSS layouts: focusing on margin/padding or positioning?

When it comes to designing with HTML5 and CSS3, is it more beneficial to rely on margin and padding for layouts or should positioning be the main focus? I have always combined both methods to achieve desired outcomes but there are examples where each appr ...