Could Flexbox CSS be used to create a responsive layout like this?

Appreciate your help in advance.

I am facing a challenge with the current layout.

<article>
    <section class="content">1</section>
    <aside class="ads">2</aside>
    <section class="comments">3</section>
</article>

When viewed at full width, I want the comments to be directly below the main content and the aside to the left. However, on mobile devices, I need the comments to appear at the bottom of the page with ads in the middle.

Could it be that I am going about this the wrong way with flexbox? The issue with using float is that if the aside is taller than the main content, the comments end up pushed far down the page.

htmlcsslayoutresponsive-designflexbox

Answer №1

Check out this CSS example.

HTML

<article>
    <section class="content">1</section>
    <aside class="ads">2</aside>
    <section class="comments">3</section>
</article>

CSS for regular view

article{width:870px; margin:0 auto;}
.content{background-color:#0C0; float:left; width:700px; min-height:300px; margin:0 0 10px;}
.ads{background-color:#06F; width:150px; float:right; min-height:450px; margin:0 0 10px;}
.comments{background-color:#F00; float:left; width:700px; min-height:150px;}

CSS for Responsive design

article{width:100%;}
.content{float:none; width:auto; }
.ads{width:150px; float:right; min-height:450px; margin:0 0 10px;}
.comments{float:none; width:auto; }

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

Adjust the dimensions of the icon

My current project involves creating a sidebar with icons and associated text to represent each icon. However, I encountered an issue while trying to adjust the size of the icons within the sidebar using the "useStyles()" method. For some reason, the size ...

cssreactjsmaterial-ui

Convert HTML tables from Yahoo Pipes into an array of JSON objects

Currently, I am experimenting with Yahoo Pipes in an attempt to convert multiple tables within a DIV into an array of JSON objects. At the moment, the HTML is being successfully parsed. Here is my current setup on Yahoo Pipes I envision each table cell ...

htmljsonyahoo-pipes

Utilizing functions for object creation in JavaScript

Having trouble with creating a function that automatically generates an object and then alerts its properties. Can't seem to get the alerts when I click the button. Any assistance would be appreciated. <html> <head> <s ...

javascriptjqueryhtmlfunctionobject

Javascript is experiencing a decrease in the variability of its content

I currently have multiple pages structured like this: <body> <table><tr><td align="center" width="100%"> --PAGE HTML-- </td></tr></table> </body> For a temporary period, I need to change the str ...

javascriptjqueryhtmlcss

Examples of merging responsive design and equal height columns in CSS:

As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to ...

htmlcsslayoutresponsive

Position pictures in the same row in a straight line

I am struggling to align a set of images properly. The screenshot below shows the current layout: My goal is to have all four images lined up in a single row, with any additional images starting on a new row. I have attempted various methods, but none ha ...

htmlcss

Centering navigation using HTML5

I've been struggling a bit trying to build a website, particularly with centering my <nav> tag. Despite reading numerous suggestions like using CSS properties such as margin: 0 auto; or text-align: center, nothing seems to be working for me. Si ...

javascriptcsshtmltwitter-bootstrap

Creating a capsule-shaped button using HTML and CSS:

I'm trying to create a button that mimics the design in the code snippet. Is this method the most effective way, or is there a simpler approach I should consider? It seems like a lot of work just to achieve rounded corners. #p1,#p2{ height:25px; ...

htmlcss

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

Is there a way to determine if jQuery Mobile has already been loaded?

I am dynamically loading jqm and I'm trying to determine if it has been previously loaded in certain scenarios. Is there a method to check for the presence of jqm? ...

javascriptjqueryhtmljquery-mobile

Replace the current picture with a newly uploaded one and keep it consistent

On my webpage, there is an image that I want to be able to replace by clicking on it and selecting a new image from the file uploader without showing the upload button. Once the new image is uploaded, I'd like it to replace the current image, and for ...

javascripthtmljquery

changing the visible style of a div element using JavaScript

I'm having an issue with a link on my webpage that is supposed to show or hide a <div id="po" style="display:none;">some html</div> element. The first time I click the link, the div displays properly. However, after tha ...

javascripthtmlcss

Displaying or concealing dropdown menus based on a selected option

My goal is to have a drop-down menu in which selecting an option triggers the display of another drop-down menu. For example, if I have options like "Vancouver," "Singapore," and "New York," selecting Vancouver will reveal a second set of options, while ch ...

javascriptphphtmlcss

Struggling to dynamically include an identifier to a div element within a Rails helper function

I'm currently facing a bizarre issue. Here's how my view looks: <h1>All Deals</h1> <%= sanitize print_grouped_deals(@deals) %> This is what's in my deals_helper.rb file: def print_grouped_deals(grouped_deals_by_date ...

htmlcssruby-on-rails

Angular Material: div not being filled by layout-fill

<!-- Container Div --> <div layout-fill> <!-- Image Div --> <div layout="column" layout-align="center center" class="coverImage" layout-fill> <md-content class="md-padding"> Sample Text Here ...

javascriptcssangularjsflexboxmaterial-design

Creating custom CSS for Styled Components in ReactJS

I'm struggling with CSS in React using styled components. Below is the code snippet I am working with: import React from 'react'; import { Navbar, Container, Row, Col } from 'reactstrap'; import styled from 'styled-components& ...

javascriptcssreactjsjsxstyled-components

What is the process for customizing the color of the focused label in Material UI through styling?

Recently, I delved into the world of JSS for styling and ran into an intriguing issue. My goal was to modify the color of a label in an InputLabel component when it is in focus state. After some tinkering, I managed to achieve this using the code snippet b ...

cssreactjsmaterial-uijss

Ways to determine if a new set of input values duplicates previous rows in an array

My form has an array of input fields. Is there a way to validate each row's inputs and ensure that they all have at least one unique value in any field, preventing identical rows? For example, the 2nd row should only be allowed to have a maximum of ...

javascripthtmlarraysvue.js

Here is a step-by-step guide on how to use JavaScript to eliminate the page title, URL, date and

When printing a page using window.print, is there a way to exclude the page title, URL, page number, and date/time from appearing? ...

javascripthtmlcss

Switch up the linear gradient background periodically

Is there a way to change the background after a certain amount of time? It seems to work fine if the background color is just a solid color, but when it's a gradient as shown in the code below, the solution doesn't seem to work. Any suggestions f ...

javascriptjquerycsshtml