css apply liquid-like resizing to div element

I'm trying to set the height of the container to automatically adjust if the content overflows, allowing it to flow naturally.

This is the code I'm currently using on my site: Here

Please disregard the HTML and focus only on the CSS as that's where I'm encountering an issue.

.game_wrapper {
    width:210px;
    height:auto;
    position:relative;
    background:#fafafa;
    background:url(bg1.png);
    border:1px dashed #7f7f7f;
    padding:3px;
}

.game_container {
    width:90px;
    height:85px;
    border:1px solid #fff;
    float:left;
    margin:3px;
    text-align:center;
    -moz-box-shadow: 0px 0px 1px #000000;
    -webkit-box-shadow: 0px 0px 1px #000000;
    box-shadow: 0px 0px 1px #000000;
    border-radius:1px;
    padding:3px;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    position:relative;
    background:url(background.jpg);
    background-size:100%;
}

... (CSS code continues)

Answer №1

Check Out Your Fixed Example

To ensure proper layout, make sure to include clearfix in the main wrapper

.clearfix:before, .clearfix:after { content:""; display:table; }  
.clearfix:after { clear:both; }  

/* For Internet Explorer 6/7 */  
.clearfix{ zoom:1; } 

Add the class .clearfix to the main wrapper element

<div class="clearfix game_wrapper">

For more information on clearfix techniques, visit this link

Answer №2

VIEW DEMO

To implement the desired functionality, all you need to do is include overflow:auto; within the .game-wrapper CSS style.

.game_wrapper {
    width:210px;
    height:auto;
    position:relative;
    background:#fafafa;
    background:url(bg1.png);
    border:1px dashed #7f7f7f;
    padding:3px;
    overflow:auto;
}

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

Difficulty encountered while using MySQL column update button

I'm looking for assistance in updating my database using an SQL statement after a button is clicked on the website. I attempted something but it was unsuccessful. Could anyone provide guidance? Here's the code snippet: http://pastebin.com/D0S83Jg ...

Tips for stopping a browser from automatically opening a new page when a form is submitted

On a webpage, there is a form for email subscription. When a user enters their email and clicks the submit button, we do not want the page to redirect to a specific URL. Instead, we simply want the text value of the submit button to change to something lik ...

The complete guide to effectively concealing double arrows within a Bootstrap 4 custom-select component

If you're looking to hide the double arrow on the right of the bootstrap 4 custom-select field, there have been solutions provided here. However, even after implementing those changes, the text on the right-hand side still gets obscured by the opaque ...

Editing HTML on an ASPX website can be a breeze with

Hello there, I've been tasked with editing a website for a client, but the site is located on a local web server and was designed using aspx. As I review all the files, I am encountering difficulty finding the HTML code associated with runat=server w ...

Incorporating a Layered Div onto a Presentation Slider

Over at , we have a slider featured on the homepage. I am attempting to place a div ABOVE the image but BELOW the text. Essentially, my goal is to add a semi-transparent white overlay to enhance the image on the slider while keeping the text visible for b ...

The element vanishes from sight after being detached and re-appended

Currently, I am utilizing hQuery's draggable and droppable features. My goal is to move an element from its original parent to its new dropped parent after dragging it. However, when I detach and append the element, it seems to disappear! What could ...

Align dropdown navigation menu/sorting dropdown in the same position as the button

Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...

CSS ISSUE: Issue with hidden overflow causing white space next to border in nested divs

When working with a div inside another div and setting overflow to hidden, you may notice a whitespace issue around the border when zooming in and out on Chrome. Firefox handles this situation better, showing white space only in the corners of the border. ...

Issues with Safari text shadow not rendering properly when extending beyond the element border

I've encountered a situation where I have a text shadow applied with the following CSS: body { background: white; } h1 { color: black; text-shadow: 100px 100px 10px black; } https://i.sstatic.net/j8OTS.png When viewing in Safari browser, t ...

Customizing the appearance of a Vue.js Single Page Application with

I have a custom-built Vue.js single page application and I am interested in implementing user-switchable dynamic themes. I envision a scenario where users can easily toggle between 'light' and 'dark' themes by clicking a button, and hav ...

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

I am experiencing some issues with full screen divs that overlay each other on scroll and a background image. When scrolling back to the top in Chrome, the background shifts down slightly, and in Safari, the same issue occurs when scrolling down. I have cr ...

Issue with CSS flipping of DIV in ASP.Net form

I am trying to implement a CSS flip effect that activates on a button click. However, when I place it within an asp.net form, the flip doesn't work. I suspect that the asp.net form may be auto-refreshing and causing issues. Any assistance would be gre ...

If a particular <td> element is present on the page, exhibit a unique <div>

I have a webpage with various HTML elements. <div class="alert">Your message was not sent.</div> <p class="pending">Email Pending</p> I would like to display the div.alert only if the p.pending is present. Is ...

Tips for creating a dynamic inner DIV that follows the scroll position of an outer DIV without relying on a fixed width

I have created a series of DIV elements to represent a chart. The key element is everything enclosed within the "rightPanel" section in the following code snippet. The "topPanel" section has an absolute position, and its top value (top: 0px) needs to be a ...

Set up a listener to detect changes in fullscreen mode for the specified host

How can I determine if the fullscreen mode is active using the HTML5 fullscreen API with Chrome and Angular 4.x? I have developed an Angular component and included the following @HostListener: @HostListener('document:webkitfullscreenchange', ...

What is the best way to place an anchor so that it is perfectly aligned between a static header and footer?

I am looking to create a website where the content is placed below a fixed header and footer. Navigation is to be done through anchors, with only the active anchor being displayed while the rest remains hidden by the header and footer (similar to a window) ...

What is causing the presence of a blank row in my GridView?

There always seems to be an extra empty row at the end of my GridView gv_remboursement.DataSource = listResult; gv_remboursement.VirtualItemCount = iTotal; gv_remboursement.DataBind(); listResultContent.Visible = isVisible; The listResult variable ho ...

Improve the readability of a series of string.replace statements

When dealing with HTML code in Python, special characters need to be replaced using the following lines of code: line = string.replace(line, "&quot;", "\"") line = string.replace(line, "&apos;", "'") line = string.replace(line, "&amp ...

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

I am currently utilizing Material-UI within a React 16.10 project. My goal is to create a table where the left column consists of an icon, while the right column displays a label and address stacked on top of each other. I want the items in the right colum ...

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...