Creating a layout with two div containers and an image placed next to each other

I am trying to create a design with two divs, each with a different background color, and an image placed on top of the divs but positioned on the left side. The challenge is to ensure that the image takes up 50% of the size on any device so it perfectly matches the background colors of both divs.

Below is the code snippet I am currently working with:

.upper {
  background-color: #fff8f0;
  width: 100%;
  height: 288px;
  position: relative;
}

.lower {
  background-color: #ffe9cd;
  width: 100%;
  height: 412px;
  position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<section class="Bs">
  <div class="row">
    <div class="col-lg-6">
      <div class="upper">
      </div>
      <div class="lower">
      </div>
    </div>
    <div class="col-lg-6">
      <img src="picture/biblestudy.jpg" alt="Bible study people">
    </div>
  </div>
</section>

Check out the image and background color here.

Thank you for your help!

htmlcssbootstrap-4

Answer №1

Take a look at the code in action on JS Fiddle

I hope you find it helpful. 

.bg {
  position: relative;
  height: 360px;
}
  
.bg-upper {
  background-color: #fff8f0;
  width: 100%;
  height: 70%;
}

.bg-lower {
  background-color: #ffe9cd;
  width: 100%;
  height: 30%;
}

.bg-image-container {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-image {
  max-width: 100%;
  max-height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to put two div and image side by side</title>
  <meta name="description" content="https://stackoverflow.com/questions/62041148/how-to-put-two-div-and-image-side-by-side">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <section class="container-lg">
    <div class="bg">
      <div class="bg-upper"></div>
      <div class="bg-lower"></div>
      <div class="bg-image-container">
        <img class="bg-image" src="https://teleiosresearch.com/wp-content/uploads/2019/01/BibleStudy-1.jpg" alt="Bible study people">
      </div>
    </div>
  </section>
  </body>
</html>

Answer №2

.upper {
  background-color: #fff8f0;
  height: 80vh;
}

.lower {
  background-color: #ffe9cd;
  height: 20vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Bs">
  <div class="row">
    <div class="col-6">
     <div class="row">
      <div class="col-12 upper">
      </div>
      <div class="col-12 lower">
      </div>
    </div>
    </div>
    <div class="col-6">
<div class="row">
      <div class="col-12 upper">
      </div>
      <div class="col-12 lower">
      <img src="picture/biblestudy.jpg" alt="Bible study people">
      </div>
  </div>
    </div>
  </div>
</section>

Answer №3

The code snippet you provided displays the image in the top right corner.

Below is the code that includes an image with a width of 50% always positioned at the top left on various resolutions.

.Bs {
  background-color: red;
}
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<section class="Bs">
  <div class="row">
    <div class="col-12">
      <div class="upper">
        <img src="https://images.unsplash.com/photo-1590541576391-dfc42314a7ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" width="50%" alt="">
      </div>

    </div>
    <div class="col-6">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus illum repudiandae laborum magni
      exercitationem fuga, quas reprehenderit repellat. Eius tenetur dolores quos quisquam cumque ipsum
      atque debitis laudantium minima dolore.

    </div>
    <div class="col-6">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus illum repudiandae laborum magni
      exercitationem fuga, quas reprehenderit repellat. Eius tenetur dolores quos quisquam cumque ipsum
      atque debitis laudantium minima dolore.
    </div>
  </div>

</section>

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

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

I'm having trouble achieving a 2 x 2 grid that is centered on my screen. The code snippet below shows what I have so far in the HTML file. Just to provide some context, this project is meant for a native mobile application. <ion-header> <i ...

htmlcssangularionic-frameworkstyling

Generating an interactive 3D model of a web page embedded within a virtual environment

Exploring the concept of rendering a webpage within a 3D Scene using Three.js has been quite challenging. Most examples I come across seem to render something that is not interactive when clicked on. I've stumbled upon older videos showcasing clickab ...

htmlthree.js

Trouble with Div Display

I have a section below my form that will show an alert message if there is an error. The issue I am facing is that if I use the inline-block property, everything within the section will be displayed in the alert color. I specifically want the background- ...

htmlcss

The button labeled "issett" is malfunctioning

Hey there, so I've created a registration form using jQuery and PHP that validates user input in real-time as they type. Once all the information is correct, I want to allow the user to submit the form. My plan is to write an if statement that checks ...

javascriptphpjqueryhtml

Styling the scrollbar with a left margin in CSS

I have a setup where there is a flexbox with three columns, each of which can be scrollable depending on their content. Here is the Codepen link for reference: https://codepen.io/michaelkonstreu/pen/GRmzeJy My goal is to add a small margin left between t ...

css

Conceal an element within the initial row of the table

Below is the table structure: <table id="mytable"> <tr> <td>name</td> <td> <a id="button1" class="button">link</a> </td> </tr> <tr> <td>name2</td> ...

jqueryhtmlcss

Align all elements to the center and arrange them in a vertical column

I have implemented a form using Bootstrap 4 and here is the code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eaf2ec">[email protected]</a&g ...

csstwitter-bootstrapbootstrap-4

Is it advisable to solely rely on CDN for incorporating Bootstrap JS components, or are there any potential drawbacks to

I'm in the process of customizing Bootstrap using my own styles, by utilizing a local version of the source SASS files as outlined in the official documentation, and importing them into a custom.scss file. My main focus is on altering the visual aspe ...

javascripttwitter-bootstrapsassbootstrap-4cdn

Get the adhesive substance to no longer have a sticky texture

I am in the process of creating a portfolio for my upcoming exam. As part of the portfolio, I am required to write several articles. To showcase these articles, I have designed a homepage that displays the different subjects I have covered. When a user cli ...

jqueryhtmlcssscrollnavigation

How come my padding isn't working on an anchor tag, but it works fine on a button element?

Consider this code snippet: .ul { list-style-type: none; } .li { display: inline-block; border: black solid 1px; margin-left: 20px; } .btn { padding: 20px; text-transform: uppercase; } <ul class="ul" ...

htmlcss

The props are not receiving the margin property

I am working on a styled component that needs to receive a prop to determine if it should have a margin on the left or right. It seems that there is a syntax issue that I am struggling with. Here is the code snippet: const FormDiv = styled.div` displa ...

cssreactjsstyled-components

Restoring the style on <a> renders it ineffective

Recently, I encountered an issue where the functionality of the <a> tag is lost when using this CSS code: a {all:unset;}. Does anyone have any suggestions on how to address this problem without completely avoiding the use of that particular code sn ...

htmlcss

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

javascripthtmlcssvue.js

Customize cursor using CSS

I have a div with overflow: hidden that I am making scrollable by allowing the user to click and drag the background. There are links and buttons within this space. Here is the CSS I am using for this: #div-grabscroll { cursor: url(../img/op ...

javascriptcsshtmlcursor

What is the process for linking my website hosted on an external server to the database running on XAMPP on my local machine?

Currently, I have been working on a project website using XAMPP. The site includes a database where users can register and store their information. Initially, my plan was to test the website with friends by physically giving them my laptop. Unfortunately, ...

phphtmldatabasexampplocalhost

How can I line up elements in different divs when the width is adjusting based on the window size?

Trying to align a search input and a result element in separate containers when the window size changes. Looking for a solution without using Javascript. One window size: https://i.sstatic.net/LiQtY.png A smaller window: https://i.sstatic.net/dgj4I.png C ...

htmlcsswebresponsive-design

`Modify the title property of raphael elements`

I am currently using raphael.js for drawing and I would like to customize the title attribute (such as changing color, font size, etc). circle.attr({ title: 'This is a circle.', fill: 'red' }); You can view my example on jsfi ...

htmltooltipraphaelcustomizationtitle

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

javascripthtmlcssresponsive-design

Self-moving button container

I have a challenge involving a button and a sliding div. When the button is clicked, I want the div to slide. The problem arises when I place the button inside the sliding div - it ceases to slide. I understand the issue at hand, but I'm unsure of ho ...

javascriptjqueryhtml

Guide to incorporating Circular Animation within a Div Container

Currently, I am making changes to this jsfiddle. However, the issue I'm facing is that I can't get it to circle around in a specific direction. .dice-wrapper { position: absolute; top: 209px; right: -9px; display: -webkit-box; ...

javascriptjqueryhtmlcss