Question 2204 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Expand child div to to right side – WordPress

I have a wordpress site/elementor and I want to extend a section/div to the right side outside the main div like in the picture below.

At the moment, the div has a fixed width of 1600px but the div goes beyond the page, which isn’t really best practice and not really responsive.

A size of 100% covers only the main div.enter image description here

Does anyone have an idea as to how to fix this in css?

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, i found a solution with calc.

    .child{
width: calc((100vw - 1280px) / 2 + 1280px)
}

    1280px is the parent div width.

    Thanks for your help


  2. 0
    1. Change fixed width 1600px to minWidth: 1600px
    2. Or set overflow: scroll on a parent
    Login or Signup to reply.
  3. 0

    You could use width: calc(100% + 30px); on the child to achieve this.

    .parent {
  width: 100px;
  height: 100px;
  border-left: 1px solid;
  border-right: 1px solid;
}

.child {
  border: 1px solid red;
  height: 50px;
  width: calc(100% + 30px);
}
    <div class="parent">
  Some text
  <div class="child">
  </div>
</div>
    Login or Signup to reply.
  4. 0

    Set the overflow to hidden and then set the width beyond the main div.

    .someText{
  width: calc(100% + 5em);
  overflow: hidden;
}

/* To hide the horizontal scroll bar that may appear */
body {
  overflow-x: hidden;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search