Arranging two stretchable div elements side by side

I'm currently working on a web page layout where I want two divs to be flexible and adjust their size as the browser window is resized. However, I've encountered an issue where instead of shrinking, the line breaks between the two divs when the window is compressed too much.

It seems like there might be a simple solution that I'm missing... I just can't figure out what it is:

<html>
<body>

<div style="border-style:solid;border-color:green;max-width:100%;overflow:hidden;">
  <div style="float:left;border-style:solid;border-color:red;background-color:transparent;padding:15px 30px 0px 30px;min-width:100px;max-width:100%">This is a sample text to fill the space so that it can be looked at in a realistic way.</div>
  <div style="overflow:hidden;float:right;border-style:solid;border-color:yellow;min-width:100px;max-width:100%;max-height:100%;">This is a sample text to fill the space so that it can be looked at in a realistic way.</div>
</div>

<body>
</html>
htmlcss

Answer №1

To achieve this, utilize the CSS property display:table-cell. Implement it in the following manner:

.container{
    display:table;
    width:100%;
}
.container > div{
    display:table-cell;
    min-width:100px;
    background:red;
}
.container > .right{
    background:green;
}

View a demonstration here: http://jsfiddle.net/Ld3r6/

Answer №2

or maybe even this

 <style>
.col       {width: 45%; float:left; border: solid 1px #ccc; margin: 0 10px 0 0;}
.container {width: 80%; margin: 0 auto; }
.clear  {clear: both}
</style>
<body>

  <div class="container">
 <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod justo quis mauris maximus commodo.</div>
    <div class="col">Sed ac malesuada purus. Phasellus vel condimentum quam. Maecenas id bibendum urna.</div>
  <div class="clear"></div>
  </div>

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

Display a single image on the tablet and a distinct image on the computer

Currently, I am encountering an issue with my webpage located at . The problem lies in the right upper corner where a ribbon is located. However, when viewing the page on a tablet, the ribbon overlaps with my menu. To resolve this, I thought about displa ...

htmlcssresponsive-design

Issue: Inability to scroll on div overflow section

My website consists of one static page with an HTML and CSS file. Oddly enough, when testing the page and inputting content into a multiline textarea until it overflows, the browser fails to display a scrollbar. Despite inspecting the div with the id &apos ...

javascripthtmlcssbrowserscroll

Two vertical divs stacked on top of each other, each expanding to the entire height and width of the browser window

Is there a way to set the width and height of two divs on a webpage to match the dimensions of the browser window, requiring scrolling to view the second div? In addition, how can I ensure that the content within these divs is vertically centered? To ach ...

csshtmlheight

When an image is clicked, I would like it to redirect to a different page

In my slider image list, each image has an ID. If the ID becomes equal to a specific number, such as 24, I want that particular image to move to another page when clicked. Here is the code snippet: <?php $sql = "select * from ".$tblImages." Where cid= ...

phphtml

Tips for highlighting the final word in the headline using an underline

I'm attempting to create a title style similar to what is shown below The issue I'm facing is achieving the underline effect. I tried using title:after but it didn't give me the exact result I'm looking for. Here's my code: <h ...

htmlcssbootstrap-4

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

javascriptjqueryhtmlcss

Updating the value of a time input tag using jQuery

I am currently trying to dynamically set the value of an HTML input tag with type="time" using jQuery. Here is the code for the HTML Tag: <input class="form-control" style="font-size: 1em;" type="time" name="time_star ...

htmljqueryinput

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

I am attempting to send emails using node mailer. I have a jade template with HTML markup in an external file, which is compiled and rendered correctly. However, the styles inserted through maxcdn or cdnjs are not being applied. In this situation, how can ...

javascripthtmlnode.jsemailexpress

What impact does changing the Device Language have on a heading?

At the top of an html page, I have the word "Color" in a heading. If a user's device is set to British English, I would like the text to automatically switch to "Colour". What is the best way to accomplish this with minimal Javascript? ...

javascripthtmlcssheading

Problem with spacing in Bootstrap horizontal layouts

My project is currently empty except for a code snippet I copied from Bootstrap's horizontal gutters page. Unfortunately, I am not seeing any horizontal gaps as expected. Why could this be? It seems that only vertical gutters are working... Click her ...

htmlcsstwitter-bootstrapbootstrap-5

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

Is it possible for me to utilize a type of CSS variables?

Looking to organize all the CSS code on my website in a specific manner. I want to define the type with details such as size, weight, and color. For example: <h1 bold blue>Hello world</h1 blue bold> So essentially, the CSS file will include: ...

htmlcss

Adjust the color of the button upon hovering with CSS

I'm having trouble changing the text color from white to black when hovering over the button. The code seems fine, but the text color isn't changing. Can anyone help me figure out how to make it work? .main__btn { font-size: 1.2rem; back ...

htmlcss

What is the best way to sort a table by column index using HTML?

I find myself in a situation where I am not well-versed in HTML, Javascript, and CSS. Here is the scenario: <div class="table"> <table class="display-table"> <thead> <tr> ...

javascripthtmlhtml-table

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLin ...

javascripthtmlcssangularbootstrap-4

Ways to activate an event with select2

Hey there! I have a unique setup on my selling item page with select tags. The first select tag is created using HTML, while the others are dynamically added using jQuery when the user clicks on an "Add More" button. <select id='code0' onclic ...

javascriptjqueryhtmljquery-select2-4

Counting the days: how to calculate without using negative numbers

After performing the calculation, the result shows -30. Is there a way to eliminate the negative sign and get 30 instead? $days = (strtotime(date("Y-m-d")) - strtotime($info['expiredate'])) / (60 * 60 * 24) echo abs($days); Any suggestions on ...

phphtmldate

Switching the color of the placeholder text on a credit card

Recently, I have integrated credit card payment options into this website. To access the checkout page, you may need to add an item to your shopping cart first. Below, you will find the section where users can enter their credit card details. As part of ...

htmlcsswordpresswoocommerceweb

Is it possible to integrate Processing JS on top of an HTML element?

I have currently integrated Processing JS with the HTML canvas element on a website. The goal is to have the Processing JS animation run smoothly over the existing HTML elements on the page. You can check out the site at [usandthings.com][1] to get an idea ...

javascriptcsscanvasprocessingprocessing.js

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

javascriptjqueryhtmlcsstwitter-bootstrap