Ways to position an element at the edge of the browser either on the left or right side when the image is not in a centered container

Question

Ways to position an element at the edge of the browser either on the left or right side when the image is not in a centered container

Looking to create a unique layout that involves:

Utilizing a three-column structure
Incorporating a div element that spans two columns
Positioning an image within the two-column div so that it extends to the left edge of the browser window while staying "stuck" to the right side

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

Attempted implementing the following code on the image, but with limited understanding of its effect:

margin-left: calc( -100vw/2 + 100%/2);

HTML

<div class="wrapper">
<div class="col-1"><img src="blabla" /></div>
<div class="col-2">Content</div>
</div>

CSS

.wrapper {
max-width: 1400px;
display: block;
margin: auto;
}

.col-1 {
float: left;
width:66.666%;
}

.col-2 {
float: left;
width: 33.333%;
}

.col-1 img {
display: block;
width: 100%;
height: auto;
margin-left: calc( -100vw/2 + 100%/2);
}

Displayed result achieves the desired left alignment, but struggles with maintaining the image's position on the right.

Uncertain about how to modify the layout to achieve desired results, or if it is even technically feasible.

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

html css image

Answer 1

Answer №1

Understanding the calculation:

Two key parameters need to be calculated:
1. Determine the shift of the <img> -- (1/2 of the viewport width - 1/2 of the .wrapper width),
2. Calculate the width of the <img> -- (100% of .col-1 + the previously determined shift)

Consider the following:
1. The width of the viewport is denoted by 100vw
2. The width of .col-1 is represented as 100% of .col-1
3. The width of .wrapper is defined as 150% of .col-1

The <img> element is a child of .col-1, thus all percentage dimensions are relative to the width of .col-1.

Calculation steps:
1. Determine the shift value: (100vw/2 - 150%/2) = (50vw - 75%)
2. Calculate the width: (100% + 50vw - 75%) = (25% + 50vw)

Note the following:
The margin-left needs to be negative in order to shift left, hence
margin-left = (75% - 50vw)

For a responsive design, run the provided code snippet in fullscreen mode and observe its behavior when resizing the window.

html,
body {
  margin: 0;
  padding: 0
}

* {
  box-sizing: border-box
}

.wrapper {
  width: 80vw; /* Choose any value */
  max-width: 1400px;
  display: flex;
  margin: auto;
}

.wrapper div {
  border: solid 1px
}

.col-1 {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  width: 66.666%;
  background: #693
}

.col-1-2 {
  width: 50%
}

.col-2 {
  width: 33.333%;
  background: #e43;
}

.col-1 img {
  display: block;
  width: calc(25% + 50vw);
  margin-left: calc(75% - 50vw);
  opacity: .75; /* Adjust as needed */
}

<div class="wrapper">
  <div class="col-1">
    <img src="https://picsum.photos/600/300" />
    <div class="col-1-2">Content</div>
    <div class="col-1-2">Content</div>
  </div>
  <div class="col-2">Content</div>
</div>

Answer 2

Understanding the calculation:

Two key parameters need to be calculated:
1. Determine the shift of the <img> -- (1/2 of the viewport width - 1/2 of the .wrapper width),
2. Calculate the width of the <img> -- (100% of .col-1 + the previously determined shift)

Consider the following:
1. The width of the viewport is denoted by 100vw
2. The width of .col-1 is represented as 100% of .col-1
3. The width of .wrapper is defined as 150% of .col-1

The <img> element is a child of .col-1, thus all percentage dimensions are relative to the width of .col-1.

Calculation steps:
1. Determine the shift value: (100vw/2 - 150%/2) = (50vw - 75%)
2. Calculate the width: (100% + 50vw - 75%) = (25% + 50vw)

Note the following:
The margin-left needs to be negative in order to shift left, hence
margin-left = (75% - 50vw)

For a responsive design, run the provided code snippet in fullscreen mode and observe its behavior when resizing the window.

html,
body {
  margin: 0;
  padding: 0
}

* {
  box-sizing: border-box
}

.wrapper {
  width: 80vw; /* Choose any value */
  max-width: 1400px;
  display: flex;
  margin: auto;
}

.wrapper div {
  border: solid 1px
}

.col-1 {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  width: 66.666%;
  background: #693
}

.col-1-2 {
  width: 50%
}

.col-2 {
  width: 33.333%;
  background: #e43;
}

.col-1 img {
  display: block;
  width: calc(25% + 50vw);
  margin-left: calc(75% - 50vw);
  opacity: .75; /* Adjust as needed */
}

<div class="wrapper">
  <div class="col-1">
    <img src="https://picsum.photos/600/300" />
    <div class="col-1-2">Content</div>
    <div class="col-1-2">Content</div>
  </div>
  <div class="col-2">Content</div>
</div>

Answer 3

Answer №2

CSS-Grid seems like a good option for achieving what you want, but I have concerns about how the image will respond.

Just my two cents.

.super-con {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(auto, 500px)) auto;
}

.super-con div {
  border: 1px solid red;
}

.image {
  grid-column: 1 / span 3
}

.image img {
  width: 100%;
  max-height: auto;
  display: block;
}

div:nth-child(3) {
  grid-column-start: 2;
}

<div class="super-con">
  <div class="image"><img src="http://www.fillmurray.com/150/150" alt=""></div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 4

CSS-Grid seems like a good option for achieving what you want, but I have concerns about how the image will respond.

Just my two cents.

.super-con {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(auto, 500px)) auto;
}

.super-con div {
  border: 1px solid red;
}

.image {
  grid-column: 1 / span 3
}

.image img {
  width: 100%;
  max-height: auto;
  display: block;
}

div:nth-child(3) {
  grid-column-start: 2;
}

<div class="super-con">
  <div class="image"><img src="http://www.fillmurray.com/150/150" alt=""></div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Ways to position an element at the edge of the browser either on the left or right side when the image is not in a centered container

Answer №1

Answer №2

Similar questions

Struggling to display blob URL on "pdf-viewer" component with "ng2-pdf-viewer" in Angular version 10

What is the process for specifying the content type as application/json in an Ajax request?

`javascript pop up notification will only display one time`

Contact Form Appears to Be Functioning Properly, Yet Emails Are Not Being Received (HTML5 & PHP)

How can I stack two appbar components from Material Ui on top of each other without the vertical line separating them?

Why does my console refuse to log the input entered for the search?

A guide on automating the html5 color picker using input type="color" in selenium webdriver

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

php code to show data in a single column of a table

The element does not have the 'ariaHidden' attribute present

Access and retrieve data from a string using XPath with JavaScript

Steps to handle the change event of a p:inputText element

Having trouble accessing the value of an item in a dropdown box on a website

What are the best situations to utilize bootstrap and when should you avoid it?

How to create ::after pseudo-element with identical width as its preceding sibling

How to adjust the size of the text on a button in jQuery mobile using custom

How do I add a "Switch to Desktop Site" link on a mobile site that redirects to the desktop version without redirecting back to the mobile version once it loads?

Responsive menu not functioning properly with jQuery

Tips for adjusting the width of a field within an existing OpenERP7 form view utilizing percentages instead of pixels