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

Html – How to make an element wider than its container?

How can I make the green (large class) paragraph as large as body (grey part), or at least larger than #contents?

I tried this trick, but you’ll see that when you reduce the width of the whole page, the paragraph keeps that large width and adds a horizontal scrollbar, etc.:

position: relative;
width: 150%;
left: -25%;

In my situation, I can’t control the HTML part, but I can override the CSS part.

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  padding-left: 5em;
  background-color: #ecf0f1;
}

#sb {
  position: fixed;
  left: 0;
  top: 0;
  width: 5em;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  background-color: #3498db;
}

#contents {
  margin: 0 auto;
  max-width: 20rem;
  background-color: #e67e22;
}

h1,
p {
  background-color: #f1c40f;
}

p.large {
  background-color: #2ecc71;
}
<body>
  <div id="sb"></div>
  <div id="contents">
    <h1>hello!</h1>
    <p>
      I'm baby slow-carb fam synth swag.
      Adaptogen farm-to-table air plant
      kickstarter put a bird on it chillwave
      authentic 3 wolf.
    </p>
    <p class="large">
      Four dollar toast post-ironic intelligentsia,
      aesthetic taiyaki small batch succulents
      readymade shabby chic portland.
    </p>
    <p>
      Ascot lyft grailed 8-bit mlkshk. Fam
      cornhole woke tattooed offal hot
      chicken post-ironic hammock hell of
      chartreuse pok pok gluten-free
      leggings marxism.
    </p>
  </div>
</body>
Tags:

2

Answers


  1. 0

    I’m not sure what your actual restrictions are, but I’d override the container’s size and apply it to the child elements. Then you can override that width just for the one paragraph class. Note also the adjustment to the auto margin configuration for centering.

    This just leaves the issue of the orange background color covering the wider area. I opted to apply it to a pseudo-element, but there are probably other ways, such as a linear gradient.

    You may need to tweak selectors to gain precedence over existing rules. Adding body in front is often effective and is better than using !important.

    body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  padding-left: 5em;
  background-color: #ecf0f1;
}

#sb {
  position: fixed;
  left: 0;
  top: 0;
  width: 5em;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  background-color: #3498db;
}

#contents {
  position: relative;
}

#contents::before {
  position: absolute;
  content: '';
  width: 20rem;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #e67e22;
  z-index: -1;
}

#contents>* {
  margin-left: auto;
  margin-right: auto;
  max-width: 20rem;
  background-color: #e67e22;
}

#contents>h1,
#contents>p {
  background-color: #f1c40f;
}

#contents>p.large {
  max-width: 100%;
  background-color: #2ecc71;
}
    <body>
  <div id="sb"></div>
  <div id="contents">
    <h1>hello!</h1>
    <p>
      I'm baby slow-carb fam synth swag. Adaptogen farm-to-table air plant kickstarter put a bird on it chillwave authentic 3 wolf.
    </p>
    <p class="large">
      Four dollar toast post-ironic intelligentsia, aesthetic taiyaki small batch succulents readymade shabby chic portland.
    </p>
    <p>
      Ascot lyft grailed 8-bit mlkshk. Fam cornhole woke tattooed offal hot chicken post-ironic hammock hell of chartreuse pok pok gluten-free leggings marxism.
    </p>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    The width of .large element, is based on its parent element, if you want, you can make the element cover the whole screen minus the side menu

    p.large {
  background-color: #2ecc71;
  position: absolute;
  right: 0;
  width: calc(100vw - 5rem);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search