Tips for creating an expandable div with floated content

I am looking to create a flexible div that expands based on its content. Inside this div, there are two floated left divs with fixed widths. These inner divs should also expand according to their text content. To clear the floats, there is another div within the parent div. Even though all elements are relatively positioned, the parent div does not automatically expand to fit the child elements. How can I make sure the parent div expands as needed? You can view the example at http://jsfiddle.net/Cupidvogel/y79NS/1/.

Answer №1

To achieve the desired layout, consider adding float: left to your main div with the class ".main". This will eliminate the need for a separate clear:both div since all elements will be floated.

For an example of this in action, visit this link.

If you prefer to keep the clear:both property as shown in your initial code, ensure that the clear div is placed within the float right div. Alternatively, you can remove the .clear div and utilize ":after" to clear the divs instead:

Check out this updated jsFiddle for a demonstration.

For further clarification on why these methods work, refer to this informative article.

Answer №2

One potential solution could be to include overflow: hidden; in the styling of the .main class.

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 sending multiple values in a data object using jQuery AJAX

I am currently working on a form that contains two input fields, with the possibility of more being added later. The first input is a text field and the second is a checkbox. I want to be able to send these inputs using $.ajax. To accomplish this, I have ...

javascript jquery html ajax

extract the text content from an object

I am trying to add an object to the shopping cart. The item contains a key/value pair as shown in the following image: https://i.stack.imgur.com/5inwR.png Instead of adding the title with its innerText using p and style, I would like to find another ...

javascript html angular

Setting up a responsive footer using Bootstrap and responsive design involves following a few key steps

Seeking assistance with making the footer of my website responsive using a combination of Bootstrap and custom CSS. I am aiming for a result similar to the examples shown below, both optimized for Desktop and Mobile platforms. Your help in achieving this ...

html css web bootstrap-4

What is the best way to eliminate the unwanted white space below the footer on a webpage

I'm working on a website and I've noticed that at the end of the footer, there is a large block of white space that shouldn't be there. I've tried adjusting the HTML and CSS code, but nothing seems to fix the issue. Strangely, other pag ...

html css footer

Unreliable behavior observed with the selenium driver.find_element method

Struggling to enter a password into a text box using Python. Here is the HTML code snippet for the webpage containing the input field. <input type="password" placeholder="" name="password" id="input6" value=" ...

python html selenium

Having Trouble Styling Radio Buttons with CSS

Hello, I'm facing an issue with hiding the radio button and replacing it with an image. I was successful in doing this for one set of radio buttons, but the second set in another row is not working properly. Additionally, when a radio button from the ...

javascript jquery html css

Curating personalized designs within a content management system

Currently, I am developing a SaaS platform that will feature customized styles for user accounts. The current method involves using YAML to create unique stylesheets for each account. However, as the number of accounts increases, I am starting to question ...

css content-management-system saas

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

javascript jquery html

Place the object into a vacant area with the help of jQuery Sortable

I am using jQuery Sortable and it's functioning well. However, I have encountered a small issue that I need help with. I have two blocks where elements from one block can be moved to the other. The problem arises when all the elem ...

javascript jquery html jquery-ui-sortable

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

html css

Angular 2: Emptying input field value on click event

I am experiencing an issue with resetting my input values. I have a search bar with filter functions. When I enter a value, it displays a list below and I want to add a function to these links. When I click on one of them, it takes me to another component ...

javascript html angular typescript

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

javascript jquery css

Deactivate a specific button within a row on a Primeng table by clicking on it

I'm trying to modify my primeng table so that each row has a button, and when I click on a button, only that specific button should be disabled. However, in my current code, all buttons are getting disabled with a single click. Can someone please help ...

html angular events primeng primeng-table

Sending jQuery variables to PHP

Is it possible to transfer a jQuery variable to a php file? Let's take a look at the code in my_js.js: function updates() { $.getJSON("php/fetch.php", function(data) { $.each(data.result, function(){ var s_id = this[& ...

php jquery html

Find and make adjustments to the primary HTML document in your Magento online shop

Trying to enhance the top banner of my Magento website tamween.biz by adding a shadow effect PNG picture. Successfully managed this on my local server using firebug and creating a new class in the coding area with all selector properties modified in the bo ...

html magento locate

Adjust font style within an HTML/CSS document

I recently obtained the source code for an online portfolio project, but I'm struggling to figure out how to modify the font style. Can anyone provide guidance on this issue? https://github.com/akashyap2013/PortFolio_Website ...

html css font-family

Is there a way to automatically activate the "Add" button when I hit the enter key in the text box?

Being someone who relies on to-do lists, I implemented a system where you can input tasks into a textbox and click the add button to see them listed below. However, I found it cumbersome to keep clicking the add button every time I wanted to quickly add mu ...

javascript html css

Strange border adjustment for customized-height input[type=button] in Internet Explorer 6 and Firefox 3

Upon my discovery, I encountered a peculiar issue in IE6/FF3 when trying to set a custom height (even if it matches the default) on a button. The following code illustrates that although both buttons have the same height, their padding differs inexplicably ...

html css button input padding

Struggling with the conundrum of aligning a constantly changing element amid the

I was optimistic about the code I wrote, hoping it would work out in the end. However, it seems that my expectations might not be met. Allow me to provide some context before I pose my question. The animation I have created involves an SVG element resembl ...

javascript jquery html

Craft a search bar inspired by Google's iconic design using CSS styling

I need to recreate a custom input styled like the Google Material Theme design. This is the desired outcome: https://i.stack.imgur.com/QU5dp.png While I am aware that frameworks/libraries can achieve this, it is part of my assignment to create it from s ...

html css material-design

CSSer Q&A