Place one div element with a float property set to AUTO, followed by another div element that expands to

I am trying to place two divs inside another. The inner divs are floated, with one having a "width: auto;" and the other needing to fill the remaining space.

I have searched for examples, but they all involve at least one fixed width element, which is not what I am looking for in this case.

The structure should look like this:

<div id="bigboss">
 <div id="child1"></div>
 <div id="child2"></div>
</div>

"bigboss" has a "width: 100%", "child1" has "width: auto;", and I need Child 2 to fill the remaining space.

htmlcss

Answer №1

When it comes to CSS, there is no built-in function to 'fill the rest'. In such cases, using JavaScript is often necessary.

If you want to achieve this effect, you can utilize jQuery in the following way:

$(document).load(function(){
    $("#child2").css({
        "width": $("#bigboss").width() - $("#child1").width() + "px"
    });
});

You can see a live example of this implementation here: http://jsfiddle.net/YUjJ8/

Answer №2

It appears that achieving this in CSS2 is not straightforward, but you can utilize the Flexbox layout of CSS3 for a solution.

For an illustration, refer to this example (http://codepen.io/anon/pen/gifeu)

.wrapper {
  display: flex;
  flex-flow: row;

  text-align: center;
}

.wrapper > * {
  padding: 10px;
}


.main {
  text-align: left;
  background: deepskyblue;
  flex: 1 100%;
}

.aside {
  background: gold;
  flex: 1 auto;
}

Furthermore, here's a tutorial on using Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

If compatibility with IE9 is not a concern, Flexbox enjoys good support: http://caniuse.com/#search=flex

Answer №3

Unfortunately, achieving this task using CSS2 is quite challenging, but utilizing CSS3 Flexbox makes it a breeze.

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

Issues with Bootstrap columns not displaying correctly in versions 5 with col-sm-6 and col-md-4

When using Bootstrap 5, the col-sm-6 and col-sm-4 classes do not function correctly on small and medium screens, but work fine on large screens. The goal is to display 2 images on small screens and 3 images on medium screens. However, only 4 images are dis ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

The Datalist feature in HTML5 offers an auto-suggest functionality that displays a list of options beginning with the

In my project, I am utilizing HTML5 Datalist for autosuggestion. By default, HTML5 follows the keyword contains approach rather than the starts with approach. For example, if my datalist includes one, two, three and I type "o" in the search box, it displ ...

javascripthtml

Issue with Beautiful Soup/Selenium: unable to locate div element or any content within the body

My task involves extracting item names (such as cotton shirt) and their corresponding prices (¥3,600) from within the <div class="items-box-body"> section. <div class="items-box-body"> <h3 class="items-box-name font-2">cotton shirt& ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

How can I change the background color of the initial word in a textbox?

In my HTML, I have a text box input. While I am familiar with how to use CSS to set the background color of the entire textbox using background-color, I am wondering if it is possible to specifically target and change the background color of only the first ...

javascriptjqueryhtmlcss

Issue with CSS hover effect not being detected in IE 7 on a div element

Need some help with a top navigation setup for a website where I have a div inside an li element. Encountering issues in IE 7 where there are "holes" in the box causing the drop down to disappear when the user is still interacting with it. Initially trie ...

jqueryhtmlcssinternet-explorer-7navigation

jQuery - How come my string values are getting cut off?

It's been a while since I last worked with jQuery, and I seem to be missing something obvious that's affecting my calculations. I have various text boxes for Weight, Moisture %, and Number of Filled Squares, as well as a multi-select option for ...

javascriptjavajqueryhtml

Change your Bootstrap 4 navbar to a two-row layout using Bootstrap 5

Looking to update the navbar from Bootstrap 4 to Bootstrap 5 with two rows I came across this code snippet that works well for me in Bootstrap 4: https://codepen.io/metismiao/pen/bQBoyw But now I've upgraded to Bootstrap 5 and need help converting it ...

cssbootstrap-5

I am searching for answers to solve issues related to a JSON file

I am currently working on a tool that searches for matches in an input field by comparing the keywords entered by the user with a JSON. During my testing phase, I focused on using a single API that provides information about different countries and fortun ...

htmljsonangulartypescript

Is the page wrapper failing to contain or wrap anything at all?

Having a bit of trouble with my div element not wrapping all the way down. To simplify things, I've applied borders and background colors to everything. Here's the HTML code... I could resort to adding a float left to the page-wrapper div as a w ...

htmlcss

The element's width set to 100% is not functioning properly when used within a container

Struggling to create a full-width image header but the image always ends up being the width of the container, not 100%. Tried various solutions without success, and the suggested answer here did not solve the issue. Modifying the .container width in custom ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Discrepancy in div height between Chrome/Edge and Firefox browsers

I am currently in the process of designing a straightforward website layout that includes a navigation bar at the top. The main focus is on an image that needs to stretch from the bottom of the navbar to the bottom of the window, filling up the entire scre ...

javascripthtmlcss

It is not possible to alter the styles of the ng-daterangepicker Angular plugin

After installing the angular2 plugin "ng-daterangepicker", I attempted to resize a div within it by modifying the .sass file. However, despite clearing the cache, the changes did not reflect in my browser. It seems that I may need to make adjustments to .s ...

cssangularnpmsass

PHP code to display or conceal tables

I am facing a challenge in my PHP code where I need to hide a table based on a specific condition. Despite trying to use CSS for this purpose, it seems that CSS does not recognize the if condition and always overrides it. I am looking for a solution that ...

javascriptphpcss

What are the advantages of going the extra mile to ensure cross-browser compatibility?

It's fascinating how much effort is required to ensure web applications work seamlessly across all browsers. Despite global standards like those set by W3C, the development and testing process can be quite laborious. I'm curious why all browsers ...

javascripthtmlcsscross-browsercross-platform

Arrows on the button are unresponsive and there seems to be an incorrect number of

I've been working on a project by combining various examples I found online. I'm puzzled as to why it's displaying all the buttons at once instead of just one per page, and why the number of visible buttons decreases by one with each right c ...

javascripthtmlcss

Responsive mode causing navbar to break

After creating my web portfolio, I encountered an issue when viewing it on my phone. The navbar collapses but is not properly aligned and there is extra space on the right side of the viewport in the hero section that I can't seem to fix. Portfolio L ...

javascripthtmlcssbootstrap-4

Trigger event once item is selected from the jQuery combobox dropdown

I have implemented a custom autocomplete combobox using the jQuery UI library to create text fields with dropdown functionality. This hybrid input allows users to either select an item from the dropdown or enter free text manually. However, I need to trigg ...

javascriptjqueryhtmlformsjquery-ui

What is the process for determining the overall cost of a column in Angular 9?

I am facing a challenge in calculating the total price, total quantity, and total counted(#) of each column in a table. | Item | Price | Quantity | 1 | Mouse | 500 | 1 | 2 | Wire | 100 | 2 | TI:3 | |TP:600 | TQ:3 | < ...

javascripthtmljqueryangular

Tips for swapping out text with a hyperlink using JavaScript

I need to create hyperlinks for certain words in my posts. I found a code snippet that does this: document.body.innerHTML = document.body.innerHTML.replace('Ronaldo', '<a href="www.ronaldo.com">Ronaldo</a>'); Whil ...

javascripthtmljquerycssajax

Perform a search within an iframe

Despite the fact that iframes are considered outdated, I am attempting to create a browser within an HTML browser. I have implemented a search bar that opens the typed input in a new window which searches Google. However, I would like to modify it so that ...

javascripthtmlgoogle-chromesearchbrowser