CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
katie hudson
katie hudson

Reputation: 2893

Aligning elements on top of image

I have a design I am trying to replicate but I am having issues aligning some items and was wondering what the best way to do this would be because I want to try and avoid absolute positioning if possible.

The design looks like the following enter image description here

enter image description here

So they grey area is a section. What I envisioned was a row containing three col-md-4 columns. Within the first column I have some text which should be vertically aligned in the middle. So I have the following

<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 problem is that it only seems to align it vertically in the middle if I apply it to the whole section, and this makes the other columns have their content vertically aligned, which I don't want. So I need to somehow only make this vertically aligned.

Second column is pretty straight forward, just a single image.

Where I am having an issue is with column 3, and the two rectangles partly in column one and column 2. I presume I have to use absolute positioning for this? Will this impact it in terms of responsiveness?

The second issue is that the grey area is set to 100vh. However, some of these rectaingles go out of this area and because they are absolutely positioned, they do not push the content down.

I have reproduced a fiddle which should demonstrate my issues, you may need to expand the preview area JSFiddle

Any advice on how I could achieve this type of layout would be greatly appreciated.

Thanks

Upvotes: 2

Views: 153

Answers (1)

Pankaj Phartiyal
Pankaj Phartiyal

Reputation: 1691

Problem 1 Vertically align the content in column one to center.

This is an update to your layout which has centrally aligned your first column.

https://jsfiddle.net/z69w9u4g/5/

To summarize I have added few classes at right places

<section class="row my-section-row">
        <div class="col-md-4 my-section-row-description">
            <div class="my-section-row-description-body">

And I have added this CSS

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

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

.my-section-row-description-body {
  align-self: center;
}

Now images

First of all the container should have padding bottom. The value should be in px as its totally dependent on height of images which are vertically overflowing and which is random.

Column 1 and Column 3 should be position relative and all images inside them should be position absolute. Try to convert all top and left values to percent and also width to percent. Set its bottom property to align it from bottom if required.

The image which overlaps column 1 and column 2 should not be in any column and instead should be inside .container or .row with position absolute. Its immediate parent should be position relative. You can use left as 33% and set translateX to -50%. that would put it right between column 1 and 2 assuming column 1 and 2 are of same width. Set its bottom property to align it from bottom if required.

Hope that makes sense.

UPDATE

To make you understand better consider this image

box model

.container has a margin and a padding-bottom

.container and .column-3 will have relative position

Image boxes will have absolute position. They are color coded to represent their position in DOM.

Also I think you should read more about relative and absolute positioning.

Upvotes: 2

Related Questions