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

What could be causing my JavaScript code to not function properly in an HTML document?

Hello, I am a beginner in the world of coding and currently delving into web development. Recently, I was following a tutorial on creating a hamburger menu but I seem to be encountering some issues with the JavaScript code. I have double-checked my Visual ...

javascripthtmlcssvisual-studio

Connecting radio buttons to data in Vue using render/createElement

How do you connect the value of a selected radio button to a specific variable in the data object within a Vue application when using the render/createElement function? ...

javascripthtmlvue.jsradio-buttonrendering

Chrome fails to load webfont upon page initialization

Encountering a problem with loading a WebFont specifically on Chrome version "48.0.2564.82 m (64-bit)". The issue arises from the webfont not being applied upon page load or navigation, unless I manually refresh the page. Below is the snippet of code fro ...

htmlcssgoogle-chromewebfonts

Is it possible to adjust the color of this AnchorLink as I scroll down?

Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...

javascriptcssreactjsscrollonscroll

How can I place this ribbon on top of an image in an HTML email to ensure it displays correctly on email clients such as Outlook?

As I delve into my research, it's becoming apparent that achieving this result might not be feasible across all email clients. However, I'm curious to know if there have been any recent developments in the email world that would allow me to repli ...

htmlcssemailoutlookhtml-email

How can you transfer data from a jQuery function to a designated div element?

I'm struggling to transfer data from a function to a specific div, but I can't seem to make it work. I'm in the process of creating a gallery viewer and all I want is to pass the counter variable, which I use to display images, and the total ...

javascriptjqueryhtmlcss

Incorporating Microsoft's Emotion API into an HTML website

Currently, I am attempting to develop a HTML webpage that can detect emotions from images submitted by the user. By referring to Microsoft's documentation, I have produced the following HTML file: <!DOCTYPE html> <html> <head> & ...

javascripthtmlajaxwindowsazure-cognitive-services

Dealing with a div height problem in HTML/CSS

I'm experiencing an issue where my footer is overlapping with the bottom of my div. I've attached an image for reference but I can't seem to figure out what's causing the problem. I've tried adjusting the height values without succ ...

htmlcss

Unable to click on hyperlink and image not adjusting in size

I am having an issue with the anchor tags inside a div. For some reason, the width and height are set to 0px, and I have tried to adjust them with no success. Each dot in my onepage scroller is meant to navigate to a different page. .dotstyle-scaleup{ f ...

htmlcss

Ways to conclude a running function

This script has been created by me: $(document).ready(function(){ $("div#tabs a").hover(function(){ rod = this.id $('div.tabber').hide(); $('#tabber_' + rod).fadeIn(); $("div#tabs a").removeClass("ta ...

jqueryhtmlmenutabsfadein

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

javascriptphpjqueryhtmlinput

The appearance of all input forms in MaterializeCSS when used in an electron environment appears to

After following the instructions here on how to get started with Materialize CSS, I am having issues with my input form appearing strange: The contents of my current index.html file are as follows: <!DOCTYPE html> <html> <head> & ...

javascripthtmlcsselectronmaterialize

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline. This is how my code looks: HTML <div class="wrapper"> <div class="form-inline"> <div ...

javascripthtmlcsstwitter-bootstrap

Upgrade from Vuetify 2 to Vuetify 3, new changes including the elimination of v-list-item-content and v-list

I'm currently in the process of upgrading from Vuetify/Vue 2 to Vue 3. As someone who is not primarily a front-end developer, I have been tasked with updating some older code to ensure everything continues to work smoothly. However, I've run into ...

cssvue.jsvuejs3vuetify.jsvuetifyjs3

Tips for setting up personalized breakpoints for a Bootstrap navbar

I am currently facing an issue with my navbar on tablet view. Despite implementing custom breakpoints to collapse the navbar at 1050, the menu bar is appearing in two rows instead of one. I have tried using the code below but it doesn't seem to be wor ...

csstwitter-bootstrap

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs

What is the best way to include an external JavaScript file in a Bootstrap project?

I am brand new to front-end development and I'm attempting to create an onClick() function for an element. However, it seems like the js file where the function is located is not being imported properly. I've tried following some instructions to ...

javascripthtmljquerytwitter-bootstrap

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

htmlcssuinavigationbar

Changing the .load function based on user input

Can I replace a .load text with one that can be updated by a user using form input or similar method? My goal is to create a code that retrieves data using unique div IDs (specific to each employee) containing information within tables across various HTML ...

javascriptjqueryhtmlforms

Encountering an unforeseen issue with my code

I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...

jqueryhtmlcsstwitter-bootstrap-3summernote