Html Question posted in
Some basic documentation can be found here.

Html – Push element out of the container all the way to left side of screen

I have created a code and tried to move the green box to the left side of the screen. Vertically it needs to stay in the same position as the Heading text and needs to be the same height as the heading height. I have tried to implement this but it is not very responsive. Once you reduce the screen size, the green box is out of the screen completely and not visible.

*{
  margin:0;
  padding:0;
}

.container{
  border:1px solid red;
  margin:50px auto;
  width:500px;
  padding:10px;
}

h1{
  position: relative;
  &::before{
    content:"";
    display:block;
    top:0;
    bottom:0;
    left:-40px;
    background-color:green;
    position:absolute;
    width: 30px;
  }
}
<div class="container">
  <h1>Hello World! <br/>This is new line text</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, excepturi. Dolore ex ipsa vero tempora esse? Velit modi tempora quaerat.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officia suscipit quos quam eius modi, vel placeat soluta autem? Unde delectus, fuga nesciunt labore quidem cum nostrum sed quae ea.</p>
</div>
Tags:

2

Answers


  1. 0

    You need to account for width of the parent and adjust for screen width using vw units.

    *{
  margin:0;
  padding:0;
}

.container{
  border:1px solid red;
  margin:50px auto;
width: 500px;
  padding:10px;
}

h1{
  position: relative;
  &::before{
    content:"";
    display:block;
    top:0;
    bottom:0;
      left: calc((500px - 100vw)  / 2 ); /* width - screen width divided by 2 */
    background-color:green;
    position:absolute;
    width: 30px;
  }
}
    <div class="container">
  <h1>Hello World! <br/>This is new line text</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, excepturi. Dolore ex ipsa vero tempora esse? Velit modi tempora quaerat.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officia suscipit quos quam eius modi, vel placeat soluta autem? Unde delectus, fuga nesciunt labore quidem cum nostrum sed quae ea.</p>
</div>
    Login or Signup to reply.
  2. 0

    An idea with less of code (A related article to understand how border-image works: https://www.smashingmagazine.com/2024/01/css-border-image-property/

    * {
  margin: 0;
  padding: 0;
}

.container {
  border: 1px solid red;
  margin: 50px auto;
  max-width: 500px;
  padding: 10px;
}

h1 {
  --b: 30px; /* border width */
  border-image: 
   conic-gradient(green 0 0) /* the color here */
   0 0 0 1/0 0 0 var(--b)/ 
   0 0 0 calc(10px + max(var(--b),50vw - 250px))
   /* 10px: padding of the container
      250px: (width of container)/2
      50vw: (width of viewport)/2
   */
}
    <div class="container">
  <h1>Hello World! <br/>This is new line text</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, excepturi. Dolore ex ipsa vero tempora esse? Velit modi tempora quaerat.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officia suscipit quos quam eius modi, vel placeat soluta autem? Unde delectus, fuga nesciunt labore quidem cum nostrum sed quae ea.</p>
</div>

    If you use box-sizing: border-box you have to adjust like below:

    * {
  margin: 0;
  padding: 0;
}

.container {
  border: 1px solid red;
  margin: 50px auto;
  max-width: 500px;
  padding: 10px;
  box-sizing: border-box;
}

h1 {
  --b: 30px; /* border width */
  border-image: 
   conic-gradient(green 0 0) /* the color here */
   0 0 0 1/0 0 0 var(--b)/ 
   0 0 0 calc(10px + max(var(--b),50vw - 240px))
   /* 
      10px: padding
      240px: (width of container - padding)/2
      50vw: (width of viewport)/2
   */
}
    <div class="container">
  <h1>Hello World! <br/>This is new line text</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, excepturi. Dolore ex ipsa vero tempora esse? Velit modi tempora quaerat.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officia suscipit quos quam eius modi, vel placeat soluta autem? Unde delectus, fuga nesciunt labore quidem cum nostrum sed quae ea.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search