Display content in two columns. If the width of the left column is too narrow, move the content in the right column

In my layout, there is a wrapper div with two child elements: left div and right div. The left div contains text which can be lengthy, while the right div holds an image loaded asynchronously without known width:

<div id="wrapper">
    <div id="left">TEXT TEXT TEXT TEXT</div>
    <div id="right">IMAGE</div>
</div>

The desired display for this structure is as follows:

#wrapper{
    width: 600px;
    display: inline-block;
}
#left{
    float: left;
    width: 400px;
}
#right{
    float: left;
    width: 200px;
}

Now, the goal is to make this layout responsive. If the image on the right surpasses 400px in width, it should move below the left div, which will then expand to fill the entire width of the wrapper like so:

#left.width = #wrapper.width - #right.width;
if (#left.width < 200px) {
  #left.width = 100%;
  #right move to new line;
} else {
  display #left div on left side and #right div next to #left div
}

Answer №1

I have made adjustments by applying float:left to both of your div elements. You can view the updated code at http://jsfiddle.net/fxWg7/1866/

#wrapper {
height: auto;
overflow: hidden;
}

#right {
width: auto;
float: right;
background: #aafed6;
}

#left {
float: left; 
background: #e8f6fe;
width: auto;
overflow: hidden;
min-width: 200px;
max-width:300px;
}

Answer №2

Here is the CSS code with some highlighting that addresses your question: http://jsfiddle.net/differentusername/abcd1234/. Feel free to test it out and let me know if it meets your requirements.

/* Responsive design approach:
1) No fixed widths are applied to #container, #left, and #right divs as they naturally span 100%.
2) The #left section, being higher in the DOM order, will naturally appear on top */
#container{
overflow: auto; /* ensures floating elements stay within bounds */
}
#left{}
#right{}


/*
Targeting small viewports:
We set a "max-width: 100%" for "#right img" so it maintains its natural width unless the layout becomes smaller */
@media (max-width: 599px) {  
#right img{
max-width: 100%; /* maintain image width or scale down based on viewport size */
}
}


/* Larger viewports:
Beyond this breakpoint, define the container width and ensure the right image adjusts responsively */
@media (min-width: 600px) {
#container{
margin: 0 auto; /* horizontally center all elements */
width: 600px;
}

/* Assign percentage widths to #left and #right */
#left{
float: left;
width: 60%; 
}
#right{
float: left;
width: 40%; 
}
#right img{ 
width: 100%; /* image occupies full width of parent element */
height: inherit; /* maintain aspect ratio */
}
}

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

Utilize the class names to assign a distinctive color using mixins in SCSS

I am diving into the world of Sass and I have a peculiar challenge. I want to create a class that allows me to set a color using percentages for red, green, and blue values. For example, the class name color-50-10-60 would represent 50% red, 10% green, a ...

Ways to ensure a video completely fills the frame

I am experiencing an issue where the video in the main div of my home page does not fully fill the div right away - I have to refresh the page for this to happen. As a result, there is black space on the left and right sides. Interestingly enough, this pr ...

Adjust the size of CSS elements on hover while removing any margin

I am currently working on making my navigation bar elements larger when hovered over. However, I'm facing an issue where the rest of the website shifts downward slightly when I mouseover them, and it doesn't look good. Is there a way to increase ...

Error on JSP Hello Page

As a novice in JSP, I am attempting to create a simple JSP page where I can set my class fields for name and surname and display them on the page. Below is my Java class: package org.mypackage.person; /** * * @author cemalinanc */ public class Person ...

Making sure that the div elements are stacked vertically once the top div expands in size

I am dealing with a situation where I have two divs that showcase a list of elements for the user to interact with via a search bar. This is followed by a "Done" button to finalize their selection. <div class="dropdown col" id="dropdown-s ...

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

As I continue to enhance my front-end development skills and practice Sass to optimize my CSS code, I encountered a roadblock. After exploring resources and tutorials online, I created a global mixin in Sass named 'transition'. Here is the code: ...

The input form in my Node.js project is not adapting to different screen sizes. I am currently utilizing ejs as the template

I have integrated ejs as a template in my Node.js project, but I am encountering an issue with the input form in the following code snippet. The form is unresponsive, preventing me from entering text or clicking on any buttons. What could be causing this ...

Converting XML hierarchy into a flat HTML table using XSLT

Looking for a way to transform hierarchical XML into an HTML table? Here's the challenge: <node text="a" value="1"> <node text="gga" value="5"> <node text="dh" value="9"> <node text="tyfg" value="4"> < ...

Is it possible to selectively process assets based on their type using Gulp and Useref?

Is it possible to selectively process css and js assets using gulp-useref based on the build type specified in the html tags? <!-- build:<type>(alternate search path) <path> --> ... HTML Markup, list of script / link tags. <!-- endbui ...

Difficulty in accurately identifying the current page on the appbar

I'm attempting to make the active page in my navbar stand out by giving it a white background color and skyblue text. However, for some reason, I can't get the text color to display as skyblue in the appbar. You can see how it currently looks in ...

Bootstrap grid: Preventing horizontal scrolling when all columns cannot fit in a single row

Why is it that when the column does not fit in one row, instead of showing a horizontal scrollbar, it goes to the bottom? <div class="container-fluid main-container" style="overflow-x: auto; width:600px"> <div class="row mx-5"> < ...

Implementing a confirmation dialog for POST requests in Flask

My first experience with Flask involves adding a confirmation dialog to a form, but only under specific conditions. Unfortunately, I'm unable to achieve this on the client side. While I was successful in implementing it for GET requests, POST requests ...

Inserting a custom text box underneath the Anything Slider

I am currently incorporating the Anything Slider into a website project. The main purpose of the slider is to showcase videos, but I would like to include a description text box beneath it that dynamically changes based on the selected tab. This snippet de ...

Tips for shifting div background image while the push menu is in use

Looking for a Solution: I'm trying to figure out how to adjust my background image within a div when the push menu is active. Here's the CSS I'm currently using: .webcam-bg { background-attachment: fixed; background-image: url("../ ...

Preload-webpack-plugin does not support pre-fetching files

I have a query about prefetching and preloading content. In my vue app, I noticed that after building, I have duplicate files loaded in my dist/index.html file. Here is an example: Additionally, the "scripts" are not being preloaded/prefetched as expec ...

"Optimizing App Pool Performance with IIS Precache Event Monitoring

Our asp.net LOB web application is quite large. The issue we are facing is the delay of up to 10 seconds when the app pool is started or recycled, making the first page load slow. This results in users seeing a white page with a loading spinner until IIS ...

Is it possible to load images top to bottom?

Is there a way to make browsers load images from the bottom to the top? Imagine I have an extremely long image that takes 60 seconds to load. The content is designed to be read from bottom to top. Is there any trick I can use to ensure that the image load ...

Basic HTML code that displays either one or two columns based on the width of the screen

My monitoring website displays dynamic rrd graphs in png format with fixed dimensions. I am looking to adjust the layout based on browser window size - showing the graphs in 1 column if the width is below a certain threshold, and in 2 columns if it exceed ...

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

Automatically substitute a term with a clickable link

Is there a way to automatically turn every word into a hyperlink? I have specific words that need to be linked. For example, I want Ronaldo (Only for the First Appearance) to link to a certain page. However, my attempted method did not work. <p> Ro ...