Trying to get two parent divs in a container div to display in a row with one of the parent divs repeating multiple rows without affecting 2nd parent
I'm creating my WordPress theme from scratch, and this is a template for the posts that appear on the front page that would be added dynamically. I'm also using bootstrap 5 for this.
I have a container div that contains a div that houses the categories. The blog posts are not in a parent div itself because if I put that in a parent div, the image appears above the article title. I'm trying to achieve this look:
How do I achieve this result, especially if I put the article image with the rest of the article-related divs inside a parent div? What would be an ideal way of doing this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>Test</title>
</head>
<body>
<div class="row mx-0 mt-4" style="width: 800px;">
<!-- Article Section -->
<div class="col-12 col-md-2 ">
<img src="https://i.ibb.co/xmMv1Sg/benaja-germann-c-Rc-ZLSE7h-Q-unsplash.jpg" class=" img-fluid mx-auto d-block pb-4 pb-md-0" alt="" style="height: 200px">
</div>
<div class="col-12 col-md-10 col-lg-7 pe-md-5 ">
<div class="row ">
<div>
<div class="mb-1">Article Title</div>
</div>
<div>
<div class=" mb-2">Date</div>
</div>
<div>
<div class="mb-2 "> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repellat officiis aliquam cum praesentium illum quo dignissimos, assumenda rerum reiciendis, aspernatur voluptas! Molestiae alias odio expedita molestias quibusdam consequatur
repudiandae.
</div>
</div>
<div>
<div>
<a href="">Continue Reading</a>
</div>
</div>
</div>
</div>
<!-- Category section -->
<div class="col-3 d-none d-sm-none d-md-none d-lg-block " id="categoryContainer">
<div>
CATEGORIES
</div>
<a href="">
<div class="row px-0 mx-0">
<div class="col-auto me-auto px-0">Test</div>
<div class="col-auto px-0">(10)</div>
</div>
</a>
<hr class="my-0 ">
<a href="">
<div class="row px-0 mx-0">
<div class="col-auto me-auto px-0">Test</div>
<div class="col-auto px-0">(10)</div>
</div>
</a>
<hr class="my-0 ">
<a href="">
<div class="row px-0 mx-0">
<div class="col-auto me-auto px-0">Test</div>
<div class="col-auto px-0">(10)</div>
</div>
</a>
<hr class="my-0 ">
<a href="">
<div class="row px-0 mx-0">
<div class="col-auto me-auto px-0">Test</div>
<div class="col-auto px-0">(10)</div>
</div>
</a>
<hr class="my-0 ">
<a href="">
<div class="row px-0 mx-0">
<div class="col-auto me-auto px-0">Test</div>
<div class="col-auto px-0">(10)</div>
</div>
</a>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>^ Expand the snippet to full page to see the categories section
Solution 1:
Here you go... See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>Test</title>
<style>
#img {
width: 100%;
}
</style>
</head>
<body>
<div class='row w-100 d-flex justify-content-between'>
<div class='col-8'>
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-4 p-4">
<img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
</div>
<div class="col-8 p-4">
<div class="title mb-3">Article Title</div>
<div class="date mb-2">Date</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-4 p-4">
<img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
</div>
<div class="col-8 p-4">
<div class="title mb-3">Article Title</div>
<div class="date mb-2">Date</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-4 p-4">
<img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
</div>
<div class="col-8 p-4">
<div class="title mb-3">Article Title</div>
<div class="date mb-2">Date</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 p-4">
<div>CATEGORIES</div>
<div>Category 1</div>
<div>Category 2</div>
<div>Category 3</div>
<div>Category 4</div>
<div>Category 5</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>