Arranging elements on the top of an image

I am struggling to replicate a design and align some items properly without resorting to absolute positioning. The design I want to achieve looks like this https://i.sstatic.net/HaOXT.jpg

https://i.sstatic.net/EovkI.jpg

The grey area represents a section with a layout in mind. I am aiming for a row with three col-md-4 columns. In the first column, there is text that should be vertically aligned in the middle. Here's the code snippet:

<div class="col-md-4">
    <div class="">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim</p>
    </div>
</div>

The challenge is achieving vertical alignment only in the first column without affecting the other columns. Column 2 is simple with just an image, but column 3 featuring two rectangles spanning columns 1 and 2 raises questions about using absolute positioning. Will responsiveness be compromised?

Another issue is that the grey area is set to 100vh, causing some elements to overflow without pushing content down due to absolute positioning.

To showcase my issues, here is a fiddle link: JSFiddle

Any suggestions on achieving this specific layout would be highly appreciated.

Thank you

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Challenge 1 Ensure that the content in the first column is vertically centered.

This recent update to your design has successfully aligned the content within your initial column to the center.

https://jsfiddle.net/abc123/7/

In summary, I have implemented a few new classes in strategic locations.

<section class="row my-row-section">
        <div class="col-md-4 my-row-section-info">
            <div class="my-row-section-info-content">

I've also introduced this CSS code snippet:

.my-row-section {
  display: flex;
  align-items: stretch;
}

.my-row-section-info {
  display: flex;
}

.my-row-section-info-content {
  align-self: center;
}

Next step - images!

To start off, make sure the container has bottom padding, measured in px, as it depends on the varying height of the overflowing images.

Column 1 and Column 3 need to be positioned as relative, with all internal images set to position absolutely. Convert any top or left values to percentages and adjust the width accordingly. Utilize the bottom property for alignment from the base if needed.

The image overlapping columns 1 and 2 should not belong to any specific column but rather be placed inside either .container or .row with an absolute position. Its immediate parent element should be positioned relatively. You can utilize 33% for the left positioning and apply -50% to translateX to place it precisely between columns 1 and 2, presuming they share equal widths. Adjust the bottom property to align it correctly from the bottom.

Hopefully, this clarification helps.

UPDATE

To aid comprehension, refer to this illustrative image

https://i.sstatic.net/xyz987.jpg

.container features both margin and padding-bottom

Both .container and .column-3 will possess a relative position

Image boxes are absolute positioned, color-coded based on their position within the DOM structure.

Furthermore, I recommend you explore more about relative and absolute positioning techniques.

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

Resolve issues with vue js checkbox filtering

As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...

javascripthtmlvue.js

What is the best way to ensure that the Bootstrap navbar remains collapsed at all times, regardless of the size of the

Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...

cssnavbarbootstrap-5collapsable

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

jquerycssaccordion

Guide on making a submit and close button within an overlay

Seeking a button to both submit and close an overlay window. The button code is as follows: <a href="javascript:additem('Info to add here', 10.00,1);" role="button"><button class="purchase btn btn-warning">Select</button></ ...

javascripthtml

Styling certain UL and LI elements with CSS properties

Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...

htmlcsscss-selectors

problem with CSS negative margin

When trying to position the navbar inside a div with the class main using negative margins, it causes issues on small screens when clicking on the toggler icon. How can I address this problem without relying on negative margins? <link rel="stylesheet" ...

htmlcss

Issue with JQuery click() not triggering on a specific div button

I am attempting to replicate a user's click on a website where I have no control over the code. The specific element I am trying to interact with is a div that functions as a button. <div role="button" class="c-T-S a-b a-b-B a-b-Ma oU v2" aria-dis ...

javascriptjqueryhtmlcsssimulation

Button from Material-UI vanishes upon being clicked

I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...

javascriptcssreactjsmaterial-ui

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange. My idea is to create additional CSS files named "orange-as-primary.css", "purple- ...

csssassbootstrap-5color-scheme

Text that appears as an HTML button is displayed after being compiled using the $

I am attempting to generate a pop up dialog with two buttons using JS code in angular. The script below is what I am using to create the buttons... var html = $('<button ng-click = "cancelAlert()" > Cancel</button > <button ng-click="c ...

javascripthtmlangularjsbuttondialog

Incorporate geographical data from a JSON file into my Google Maps application

Hey there, I'm a newbie on this forum and could really use your expertise. I've put together an html5 page with Google maps using the API key from Google (My code is shown below), it's working fine with a central marker in place and loads pe ...

javascriptjsonhtml

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below. <div style="background: rgb(247, 247, 247);"> <button class ="xyz" disabled="disabled">Button1</button> </div> ...

jquerycssbuttonapply

Utilizing the CSS :not() selector within a nested table

I am having an issue with my AjaxControlToolkit where the main-page CSS is affecting the inner "calendar" popup. To illustrate what I need, what I've tried, and the temporary workaround, I have simplified everything into a one-page example. I am in s ...

csscss-selectorsajaxcontroltoolkit

Dealing with text overflow within a column and ensuring that the text always expands horizontally to align with the column width

I have implemented a file input feature that displays the selected file's name in a column. However, when the file name is too long, it expands vertically which causes readability issues. There is an option to force the text to expand horizontally, b ...

htmlcssangulartypescriptoverflow

Default Slider Features

I am in need of assistance to create a slider similar to this example. Can anyone help me with this? <link type="text/css" href="ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script ...

jquerycssslider

PHP HTML Decoding Unveiled

Dealing with HTML that appears like this can be challenging: <font color=3D=22=236EAED2=22 style=3D=22font-siz= e:13px;font-family:arial;=22><B>Some Info Here</B></font></= A></td></tr><tr><td><font ...

phphtmlencodingcharacter-encoding

Using the ternary operator in PHP to output various statuses depending on an event's status in a SQL database

When the status is 1, it's referred to as an "Active Insurance Event," and when it's 2, it becomes a "Completed Insurance Event." if(!empty($ins_event)) { echo "<tr><td>&nbsp;<img src='/check-icon. ...

phphtmlsqlcss

Animate text and div elements with bounce or fade-in effects when they appear on the screen in a React application

Animating the elements of my website is a simple task for me, however I am looking to have them animate only when they are visible on the screen without relying on pixels or offsets. I want the animations to be responsive, even in phone mode, without hav ...

cssreactjsanimationwow.js

Override CSS properties / prevent inheritance

I'm currently facing a challenge in Wordpress where I need to insert a link quickly, but there are intricate styles applied to all the anchor links within a specific section. Here is a snippet of the CSS selector and styles being used: div.content-ro ...

htmlcss

Bootstrap encountered an issue with altering header information

I've been trying to set up a notification system that plays a sound every time someone makes a new post. I'm working with Bootstrap 4 and I've tried inserting JavaScript into the functions page, but no matter how many times I call the ' ...

javascriptphpbootstrap-4