Issue with allowing the second floating div to occupy the remaining horizontal space inside the container div

Describing the scenario, there is a container division with two floating divisions of different widths. You can view it live by following this link (look for "Hotel booking" section):

I have added a border to the second division. My goal is to make this second division occupy all the remaining space within the container division. Since the width of the first division varies based on individual hotel offerings, I cannot set a fixed width for it. However, I want the second division (where prices are displayed) to utilize all available space to avoid overcrowding.

What steps should be taken to achieve this desired outcome?

csshtmlcss-floatspace

Answer №1

To enhance your "bordered div", take out the float: left and incorporate overflow: hidden.

If you want to see a demonstration and get an explanation, check out this link: Fill the space of a div

I just viewed your page on IE. It seems like there's no doctype present, causing your page to be completely broken due to Quirks Mode.

You can fix this issue by adding the following line (the HTML5 doctype) as the first line in your HTML:

<!DOCTYPE html>

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

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

In my current project, I am fetching a random document from a MongoDB Collection and attempting to showcase all the fields of that document in HTML. Although I can successfully retrieve a random document, the issue arises when trying to display its fields ...

javascripthtmlmongodbmeteor

Utilizing Python to dynamically create unique tags from deeply nested dictionaries through recursion

As part of my project, I am developing a unique dynamic template tool that can seamlessly integrate with any templating framework such as pugs and jinja. The goal is to create a demo that resembles the following structure: view! { div { p { ...

pythonhtmljsondictionaryrecursion

Revitalize Your RAILS Application with Automatic Partial Refresh

Using a controller events with action show : def show @event = Event.get(params[:id]) if !connected? || !@event return redirect_to request.referrer || root_path end @requests = @event.get_requests Inside the view show.html.erb: ...

jqueryhtmlruby-on-railsrefresh

drop down menu in navigation bar: unable to display items

I am having trouble with a dropdown menu in my code. Even though I used the code from the official Bootstrap website, the items are not appearing in the dropdown list. <nav class="navbar navbar-expand-lg navbar-dark bg-primary "> ...

htmlangular6angular-ui-bootstrap

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

csstwitter-bootstrap

Filling a table cell with a div that spans 100% height

I am currently working with Bootstrap and I am attempting to create three columns filled with text overlaying a rectangle. The squares within the columns should have equal height and there needs to be spacing between them. Through the use of display:table ...

htmlcsstwitter-bootstrap

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

htmlcsspositionspacing

Angular2 scripts are failing to load in the web browser

Setting up my index page has been more challenging than I anticipated. Take a look at my browser: https://i.stack.imgur.com/L4b6o.png Here is the index page I'm struggling with: https://i.stack.imgur.com/Op6lG.png I am completely stumped this tim ...

javascripthtmlangularjsnode.jsmean

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

htmlcssapixhtmlnavigation

Python code to extract text data from a table using XPath

Recently, I've been using requests and lxml to develop a simple API that can fetch a timetable from a specific website. However, being new to this, I'm struggling to extract any information beyond the hours. Despite experimenting with xpath code ...

pythonhtmlapixpathrequest

What is the best way to determine the quantity of identical items in the django templating language?

My goal is to create a table that organizes items by type, all retrieved from my database. Currently, I can display the items and their corresponding types without any issues in a table format. However, I want to avoid repeating the same type multiple time ...

htmldjangodjango-templates

Menu Items at the Center

I am currently working on a Wordpress website and struggling to center the menu items that are currently aligned to the left. I have created a child theme from the existing theme's code, but still can't figure out how to achieve this simple task. ...

csswordpressmenuhtml-listsnav

An advanced password checker that notifies the user of any spaces in their password

I need help fixing my JavaScript code. The program should prompt the user for a password using a dialogue box, and then validate that the input has no spaces. If a space is detected, the program should stop and display an alert saying "Invalid, contains a ...

javascripthtmlloopswhile-looppasswords

Fading in and out occurs several times while scrolling through the window

My goal is to update the logo image source with a fadeIn and fadeOut effect when scrolling up or down. The issue I'm facing is that the effect happens multiple times even after just one scroll, resulting in the logo flashing many times before finally ...

javascriptjqueryhtmlscrollfade

Is it possible to change the inner html to null during an active ajax request?

My goal is to have two separate data.html files inserted into two different HTML files without needing a click event. I want the structure of my data.html files to remain consistent, while allowing the template of my website to change dynamically by callin ...

javascripthtmlajax

I seem to be having trouble getting innerHTML to function properly

Whenever I attempt to showcase HTML code from a DIV element, the innerHTML function fails to retrieve its contents: <div id="container"> <tr> <td style="background-color: #ffffff;">TEST</td> </tr> </div> ...

javascriptjqueryhtml

Django is indicating that the path is not reachable

I've been struggling with a seemingly silly issue in my code. I can't figure out why it's not working properly. Here is the directory structure of my Django Project: https://i.sstatic.net/0tVo4.png The HTML file I'm targeting (index.h ...

htmlcssdjango

Refinement of website footer alignment

As a web designer, I am experiencing difficulty in adjusting the footer on my website. I would like the footer to be fixed at a specific height and remain in the same position unless the content increases, in which case it should move down accordingly. Can ...

htmlcss

Finding web page links from competition rankings using pattern matching

Challenge I am currently delving into the realm of natural language processing projects. Before diving in, I intend to explore existing works on datasets, particularly those organized on a leaderboard (refer to the "Three-way Classification" section). Ho ...

htmlbeautifulsoup

Retrieve identification details from a button within an ion-item located in an ion-list

<ion-list> <ion-item-group *ngFor="let group of groupedContacts"> <ion-item-divider color="light">{{group.letter}}</ion-item-divider> <ion-item *ngFor="let contact of group.contacts" class="contactlist" style="cl ...

javascripthtmltypescriptionic-framework