Is there a way to achieve a flex layout without having to modify the HTML structure?

I am working on achieving a specific layout using CSS:

https://i.stack.imgur.com/xg7ZA.png

This is the HTML structure I have and it cannot be altered, along with what I have managed to add with CSS. It's almost there but missing something:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item-1 {
  flex: 50%;
}

.item-2 {
  flex: 50%;
}

.item-3 {
  flex: 100%;
}
<div class="container">
  <div class="item-1">
    This is an image
  </div>
  <div class="item-2">
    This is a title
  </div>
  <div class="item-3">
    Short desc goes here.
  </div>
</div>

Any suggestions on how to resolve this issue? Thank you!

htmlcssflexbox

Answer №1

If you're in need of a solution using a grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*creating two equal width columns.*/
  grid-template-rows: auto auto;
  /*defining two rows with auto height. */
  grid-gap: 10px;
}

.item-1 {
  grid-row: 1 / 3;
}

.item-2 {
  grid-row: 1 / 2;
}

.item-3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
<div class="container">
  <div class="item-1">
    This is an image
  </div>
  <div class="item-2">
    This is a title
  </div>
  <div class="item-3">
    Short description goes here.
  </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

Positioning buttons and elements on top of a BootstrapVue Carousel slide: a handy guide

Can different elements be positioned on the BootstrapVue Carousel slide without restrictions, such as in any corner or position? I have attempted to accomplish this by nesting additional elements within <b-carousel-slide></b-carousel-slide> ...

csstwitter-bootstrapvue.jscarouselbootstrap-vue

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

After extensively researching, I have come across numerous articles advocating for the use of transform and opacity for achieving smooth CSS transitions. An example can be found here: The prevailing notion always revolves around: ...the optimization ...

javascripthtmlcssreactjsstyled-components

HTML checkbox URL

Can you design an HTML checkbox form that generates a URL format like this: ?cat=cars+tree Currently, with the following code: <form name="input" action="/" method="post" > <br />Select Categories: <br /> <input type="checkbox" name ...

htmlurlcheckbox

What is the best method for combining several variables into a single one using a parameter?

On the webpage, there is a table containing 11 checkboxes. I am looking to create a keyword that allows testers to input just 1, 2, or 3 to select a specific checkbox without needing multiple lines of element variables. Here are the elements: xpath=(//in ...

cssseleniumxpathrobotframework

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

htmlcss

Discrepancy detected in AGM Map printout

When attempting to print my Angular AGM Map from Chrome, I noticed a large grey gap in the map. This gap is visible even when "background graphics" are turned off and it causes the map image below it to shift downwards. If you want to reproduce this issue ...

cssangulargoogle-maps-api-3printingangular-google-maps

Interact with webpage dropdown menus using Python

I'm currently working on a Python script that interacts with a webpage, specifically , to retrieve a (DNA sequence in fasta format) file. The file is automatically downloaded when a user clicks on a dropdown menu. Here's the dropdown menu: Dow ...

htmlcsspython-3.xselenium

Trouble with CSS positioned image rendering in Internet Explorer? Z-index not solving the issue?

I've been working on a timeline project where the completed sections should have a green background with a check mark image in the foreground. It appears correctly in Firefox, Chrome, and Safari. However, in IE 7 and 8 (and possibly 9), the layout is ...

htmlcssinternet-explorercross-browser

Position the text alongside the Facebook emblem

I am having trouble getting the text Follow Us to align on the far right next to the Facebook Icon. I added the float:right property, but it is not working as expected. Here is the code snippet: <a href="#" target="_blank" style="font-family: Arial, ...

htmlcss

Align a div to the bottom of a column using Bootstrap 4 - Vertical Alignment

I'm working on a layout with two columns - one on the left and two on the right. How can I ensure that the last element in the right column aligns with the bottom of the left column? <!DOCTYPE html> <html lang="en> ... (Bootstrap core ...

htmlbootstrap-4

Display/conceal within a jQuery fixed navigation bar (center-aligned)

I am facing challenges with creating a sticky menu that shows/hides with a click button. Considering abandoning the show/hide feature altogether and rebuilding it from scratch in the future. Two major problems I have identified: How can I make the sho ...

javascriptjqueryhtmlcss

CSS for leaving white space at the end of one third of a container

Currently developing a website and facing an issue with the layout: I am trying to create 3 columns of equal height with each column taking up one-third of the width. However, there seems to be a small white gap on the right side of the last column. Here ...

htmlcss

Is it possible to modify the CSS of a parent element in vue.js only for the current router route?

I am trying to modify the parent component's style without affecting the CSS of other components. Here is an example from my code: App.vue <div class="page-content"> <router-view ref="routeview"></router-view> </div> rou ...

cssvue.js

Utilize a viewpoint alteration alongside a floating effect on a specific element

I thought this would be an easy task, but I seem to be missing something as it doesn't work for me. The goal is to use the perspective() and rotateY() functions in a transform to create a perspective effect on an element. Additionally, there should b ...

javascripthtmlcssreactjsmaterial-ui

Modifying the HTML file won't be immediately visible in browsers

I encountered a frustrating issue while working on my website. Despite making changes to the code, the browsers are not reflecting the updates. This problem is occurring in Internet Explorer, Google Chrome, and Firefox. Initially, I had a div with a link ...

htmlcssinternet-explorergoogle-chromefirefox

Eliminate the grey border located above the arrow in the Bootstrap tooltip

Is there a reason why a thin border is showing up on all of my Bootstrap tooltips? I have looked extensively for answers but have not been able to find anyone else having the same issue. This border appears consistently in all of our MVC projects, and we h ...

csstwitter-bootstrapmodel-view-controller

json - {"response":{"messageTitle":"Message Delivered"}}

I'm new to using ajax, but it seems like the solution to my issue. I have a PHPmailer form on indk.org/contact.html that opens a new window displaying {"success":{"title":"Message Sent"}} when you hit submit. How can I prevent this from happening or ...

phphtmlcssajax

What are some alternatives to tables for displaying two lines of headings and corresponding data?

Here is a snippet of HTML code I am working with: <div><span class='top'>Answered</span></div><div id="hour">15</div> <div><span class='top'>Not Answered</span></div ...

htmlcss

unable to retrieve real-time data using a search bar

I'm working on a drop-down menu of locations/Regions with a search box nested inside. The image shows a list of places followed by regions. The region section is static, while the rest of the places are fetched from a database. Currently, I can searc ...

phphtmltwitter-bootstrapsearchdropdown

How can I overlay a background image on top of another div?

This inquiry might not be the most trendy, but I am seeking guidance on the best approach to tackle this task, utilizing HTML, CSS, and Bootstrap. For reference, something similar to the image at this link. ...

htmlcssbootstrap-4