The content in the div is not contained within a border in the css/html

I am struggling with a div wrapper that has a border, but the border is not wrapping around the content and I can't figure out why.

Here is my issue on screen:

This is what I want it to look like:

Below is my HTML code:

<div class="event_area_table_termin">
                <div class="twelve columns">

                    <h3>Event Overview</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Repetition</th>
                                <th>Type</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>   
                            <tr><td>Osnabrueck Night Market</td><td>04/11/2014</td><td>04/18/2014</td><td>Daily</td><td>Flea, Second Hand, &amp; Fair</td><td><a href="" class="btn btn_orange" data-featherlight="#fl3" style="padding: 5px 12px;"><i class="fa fa-tint 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/eventaddress/event-schedules-create.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=1X4JxCOwhDpD4Oj5ch&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/eventaddress/my-events.html?event_id=1X4JxCOwhDpD4Oj5ch&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a></td></tr><tr><td>Os<br>
pring Market Osnabrück</td><td>04/19/2014</td><td>04/22/2014</td><td>Daily</td><td>Urban Flea Market</td><td><a href="" class="btn btn_orange" dat...
...eeting schedules-create.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=h0NTcpfUlinWbpwBbpB1&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-penc..
...lass="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/eventaddress/my-events.html?event_id=h0NTcpfUlinWbpwBbpB1&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;">..
..trash-o 2x" style="padding-left: 3px;"></i></a></td></tr>                        </tbody>
                    </table>

                    <a href="/eventaddress/event-schedules-create.html?area=Night+Market+Osnabrueck&amp;area_id=OnRD4sBrvHZgAy4rK4" class="btn btn_green right"...</a> <br><br>
                    <a href="#" class="right" style="margin-top: 10px"><i class="fa fa-chevron-right fa-lg" style="margin-right: 5px;"></i>All Event Locations</a>

                </div>
            </div>

View Demo on JSFIDDLE

htmlcssborderwrapper

Answer №1

To make .event_area_table_termin dynamically adjust its height, change the value to auto instead of height:112px;.

.event_area_table_termin {
    height: auto;
}

jsfiddle

Answer №2

It seems that the issue in your situation lies within the inner div that has the classes "twelve" and "columns" receiving a "float:left" style, leading to a loss of its height. Consequently, the outer div fails to properly envelop the inner div.

To address this problem, it is suggested to remove the "float:left" style from the inner div, replacing it with float:none; unless doing so contradicts the rest of your design choices.

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

Customize the text that appears when there are no options available in an Autocomplete component using React

Recently, I came across this Autocomplete example from MaterialUI that caught my attention. https://codesandbox.io/s/81qc1 One thing that got me thinking was how to show a "No options found" message when there are no search results. ...

javascripthtmlreactjsmaterial-ui

Problem with overlapping numbers in the Vis network

I am currently working on a project using Angular 8 and Visnetwork. Everything is going well, but I am facing an issue with overlapping numbers on lines. Is there a way to adjust the position of the numbers on one line without separating the lines? Can s ...

javascripthtmlangularnetworkingvisnetwork

The border-radius property in CSS selectively rounds only one corner of the modal div window

There seems to be an issue with the border-radius property on modal divs in my project. When I apply the property, only one or two corners of the div round while the other corners remain unchanged. For a visual reference, please check out this image linke ...

htmlruby-on-railscsssass

Creating a fixed sidebar in Bootstrap 3 that spans the full width of the column

I'm working with two columns - col-md-8 and col-md-4. In the second column, I have a fixed sidebar that I want to be 100% width of the col-md-4 column. The black box in the image below represents the second column. Despite trying setting the width to ...

htmlcsstwitter-bootstrap

My attempt to incorporate an ajax loading gif into my website has been met with technical difficulties and is currently not functioning as

I am currently developing an uploader feature for my website located at To enhance user experience, I aim to display a loading animation in the form of a .gif image while the select box is being populated with subcategory options via an AJAX request. Bel ...

phphtmlajaxgifloader

Ways to conceal an HTML checkbox while displaying its accompanying label

Recently delving into jQuery, I have been exploring how to utilize the jQuery-ui Selectable component as a substitute for checkboxes. http://jqueryui.com/demos/selectable/ I believe I may be able to achieve this if I can discover a method to conceal the ...

jqueryhtmlcheckboxjquery-ui-selectable

Looking to create a custom loader that adapts to different screen sizes

Can anyone help me make the text in my centered div responsive on my website loader? I'm new to coding and struggling to figure it out. Any assistance would be greatly appreciated! Make sure to view the full page snippet so you can see the text prope ...

htmlcssresponsive

Triggering a class in Angular when another class is activated through JavaScript

My goal is to apply the class "xyz" when the class "xy" is activated using ngClass. I am looking to achieve the following scenario: If the class "xyz" is present in the tag, then activate the class "xy" Using ngClass="'xyz', 'xy'" ...

htmlangulartypescriptng-classangular-ng-if

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss

Clicking on the input triggers the appearance of a border using the OnClick function

I am currently developing my own website with a login feature that requires input tags of text-type. I would like to implement a functionality where clicking on these input tags will display a border, even when the mouse is not directly hovering over them. ...

javascripthtmlcssonclick

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website

the components progress down the line

For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...

jqueryhtmlcss

Tips for formatting JSON using jQuery

Imagine my JSON data with 3 different sets of information: [ { "Pair":"", "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf", "PubDate":"/Date(1463775846000)/", "Provider":null, "Market":"" }, { "Pair":"", ...

javascriptjqueryhtmlcssjson

Struggling to locate element using Selenium in Python 3?

While using Selenium for WebScraping, I've encountered difficulty detecting an element using xpath, full xpath, id or text. <div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-list"> <div class=cbp-vm-options">...& ...

pythonhtmlselenium

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango

The CSS box-shadow property failed to render properly on Internet Explorer and Safari browsers

#keyboard { position: fixed; background: #eee; display: none; border: 1px solid #ccc; border-radius:7px; width: 950px; height: 300px; padding: 5px; cursor: move; background-image:url('BackgroundImage.jpg'); box-shadow: -5px -5px 5px 5px #888; -m ...

htmlcssinternet-explorerfirefoxsafari

Using HTML and CSS to create a flexbox layout with multiple rows

.ent__food__image { display: flex; justify-content: end; } .bev__food__image { display: flex; justify-content: end; } .kids__food__image { display: flex; justify-content: end; } <main class="flex-container"> <!-- Entrees --> & ...

htmlcssflexbox

What is the best way to transfer attribute values from multiple elements and paste them each into a separate element?

I have multiple elements with the tag <a class="banner2">. Each of these elements has a different URL for the background image and href value. <a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_templat ...

javascriptphpjqueryhtmlcss

How can I select the specific element within a class when a particular checkbox is selected?

Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...

javascriptjqueryhtmlcsscheckbox

Is it possible for me to reply to packets that are transmitted to a website?

I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...

javascriptpythonhtmlpython-3.x