Elements appearing outside their designated container

I'm struggling with my boxes and their content. Each box has different amounts of content, and I can't seem to get them to resize automatically to fit the content. The overflow:hidden; property hasn't helped either. Any suggestions?

Thank you!

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  max-height: 165px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}
<div id="leadership_elections_timeline">
<div class="timeline_divider"><div></div></div>
<div class="timeline_object">
<div class="elections_timeline_left">
<div class="date_circle"></div>
<p>17 Jan 2017</p>
</div>
<div class="elections_timeline_right">
<div class="elections_timeline_info">
<div class="timeline_details">
<h3>Nominations are now open!</h3>
<p>Take our quiz to see which role you'd be best suited to.</p>
<a href="/representation/elections" class="goButton">Nominate Yourself</a>
<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
<a href="/representation/elections" class="goButton">Nominate a friend</a>
</div>
</div>
</div>
</div>
</div>

htmlcss

Answer №1

Instead of using max-height, try utilizing min-height. This adjustment will dynamically alter the box height in case the text exceeds the minimum specified height.

Answer №2

Adjust the height to 100% instead of using max-height:165px. By removing this restriction, you will allow for more flexibility in the height of the element.

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  height: 100%;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}
<div id="leadership_elections_timeline">
<div class="timeline_divider"><div></div></div>
<div class="timeline_object">
<div class="elections_timeline_left">
<div class="date_circle"></div>
<p>17 Jan 2017</p>
</div>
<div class="elections_timeline_right">
<div class="elections_timeline_info">
<div class="timeline_details">
<h3>Nominations are now open!</h3>
<p>Take our quiz to see which role you'd be best suited to.</p>
<a href="/representation/elections" class="goButton">Nominate Yourself</a>
<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
<a href="/representation/elections" class="goButton">Nominate a friend</a>
</div>
</div>
</div>
</div>
</div>

Answer №3

The issue at hand is the setting of max-height:165px. Once you remove that, everything should work smoothly!

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  /* max-height: 165px; */
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}
<div id="leadership_elections_timeline">
<div class="timeline_divider"><div></div></div>
<div class="timeline_object">
<div class="elections_timeline_left">
<div class="date_circle"></div>
<p>17 Jan 2017</p>
</div>
<div class="elections_timeline_right">
<div class="elections_timeline_info">
<div class="timeline_details">
<h3>Nominations are now open!</h3>
<p>Take our quiz to see which role you'd be best suited to.</p>
<a href="/representation/elections" class="goButton">Nominate Yourself</a>
<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
<a href="/representation/elections" class="goButton">Nominate a friend</a>
</div>
</div>
</div>
</div>
</div>

Answer №4

If you want to enhance the visual appeal of your timeline, try removing the CSS rule max-height from the selector .elections_timeline_info.

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}
<div id="leadership_elections_timeline">
<div class="timeline_divider"><div></div></div>
<div class="timeline_object">
<div class="elections_timeline_left">
<div class="date_circle"></div>
<p>17 Jan 2017</p>
</div>
<div class="elections_timeline_right">
<div class="elections_timeline_info">
<div class="timeline_details">
<h3>Nominations are now open!</h3>
<p>Take our quiz to see which role you'd be best suited to.</p>
<a href="/representation/elections" class="goButton">Nominate Yourself</a>
<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
<a href="/representation/elections" class="goButton">Nominate a friend</a>
</div>
</div>
</div>
</div>
</div>

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

Tips for incorporating seamless animation effects to an element with jQuery

As I work on coding the navbar for my HTML website, I'm incorporating Bootstrap for styling and using a jQuery function to change the color of the navbar dynamically. However, I want to ensure that the color transitions smoothly when it changes. How c ...

jquerycssbootstrap-4

Unable to delete items or clear selection

Looking for ways to remove a dynamically created duplicate select element using JavaScript. I have a scenario where there are two types of select elements. The first one is visible after clicking the "Add Element" button, containing options "Access Contro ...

javascriptjqueryhtml

Preventing the negative consequences of being colorblind through programming techniques

My experience as a web developer has taught me that poor color contrast on a website can severely impact revenue. I am determined to change this, but have encountered an issue. On my site, there is a section where users can select a color and see it displa ...

javascripthtmlcolorsaccessibility

Exploring the Pros and Cons of Using a Broken Link Checker in Javascript

I've been working on a series of blog posts that feature tables containing information about 50 YouTube videos. Each row includes a thumbnail, video title, publishing date, and a link to my MediaWiki for additional details (e.g. "http://example.com/1x ...

javascriptjqueryhtml

Using jQuery to dynamically swap out <tr> tags and all the elements inside of them

In order to enhance user experience, I am looking to automatically fill in certain form elements within a table when a link is clicked. The intention is for the fields to populate with predefined values and then convert into HTML paragraph elements, preven ...

javascriptjqueryhtml

Creating a seamless full-page grid layout with CSS to eliminate the need for scrolling

My goal is to have 20 items on the grid of this page, each taking up full width and height with a fluid layout. Currently, I have successfully set up the page with 20 items spanning full width in a fluid design. However, the content of the grid is being p ...

htmlcsswordpressfluid-layout

Update the website URL in the browser using jQuery

Here is my code for making AJAX requests in my app: $(document).ready(function () { $('ul#ui-ajax-tabs li:first').addClass('selected'); $('#ui-ajax-tabs li a').click(function (e) { e.preventDefault(); ...

jqueryajaxhtml

When is it acceptable to use HTML within PHP without judgment?

Separating control logic from view logic is a common practice, but there are instances where using html templates can be faster and less complicated. I'm wondering where it is appropriate to use this approach. For example, functions that generate dy ...

phphtmlmodel-view-controllerstandardsconventions

When a cross-domain iframe is loaded in a private browser, it automatically logs the user out

I've been collaborating with a client to create a unique standalone website on a subdomain. They have requested that I utilize their API to initiate a straightforward post request when a user clicks a button. However, the client prefers the user to ut ...

javascripthtmljqueryiframe

Changing the dimensions of the table border and its color in DataTables

Looking at the provided table structure: library(DT) datatable( iris, style = "default", filter = "top", class = "hover stripe compact" ) I successfully modified the footer border with the following CSS code: table.dataTable.no-footer { bor ...

cssrdatatablesdt

Is there an issue with the second bootstrap navbar overlapping a dropdown-menu from the first navbar?

My issue involves two fixed-top navbars, where the dropdown-menu from the first one is being overlapped by the second navbar. I've tried adjusting z-index, positioning, and overflow properties without success. I have also looked at similar questions b ...

htmlcsstwitter-bootstrapbootstrap-4

Avoid displaying the image when encountering a 404 error, but sometimes a broken image may still appear momentarily

Here is the code snippet I'm currently using: <img ng-show="json.user.picture" ng-src="{{json.user.picture}}" ng-error="json.user.picture = false"> When accessing an image from an external website without permission, a 404 error code is return ...

javascripthtmlcssangularjssrc

Align a div in the center with another div positioned to its left and floated

I am in the process of creating a footer with three components: a logo aligned to the left, a centered navigation menu, and a set of social icons on the right. I have encountered an issue where when I float the logo to the left, the list items within my na ...

htmlcss

Is it possible for me to retrieve/load a <datalist> element from a different file?

I'm in the process of developing a Google Chrome extension that essentially consists of a dropdown menu and an input box with datalists. The user can change their selection in the dropdown menu, which will then switch the datalist being used by the in ...

javascripthtmlhtml-datalist

"Create a web resume that is easy to print and

I'm currently working on implementing a print-friendly feature for a Bootstrap 4 template resume/CV. My goal is to minimize the spacing between sections when the document is printed, allowing users to easily convert it into a PDF or Word format. You ...

htmlcssprintingbootstrap-4

Is it possible to assign a Bootstrap class as a variable in a custom CSS declaration?

While trying to make my website responsive, I planned on using media queries to adjust text size and other elements. The issue arises because I rely on bootstrap for setting text sizes. Is there a way to apply bootstrap classes in my CSS file? For instanc ...

cssbootstrap-5

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

javascripthtmltypescript

Only conceal the breadcrumb trail on the 404 error page

I have recently created a custom node for my site's 404 page with the path /node/83 in the site information. However, I am facing an issue where I cannot hide the .breadcrumb element using display:none. I attempted to achieve this through CSS injector ...

cssdrupal-7

An unusual symbol found within the HTML document

Currently, I am working on a project where I am creating a webpage that utilizes AJAX to fetch an XML file. To edit the files, I am using Text Wrangler for simple text editing and Cyber Duck to save and load them via SFTP. However, when I attempt to open ...

jqueryhtmlajax

Error with HTML5 Audio API: "unable to construct AudioContext due to unavailable audio resources"

Currently, I am attempting to develop a visualization similar to a graphic equalizer for HTML5 audio in Chrome using webkitAudioContext. However, I have encountered some unexpected behavior when trying to switch the audio source, such as playing a differen ...

javascripthtmlhtml5-audiowebkitaudiocontext