What steps can I take to ensure that my DIV completely surrounds the floating DIVs within it?

Having an issue with my CSS. The problem arises in a specific area of my screen where there are variable numbers of buttons enclosed within a DIV named sbr_btn. The layout is as follows:

Outer DIV Outer DIV Outer DIV

 01  02  03  04  05
 06  07  08  ...
 71  72  73  74  75

Outer DIV Outer DIV Outer DIV

The problem occurs because the buttons have a float: left property, causing the outer DIV to not properly enclose the buttons. As a result, the layout does not look as intended. Is there a way to make the outer DIV enclose the floating buttons?

<div id="sbr_btn" >
        <div><a href='xx'>01</a></div>
        <div><a href='xx'>02</a></div>
        <div><a href='xx'>03</a></div>
        <div><a href='xx'>04</a></div>
        <div><a href='xx'>05</a></div>
        <div><a href='xx'>06</a></div>
        many more
        <div><a href='xx'>75</a></div>
</div>


#sbr_btn div {
    float: left;
    padding: 4px;
    text-align: center;
}
#sbr_btn div a {
    display: inline-block;
    padding: 1px 4px;
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    color: #111111;
}

Answer №1

If you want to hide the overflow in a div, you can simply add the CSS property overflow:hidden:

#sbr_btn {
    overflow:hidden;
}

Check out this JS Fiddle demo for a live example.

Answer №2

To ensure that the container properly encloses floated elements, you can add an empty <div> at the end with the clear: both; CSS style applied. This is a simple trick I use to contain floated elements within their parent.

<div id="sbr_btn" >
    <div><a href='xx'>01</a></div>
    <div><a href='xx'>02</a></div>
    <div><a href='xx'>03</a></div>
    <div><a href='xx'>04</a></div>
    <div><a href='xx'>05</a></div>
    <div><a href='xx'>06</a></div>
    <!-- many more -->
    <div><a href='xx'>75</a></div>

    <div class="clearFix"></div>
</div>

 

.clearFix { clear: both; }

Another way to avoid the need for this solution is by simply setting the size of the container appropriately.

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 causes hyperlinks to fail in certain emails when opened in new tabs on Outlook Webmail?

After opening an email in a new tab on Chrome from Outlook 365 web app, I noticed that some hyperlinks stop working. Strangely, for certain emails I received, the hyperlinks work fine. I create these emails using Power Automate and the HTML code I use is: ...

Tips for adjusting the scrollbar in Tailwind (next.js/react)

Having trouble changing the appearance of my scrollbar in a single page application using Tailwind (react/next). I've attempted to create custom CSS for the first div in my index file, like so: <div className="no-scroll"> <<< ...

CSS: selecting the adjacent siblings of a certain class, starting from the first and

I am working on achieving the following goal: https://i.sstatic.net/xHoIG.png Elements containing values should have a gray 'ribbon'. Elements with values are given a class selected, while elements without any value do not have this class. Thi ...

What advantages does withStyles offer that surpasses makeStyles?

Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles? ...

What is the best way to align all of my content to the center in HTML?

In my web design class, I encountered an issue while creating a page. Currently, my page consists of a navigation bar and an image. I wanted to center both elements using CSS. display: block; margin-left: auto; margin-right: auto I applied this CSS to th ...

The addClass and removeClass functions in jQuery are functioning properly only on Firefox browser

Could someone help me understand why this code works in Firefox but not in Safari or Chrome? The variable newClass retrieves the value from a select box, which is then used to create a selector for adding or removing classes using addClass/removeClass. I ...

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

Using a personalized font in your RShiny application

I'm interested in integrating a unique custom font into my Rshiny App. I have a feeling that the necessary code should be placed within tags$style, but I am unsure of the exact syntax needed for this integration. Below is an example code snippet: ui ...

How can I make a div extend beyond the boundaries of a bootstrap card?

Working with bootstrap version 4 and devexpress. The dropdown section you see is a creation by devexpress. https://i.sstatic.net/8vdj6.png ...

Vertically centering with responsive Boostrap/CSS styling

I have 3 <a> with the btn bootstrap class on it. I discovered a way to center them both horizontally and vertically using the code below: HTML <div class="row row-centered "> <div class="vertically-centered"> <div class= ...

Thumbnail with magnifying effect on image

I have a thumbnail that contains both an image and some text. When I hover over the image, it zooms in. Check out this demo here: https://jsfiddle.net/ShiroiOkami/r1awd3b4/ I am looking to achieve an effect where the image zooms in without changing i ...

Combining Javascript and Django for a powerful web development solution

Having trouble setting up JS on my Django web app, despite reading through the documentation and previous queries. Using the Django dev server with the following file structure: mysite/ __init__.py MySiteDB manage.py settings.py ...

Adjusting the appearance of Material-ui table within the row.getRowProps() function

I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows. According to the documentation (https://material-ui.com/api/table-row/), it s ...

Having trouble with aligning text using the span tag?

I'm attempting to create a line for pricing where the text-align is aligned differently for each item - left, center, and right. Despite using text-align, I am unable to maintain all three items on the same line. Is there an alternative solution or w ...

Trouble arises when attempting to append a class through ng-class upon clicking

In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked. However, when clicking a button, the modal opens but the class is not being appended as expected. <div ng-class ...

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

Searching for a jQuery plugin to convert an image to black and white? Look no further! I've explored various options, but none quite fit the bill. What I'm really after is an effect that will revert the image back to color when a specific element ...

Having trouble implementing font css file in Reactjs

When working with Reactjs (Nextjs), every time I try to incorporate "css" into my project, I encounter the following error on my screen: Module not found: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' How can I solve this issue? ...

Turbolinks not allowing the addition of JavaScript classes for background images

While trying to merge a front end html theme with my Laravel app, I encountered an issue with turbolinks that is preventing Javascript from appending div classes. This is resulting in background images only being displayed on page refresh. <div class= ...

Can one customize the background color of a segment in a radar chart using Chart.js?

Could I customize the color of the sectors in my radar chart to resemble this specific image? https://i.stack.imgur.com/U8RAb.png Is it feasible to achieve this using Chart.js? Alternatively, are there other chart libraries that have this capability? It ...

Set the page to be rigid instead of flexible

I'm struggling to lock this webpage in place, so it doesn't resize when the browser window changes. The text keeps collapsing whenever I adjust the size of the browser, and I can't figure out what's going wrong. Can someone please help ...