Arrange divs in a vertical stack while maintaining a layout with two columns

I am trying to create a layout with two stacked `div`s on one side, and then have a single column on the other side that is the same height as the left `div`s.

Something similar to this:

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

I currently have the two `div`s and a sidebar, but I'm having trouble getting the two `div`s to stack properly.

Here is my current progress on Fiddle

@import url(https://fonts.googleapis.com/css?family=Oxygen);
 body {
  background-color: #222;
}
.description h1 {
  text-align: left;
  padding: 20px;
}
#wrapper {
  text-align: center;
}
.description,
.sidebar,
.demo-container {
  display: inline-block;
  vertical-align: top;
}
.description {
  background: #eee;
  width: 50%;
  font-family: "Oxygen";
  font-size: 14px;
  color: #000;
  line-height: 1.2;
}
.sidebar {
  background: #eee;
  width: 15%;
  height: 575px;
}
.demo-container {
  background: #eee;
  width: 50%;
  font-family: "Oxygen";
  font-size: 14px;
  color: #000;
  line-height: 1.2;
}
<div id='wrapper'>
        <div class="demo-container">
          <h1>Title</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
        </div>
        <div class="description">
          <h1>Title</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
        </div>
        <div class="sidebar">
        </div>
      </div>

htmlcss

Answer №1

Stop overcomplicating things, here's a simple example of achieving what you need using flexbox

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.flex {
  display: flex;
  flex-basis: 100%
}
.fl {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 5px;
  justify-content: space-between
}
.flex-item {
  border: 1px solid black
}
.flex-item:not(:first-of-type) {
  margin: 10px 0 0
}
.sidebar {
  border: 1px solid black;
}
<div class="flex">
  <div class="fl">
    <div class="flex-item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit</p>
    </div>
    <div class="flex-item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit
        ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus.
        Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
    </div>
  </div>
  <div class="fl sidebar"></div>
</div>

Answer №2

Simply insert 

<div class="sidebar"></div>
before the other two divs and then apply a right float to all three of them. You can view an example in this fiddle https://jsfiddle.net/y71tkmtw/1/

  .description,
  .sidebar, .demo-container {
    float: right;
    margin: 40px;
  }

Answer №3

To create a new layout, wrap the two divs on the left-hand side in another <div> element with a float:left property. Then, set the sidebar to float:right.

.left-container {
  width: 85%;
  float: left;
}

.sidebar {
  background: #eee;
  width: 15%;
  height: 575px;
  float: right;
}

Check out the fiddle here: https://jsfiddle.net/dncgytef/2/

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

How to ensure the height of an image in a Bootstrap flex row matches the

I just updated to the latest Bootstrap 5.0 beta version and I'm working with this html code snippet: <div> <div class="d-flex flex-row"> <img src="img/funny.png" alt=""> ...

htmlcsstwitter-bootstrapbootstrap-5

Add a specific CSS class to a div element depending on the status of a checkbox

Is there a way to dynamically append data based on the selected items in a checkbox table? I want to be able to add multiple or single items by clicking the add button. The key is to avoid appending duplicate data that already exists in the view. Any sugge ...

javascripthtmljquery

CSS - Implementing Multi-Line Text Wrapping

Can anyone provide some guidance on how to handle an issue where having too much text in the description of an image pushes the image up? Thank you. I have created a basic fiddle - resize the window to see them inline. JSFiddle div.gallery { border: ...

htmlcssflexboxalignment

The preventDefault() function is not functioning properly on the <a> tag

As a JavaScript beginner, I decided to create an accordion menu using JavaScript. Although I was successful in implementing it, I encountered a bug in my program. In this scenario, uppercase letters represent first-level menus while lowercase letters repr ...

javascriptjqueryhtmlcss

Display a video-thumbnail in place of a static image when sharing a link

When setting up my website, I made sure to include OpenGraph metadata to customize how it appears when shared on social networks and messaging apps. This includes specifying the thumbnail, title, and description: <meta property="og:title" content="Titl ...

ioshtmlsocial-networkingfacebook-opengraphimessage

Using a personalized font in CSS isn't functioning correctly and is displaying Times New Roman instead

I've been struggling to include a custom font in my project, but it's not working as expected. Here's how I added it to the .css file: @font-face { font-family: 'Open Sans'; src: url('/open-sans.eot'); src: u ...

css

Implement a default dropdown menu that displays the current month using Angular and TypeScript

I am looking to implement a dropdown that initially displays the current month. Here is the code snippet I have used: <p-dropdown [options]="months" [filter]="false" filterBy="nombre" [showClear] ...

htmlangulartypescriptprimeng

Conceal overflow content within a Bootstrap btn-group using CSS styling

Suppose I have a table like the one below: /* CSS Styles for the table */ table.my { width: 600px; } table.my > tr { height: 40px; overflow: hidden; } .tag { background: #b8b8b8; padding ...

jqueryhtmlcssangularjstwitter-bootstrap

Stop the WebGL Three.js container from capturing scroll events

I am working on a full-screen three.js application which serves as the background and I am trying to add overlaid text that can be scrolled. However, my issue arises from the fact that the three.js WebGL container intercepts all scroll events and prevents ...

javascriptcssdomthree.js

Revive the design of a website

As I work on creating my own homepage, I came across someone else's page that I really liked. I decided to download the page source and open it locally in my browser. However, I noticed that while the contents were all there, the style (frames, positi ...

javascripthtmlcss

Uncovering the "parent having two child elements" structure from HTML: A guide

I want to identify all parents with two children in an HTML document. Case 1 <parent> <child> <tag></tag> </child> <child></child> </parent> Case 2 <parent> <parent_and_child> <tag& ...

javascriptjqueryhtml

Dropdown selection returning the text value instead of the designated value

Is it possible to retrieve the text "Region 1" instead of just the value '1' from a dropdown menu in PHP? <select name = 'region' id = 'region'> <option value = '1'>Region 1</option> <select&g ...

javascriptphphtml

Email Coding Problem

This email serves as a confirmation from a MailJet subscription widget. The issue at hand is that the body of the email appears too wide in Outlook, but the header is responsive and displays correctly. I have made several attempts such as setting fixed wid ...

htmlemail

Tips for creating content with ellipsis after every 5 characters

I am new to coding and I need some assistance. I want to truncate text in my navigation bar if it exceeds 5 characters by displaying the first 5 characters followed by an ellipsis. This is to prevent display issues in my nav menu. For example: Input: T ...

phphtmlcss

Ensure that the header stays centered on the page as you scroll horizontally

Below is a given code snippet: header { text-align: center; } /* This section is just for simulation purposes */ p.text { width: 20rem; height: 50rem; } <html> <body> <header> <h1>Page Title</h1> <detail ...

htmlcss

What steps do I need to follow in order to create an AJAX application that functions similarly to node

As someone new to ajax, I am facing challenges while trying to create a forum software similar to nodebb. Despite having developed a php forum previously, its outdated appearance prompted me to seek alternatives like nodebb for a more modern look and feel. ...

javascriptphpjqueryhtmlajax

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...

cssangulartwitter-bootstrapng-bootstrap

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

Why isn't the content of the initial tab in a <section> shown when clicking a link in the side-drawer?

View the JSFiddle here. Within this MCVC, a side drawer is implemented (opened by clicking the top left button) that contains three labeled links: Link One, Link Two, and Link Three. Each link has an href attribute value that starts with "#" concatenated ...

jquerycsshtmlmaterial-design-lite

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss