The left and right boxes have the same background color, but the left box is filled with lots of content while the right box only has a small

For my layout, I am using two boxes - a left_box with float:left property, and a right_box also with float:left property. The left box contains a lot of content and images, while the right box has only some content and images.

Initially, everything was working fine when I set a fixed height for both boxes. However, when I changed the height to auto, the alignment of the boxes got messed up.

Is there a way for the background of the other box to increase as the content in either the left or right box increases?

I want to achieve this using only div tags.

Thank you!

Answer №1

To achieve a side-by-side layout for both div elements, apply the CSS property display: table-cell to them.

Please be aware that Internet Explorer 6 may not render this as expected.

Answer №2

Here is the solution for your query...

To address your specific question about 2 column layout, take a look at this demonstration...

I trust this will be beneficial to you.

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

Submit information in two different formats; the initial format will not transmit any data until the second one is completed

At registration, I have divided the process into two forms. The user fills out the first set of information and then clicks "next" to proceed to the second set. Both sets of POST information are submitted upon clicking the final register button. This is m ...

Challenges with Implementing Background Images on my Website with HTML and CSS

Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I ...

Optimized printing layout with Bootstrap

Having some trouble printing an invoice I created using HTML and Bootstrap CSS. The issue is that the content doesn't print in full width, even after changing the media from screen to all. Check out how it looks on the web: Here's how it appear ...

Navigate back to the previous slide utilizing slick and jquery

I am facing an issue with my slides that have multiple calls to actions opening different slide on click For example, if a user is on slide number 1 and clicks a button to open slide number 5, then upon clicking the go back button it should return to slid ...

When removing a specific option from a dropdown menu, the default selection is chosen instead of the

So I have a select element that initially had multiple options selected. After I manipulated it with my code, only one option remains selected, but because I removed the previous selections, the default option is now being shown instead of the next selecte ...

Steps to create a function in a .js file that uses ng-show conditions

I am in the process of validating a web page where the user inputs must be alphanumeric, have a maximum length of 45 characters, and be unique. Below is the code snippet I am working with. Is there a way to consolidate these three ng-show conditions into ...

The issue I'm facing involves Materialize CSS interfering with the rendering of input fields from PrimeNG. Does anyone have a solution to resolve

The code I am working with is as follows: <div class="container" style="width:100%;"> <div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none"> <i class="fa fa-search" style="margin:4px 4px 0 0"></i> < ...

Is it possible to run both the frontend and backend on the same port when using vanilla JavaScript for the frontend and Node.js for the backend?

Is it possible to run frontend and backend on the same port in Rest APIs if using vanilla JS for the frontend and Node.js for the backend? I've come across information on how to do this with React, but nothing specific to vanilla JS. Any insights on t ...

Creating a seamless design with a navigation brand and login button on the same row within a navbar

I am trying to create a fixed navbar at the top of my webpage. The goal is to have the company's logo and name on the left side, with a log-in button on the right side. After reviewing multiple examples online, I found that most of them use a navbar- ...

Every time I attempt to visit my website on a mobile device, it seems to appear larger than normal, as

After developing a responsive website and adding media queries to make it mobile-friendly, I encountered an issue. Despite my efforts, the website's width is still larger than the mobile viewport, requiring users to zoom out to view it properly as sho ...

execute a different function once the animation has finished running with the .bind

When attempting to detect the completion of a CSS animation in order to remove a class, I encountered an issue where using .bind causes the animation end event to trigger even for the other function. You can view the complete code here. How can I ensure ...

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

When collapsing an accordion, Bootstrap radio buttons fail to properly select

I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...

Is there a way to effortlessly generate a mini-website from Markdown files?

Can a tool be found that creates a mini-website from locally-stored Markdown files complete with automatically generated navigation? I'm hoping for a service that can sync with my Dropbox, analyze the file structure, read the Markdown files, and effo ...

Using jQuery to toggle the visibility of divs depending on the selection of multiple checkboxes

I found this code snippet that I need help with. <div class="row"> <div class="col-xs-4"> <label class="checkbox-inline"><input type="checkbox" value="draft">Draft</label> </div> <div class="c ...

Leveraging the power of PHP includes with nested subdirectories

Hello, I recently configured my web server to run all .html files as .php files, allowing me to utilize the php include function, which has been very beneficial. However, I have various subdirectories with multiple files in each one. Homepage --banners ...

Clicking on the image in an owl carousel slider does not trigger the onsen template page to load

I am experiencing an issue with my owl carousel slider while calling an API for page content on image click. I have implemented an onsen template page using ng-click on image, but it only works for the first image click. Subsequent images do not call the o ...

Using Jquery to implement autocomplete functionality by iterating over each item with the .each

I have been attempting to implement autocomplete using the .each() function. I am referring to the documentation on http://jqueryui.com/autocomplete/. You can view my attempt in this FIDDLE link where it is currently not functioning as expected. The scen ...

The webpage functions properly when viewed locally, but only displays the background color when accessed online

My friend created a website using Microsoft Publisher a while back, and upon revisiting it recently, discovered that it doesn't load properly on the latest versions of Chrome and Firefox. When viewed locally, everything appears to work fine, but onlin ...

Monitoring user logins based on user identification

How can I effectively monitor the activity of users who have logged into a web application that is managed by an external company? Despite my extensive research efforts, as a non-technical individual, I am struggling to understand how to utilize Google Ana ...