Ensure that the dynamic div elements are positioned together horizontally

Hello everyone, I could really use some assistance here:)

My issue involves having 2 dynamically resizing divs inside a parent div. These divs have widths that range from 460px to 640px (just for example). The overall width of my site spans from 960px to 1300px. When the site is at its full width of 1300px, I want both divs to be on the same line with a width of 640px. And when the site shrinks down to 960px, I want the divs to remain on the same line but with a width of 460px.

The problem I am facing is that as the site gets smaller (resizing the browser window), the divs drop below each other.

Here is the code snippet: http://jsfiddle.net/EKYLe/2/

Below is the HTML structure:

<div class="Content">
<div class="box-container">
    <div class="box">
        <h2>News</h2>

    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
    </div>
    <div class="box">
        <h2>News</h2>

    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
    </div>
</div>

If you notice, when you resize the window, the divs stack vertically instead of staying side by side.

Best regards, Nicklas

csshtml

Answer №1

To effectively manage their placement, consider placing them within a table structure. By doing so, you can ensure they are consistently placed in columns 1 and 2 of the row and easily align them on the page as needed.

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

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

javascripthtmlcsstwitter-bootstrap

Enhancing the functionality of LI elements by making them clickable when dynamically inserted into the webpage

I have successfully implemented a code using the Google Maps API that allows users to input a location, look it up on the map, and display the search result next to the map. The only part I'm struggling with is making these search results clickable so ...

javascriptjqueryhtmlajax

Show the selected row's data from a gridview in a dropdown menu

I am facing an issue with displaying the selected row value in a dropdown list. Can anyone assist me with this problem? Here is an example scenario: https://i.sstatic.net/RYssP.png Upon looking at the image, you will notice that the selected row's ...

c#htmlasp.net

Currently, I am attempting to implement password strength validation using Angular

Looking for a way to implement password strength validation in Angular? You may encounter an error message like this: NullInjectorError: No provider for password strength! in the passwordstrength.ts file HTML <div class="validation_errors t ...

htmlangulartypescriptangular-reactive-forms

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

javascripthtmlcsstwitter-bootstrapnavigation

Customize the appearance of the search box in Serverside Datatables

Is there a way to adjust the search and show inputs for datatables so that I can customize their width and make them fit my dynamic column sizing? The issue I ran into is that these inputs are enclosed within <label> tags in the source JavaScript, an ...

javascriptjquerycssdatatables

The Php Include function is known to create unnecessary whitespace and disregard any specified styles

On one of my web pages, I am using the include() function to bring in content from another page. This external page contains both HTML and PHP code, with echoes for output. Here's an example: The page Apple.php looks like this: <html> <head ...

phphtml

Customize the text color of select list options in Angular 5

Is there a way to style the foreground colors of select list options differently in this dropdown code? <select id="tier" class="form-control" [(ngModel)]="tierId"> <option *ngFor="let m of tierList" value="{{m.tier}}" > {{m.option ...

htmlcssangularangular5

Arranging items in a vertical column using CSS based on the content

I am facing an issue with aligning the values in a column under each other without percentages using my own html code, css, and bootstrap classes: <div class="d-flex"> <p class="table-string">91.86</p> <span ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

The texture rendered by Three.js WebGL is not displaying correctly on the plane and appears

Currently, I am working on a WebGL scene that consists of 2 planes. One of the planes displays a transparent texture perfectly, while the other plane is supposed to showcase a high-resolution, non-transparent texture as a background. Unfortunately, I am fa ...

javascripthtmlthree.jstextures

Transforming web pages into PDF format

Below is the code snippet I am using to create a PDF file from an HTML Report: String url = new File("Test.html").toURI().toURL().toString(); OutputStream os = new FileOutputStream("Test.pdf"); ITextRenderer renderer = new ITextRenderer(); renderer.setDoc ...

javahtmlpdf-generation

Retrieving PHP variables within the HTML document of the current page

Suppose I have a page with a link <a href='edit_info.php?id=1001'>1001</a>. In the edit_info.php page, I want to use this id to query a database, like so: SELECT * FROM table WHERE id = $_GET['id'] Now, I need to populate ...

phphtmlmysqlsql

Can you explain the purpose of using the "overlay" value in the "overflow" property?

Can someone please clarify the distinction between "overlay" and "auto" for me? Is the function of "overlay" similar to that of "auto"? ...

cssoverflow

Contrasting CSS Attribute Selectors and Pseudo-Elements in Input Tags

<input type="text" placeholder="nothing" title="google" required> **CSS Content:** input[type="text"]{ border: 2px solid red; } input::placeholder{ color:green; } input[title="google"]{ background ...

htmlcsscss-selectorsattributes

Is it unnecessary to use both "width: inherit" and "float: none

When learning about responsive design, one pattern that is frequently seen is: @media screen and (max-width: 480px){ .class1{ width: inherit; float: none; } .class2{ width: inherit; float: none; } f ...

htmlcssresponsive-design

Steps to easily modify the color of Font Awesome stacked icons when hovering over them

I have incorporated two Font Awesome icons into my design: fa-circle-thin fa-user-plus These icons are stacked to create a circular icon appearance. <span class="fa-stack fa-sm"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i c ...

htmlcssfont-awesome

View the text notes information stored in a database, make changes to them, and then update and save the modified data using NodeJs

Currently developing a website that allows users to register, login, write text notes in a text area, save them in a database, and view those saved notes on a separate page. Additionally, users should be able to click on a note from the list and have it ...

htmlmysqlnode.jsexpress

Developing an editor

Currently, I am delving into the concept of object inheritance in JavaScript through a practical exercise where I am creating an online editor similar to the one I am currently using. However, I find myself slightly confused as I aim to utilize data-* att ...

javascriptjqueryhtmlcss

How about incorporating AJAX into your HTML code?

I am currently in the process of developing an email system for a company that wishes to use it for sending emails. To achieve this, I have implemented a custom HTML editor for creating email content. My goal is to post the email contents to an external PH ...

phpjquerymysqlhtmlajax

Guide on showcasing active users currently online within the system utilizing CodeIgniter

I'm currently working with CodeIgniter and trying to display live online users using this framework. I attempted some code, but I'm feeling a bit lost now. I found a helpful video that I learned from: Alternatively, I followed these steps as sh ...

phpjqueryajaxhtmlcodeigniter-3