``There seems to be a problem with the margins within a flex container

Can someone assist with fixing a bug related to the .half-img2 element's margin-top property?

It is necessary for the heights of these two images to be equal to that of the main image.

Here are the links for reference:

http://prntscr.com/94uqok

http://plnkr.co/edit/Dvj5HfG6hJqvYPxr0ljJ?p=preview

Html:

<style type="text/css">
        .test{
            display: flex;
        }
        .test>div{
            flex: 1;
        }
        .test .main-img{
            flex-grow: 2;
        }
        img{
            width: 100%;
        }
        .half-img{
            margin-left: 10px;
        }
        .half-img2{
            margin-top: 10px;
        }
        </style>
<div class="test">
            <div class="main-img">
                <img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
            </div>
            <div class="half-img">
                <div class="half-img1">
                    <img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <div class="half-img2">
                    <img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
                </div>
            </div>
        </div>
htmlcssflexbox

Answer №1

Regarding the div layout issue, I will disregard the image sizes since they are not pertinent to the problem at hand.

It appears that a strategic use of margins and flex-column div layout is essential in this case.

The proposed layout would resemble something like the following code snippet:

* {
  box-sizing: border-box;
}
.test {
  display: flex;
  width: 80%;
  margin: 1em auto;
  border:1px solid green;
}

img {
  display: block;
}

.test div {

}

.main-img {
  flex:2;
  margin-right: 10px;
  background: lightblue;
}

.half-img {
  display: flex;
  flex-direction: column;
  height: 250px;
}

.half-img {
  flex:1;
  display: flex;
  flex-direction: column;
}

.half-img div {
  flex:1;
  background: lightblue;
}
.half-img1 {
  margin-bottom: 5px;
}

.half-img2 {
  margin-top: 5px;
}
<div class="test">
            <div class="main-img">

            </div>
            <div class="half-img">
                <div class="half-img1">
                  </div>
                <div class="half-img2">

                </div>
            </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

A guide on how to use Bootstrap to align elements at the center of a div container

My attempt to center an image in the div didn't quite work out as planned. Here's the snippet of my html and css: .col-xs-4 { background-color: lightgrey; width: 300px; height: 200px; border: 6px solid green; padding: 25px; margin: ...

htmlcsstwitter-bootstrap

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Currently, I am utilizing the NgbTypeahead component from ng-bootstrap. The issue I am facing is that when I place the typeahead component within a scrollable element and proceed to scroll down, the position of the dropdown container remains unchanged. &l ...

cssangularng-bootstrap

Is Click and Mousemove available for iPhones?

I am experiencing some difficulties with mouseover and click events. While they work fine on desktop and laptop web browsers, they do not seem to function on the Safari browser of an iPhone. Below is the code snippet causing the issue: <script type="te ...

javascriptjqueryhtmliosiphone

Grid layout showcasing masonry gallery

I've spent some time looking for a Masonry gallery with a grid layout, but couldn't find one that suited my needs. So, I decided to create my own. I implemented a customElement with grid layout, but encountered an issue when trying to assign grid ...

javascriptcssgrid-layoutcss-grid

Ensure the div has a scrolling feature activated when the content surpasses the height limit

I am attempting to make the middle div #content scroll when its content exceeds the available height (calculated as innerWidth - header height - footer height). However, rather than scrolling, the div has a scrollbar that is unresponsive, and the entire p ...

css

What is the best way to generate a one-level breadcrumb using Jquery?

In certain applications, I am interested in implementing a single-level breadcrumb trail that looks like this: Home -> Product -> Applications -> Application 1 Since 'Applications' can have several children, I want to incorporate a dro ...

javascriptjqueryhtml

What steps should I take to fix an error in my code?

My current objective is to write a program that generates a square with dimensions of 200 pixels by 200 pixels. The square should be colored using specific RGB values: red (red value of 255), green (green value of 255), blue (blue value of 255), and magent ...

javascriptcssfunctionif-statementdebugging

Begin an HTML document by loading it with xml.Load

I am looking to access an HTML document stored as a string retrieved from a StreamReader on the web and then convert it into an XMLDocument. Currently, I am using the following code: XmlDocument doc = new XmlDocument doc.Load(string containing the retrie ...

c#htmlxmldocument

The content displayed on body.innerHTML does not match the information found in the page source code

Why is the page source newer than the document.body.innerHTML, and how does this happen? While watching a video on YouTube and inspecting the page source in Chrome's console, I noticed that YouTube assigns a unique signature to all videos. Here are t ...

javascripthtmlyoutubeconsole.log

The specified CSS background image is not correctly aligned with the dimensions of the selector

I have multiple non-local images that I want to use as background images for classes with a width of 500px and height of 330px. Even though these dimensions are specified in the CSS properties for the class, the background: url('http://www.example.com ...

htmlcssimage

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Try utilizing MutationObserver to monitor changes in various nodes

I am faced with a situation where I have elements in my HTML that are dynamically populated with text from an API. My goal is to check if all these elements have a value and then trigger a function accordingly. The current code I have only allows me to obs ...

javascripthtmlmutation-observersmutation

Challenges with the Task List Board

I'm facing a bit of a challenge with this task. As a newcomer to JavaScript, I've set out on a quest to create a task list board where users can input tasks along with dates and times. The goal is for these entries to appear inside a photo using ...

javascripthtmlcssfunction

A guide on dynamically accessing an image from the src directory using props in a Vite + React application

export default function Card(props) { return ( <card> <img className={cardCss.card__img} src={`../assets/imgs/card/${props.img}`} alt="" /> <div className={cardCss.card__stats}> ...

cssreactjsreact-propsdynamic-importvite-reactjs

Need help with a countdown function that seems to be stuck in a loop after 12 seconds. Any

I am facing an issue with a PHP page that contains a lot of data and functions, causing it to take around 12 seconds to load whenever I navigate to that specific page. To alert the user about the loading time, I added the following code snippet. However, ...

javascripthtml

Modify the CSS of one div when hovering over a separate div

I've been working on a simple JavaScript drop-down menu, and it's been functioning correctly except for one issue. When I move the mouse out of the div that shows the drop-down menu, it loses its background color. I want the link to remain active ...

javascriptcsshtmlonmouseout

Column of Flexbox showcasing items that have been translated

I'm having an issue with positioning items in a div of 11 elements divided into 2 columns. The first row and the last item are positioned correctly, but the items in between are shifted to the left. I've been using flexbox for a while, but I can& ...

cssflexbox

Dropdown menus in HTML and Ruby on Rails are not responsive on mobile devices and cannot

<div class="dropdown pull-right"> <a id="dropdown" data-toggle="dropdown" aria-haspopup="false" aria-expanded="true"> <%= theme_icon_tag "settings" %> </a> <ul class="dropdown-menu" aria-labelled ...

htmlruby-on-railsmobiledrop-down-menubootstrap-4

What is the best way to synchronize Bootstrap styles across various HTML files?

Currently, I am part of a group project in school where I am just beginning to learn about html, css, and bootstrap. Each of us has been tasked with creating individual html files to represent web pages for our website, and then we will apply css styles t ...

htmlcsstwitter-bootstrapbootstrap-4

My element's display property is being changed to none by Angular 6

UPDATE: Even after removing all references to TS functions from the HTML template, the issue persists. The problem remains even if I clear out the contents of the SCSS classes side-nav-submenu and submenu-open. However, the problem disappears when I remove ...

htmlcssangulartypescript