inline-block: the first div appears smaller than the second div, creating a gap that is filled within the layout

Question

inline-block: the first div appears smaller than the second div, creating a gap that is filled within the layout

I need help with aligning three divs, named a, b, and c. Each div is set to 48% width and displayed as inline blocks. Div a will always be shorter than div b, creating a gap between the bottom of a and the top of c. The heights of a and b may vary on different pages, hence using margin-top:-10px might not work consistently.

Current layout:

Desired layout:

Edit
Mobile:

CSS

div {
     width:48%;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}

@media only screen and (max-width: 600px) {
     div {
          width:100%;
     }
}

HTML

<div style="border-color:red;">a<br>a</div>
<div style="border-color:green;">b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div>
<div style="border-color:blue;">c<br>c<br>c<br></div>

The media query ensures that the three divs are stacked in one column on smaller screens. Hence, the order of the divs matters.

html css

Answer 1

Answer №1

Dealing with the dual layout can be a bit tricky. By keeping the same HTML structure, you can achieve it by using selectors for the elements and another for the "b" item to handle float and margin.

(Try changing the media width in the code snippet to see how the layout changes)

div{display:inline-block;width:48%;border:1px solid red;float:left;clear:left}

div.b{clear:none;float:right;margin-right:2%}

@media only screen and (max-width: 200px) {
     div {
          width:100%;float:none;clear:both;
     }
     div.b{margin-right:0;float:none;clear:both;}
}

<div class="a">a<br/>a<br/>a<br/>a</div>
<div class="b">b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/></div>
<div class="c">c<br/>c<br/>c<br/>c</div>

Answer 2

Dealing with the dual layout can be a bit tricky. By keeping the same HTML structure, you can achieve it by using selectors for the elements and another for the "b" item to handle float and margin.

(Try changing the media width in the code snippet to see how the layout changes)

div{display:inline-block;width:48%;border:1px solid red;float:left;clear:left}

div.b{clear:none;float:right;margin-right:2%}

@media only screen and (max-width: 200px) {
     div {
          width:100%;float:none;clear:both;
     }
     div.b{margin-right:0;float:none;clear:both;}
}

<div class="a">a<br/>a<br/>a<br/>a</div>
<div class="b">b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/></div>
<div class="c">c<br/>c<br/>c<br/>c</div>

Answer 3

Answer №2

Ensure that all div elements have the same minimum height.

div {
     width:50%;
     min-height:350px;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}

Answer 4

Ensure that all div elements have the same minimum height.

div {
     width:50%;
     min-height:350px;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}

inline-block: the first div appears smaller than the second div, creating a gap that is filled within the layout

Answer №1

Answer №2

Similar questions

Discover the step-by-step guide to implementing pagination using NG-ZORRO-Andt in your Angular

Choosing the Angular5 model

How can I modify the class attribute in JavaScript when the onclick event is triggered

a basic three-tier flexible design with alignment to the lower right side

jQuery.post() function encounters issues with data not being properly posted

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The server is unable to process the request sent by the browser or proxy. This error occurred in a Flask web application

What is the best way to display the loan detail and credit detail tables beneath the application detail section that is currently blank?

In order to properly adjust the HTML content when resizing the window, it

How come this particular design is being passed down from a predecessor (and not a direct parent) div?

Unusual actions regarding flexible CSS style sheet

Follow us text placed in front of social sprite images all aligned on the same line

<select> Choices are updated without the need for AJAX

Content is cleared from the leaflet popup upon first closure

Position the ion-radio element in the middle of the layout

Challenges I encountered with styling my navigation bar using CSS

What is the best way to showcase an unordered list alongside corresponding images, with a paragraph text next to each one?

Unable to get Bootstrap 4 overflow hidden to function properly within card layouts during animated transitions

Is there a way to modify the background color of ::before when hovering over it?

Angular components are not receiving the Tailwind CSS attributes applied to :root classes

A div element floating next to another div element with a width of 100%