Uniformly spaced design with one child extending across the entire width of the screen

Question

Uniformly spaced design with one child extending across the entire width of the screen

Is it possible to create a layout resembling the one shown in the image below by setting the fixed width only on the parent container? I am unable to use

position: absolute; left: 0; right: 0;

on the Full screen width child since it must remain in the flow with dynamic sizing.

I cannot alter the markup.

The best solution I can currently think of is individually setting fixed widths for each Fixed-width child, but this is not ideal given the number of children - requiring a new class for each addition.

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

Here is an example markup where you can propose a solution:

HTML

<div class="fixed-width-container">
  <div class="regular-child"></div>
  <div class="full-screen-width-child"></div>
  <div class="regular-child"></div>
  <div class="regular-child"></div>
</div>

CSS

.fixed-width-container {
  width: <some-fixed-width>;
}

css

Answer 1

Answer №1

If you're looking to experiment with layouts, consider trying out the flex layout. You can find a helpful guide here.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

body {
  margin: 0;
}

div {
  border: 1px solid #333;
}

.fixed-width-container {
  width: 400px;/* any width set */
  margin: auto;
  padding: 10px 10px 0;
  background: yellow;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.fixed-width-container>div {
  height: 3em;
  margin-bottom: 10px;
  background: lightblue;
  min-width: 100%;
}

.full-screen-width-child {
  width: 99vw;/* 100vw is fine too */
}

<div class="fixed-width-container">
  <div class="regular-child">Fixed-width child</div>
  <div class="full-screen-width-child">Full screen width child with dynamic contents</div>
  <div class="regular-child">Fixed-width child</div>
  <div class="regular-child">Fixed-width child</div>
</div>

Check out this codepen for testing and experimentation

Answer 2

If you're looking to experiment with layouts, consider trying out the flex layout. You can find a helpful guide here.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

body {
  margin: 0;
}

div {
  border: 1px solid #333;
}

.fixed-width-container {
  width: 400px;/* any width set */
  margin: auto;
  padding: 10px 10px 0;
  background: yellow;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.fixed-width-container>div {
  height: 3em;
  margin-bottom: 10px;
  background: lightblue;
  min-width: 100%;
}

.full-screen-width-child {
  width: 99vw;/* 100vw is fine too */
}

<div class="fixed-width-container">
  <div class="regular-child">Fixed-width child</div>
  <div class="full-screen-width-child">Full screen width child with dynamic contents</div>
  <div class="regular-child">Fixed-width child</div>
  <div class="regular-child">Fixed-width child</div>
</div>

Check out this codepen for testing and experimentation

Answer 3

Answer №2

Although this may not be the most effective solution, it is an attempt that could potentially inspire more intricate approaches from others or even yourself.

Concept: Utilizing negative margins for a full-width child element.

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  width: 100%;
  background: #fff;
}

div {
  border: 1px solid #333;
  margin-bottom: 10px;
}

div:last-child {
  margin-bottom: 0;
}

.fixed-width-container {
  width: 70%;
  margin: auto;
  padding: 10px;
  background: LightYellow;
}

.regular-child,
.full-screen-width-child {
  height: 45px;
  line-height: 45px;
  background: LightBlue;
}

.full-screen-width-child {
  margin-left: -24%;
  margin-right: -24%;
  background: LightGreen;
}

<div class="fixed-width-container">
  <div class="regular-child">Fixed-width child</div>
  <div class="full-screen-width-child">Full screen width child with dynamic contents</div>
  <div class="regular-child">Fixed-width child</div>
  <div class="regular-child">Fixed-width child</div>
</div>

The challenge lies in determining the appropriate dimensions for the negative margins. The use of percentage values in margins can make the calculation complex. For instance, with a width: 70% for the container and a margin of -24%, the resulting negative margin would depend on the body width. In this case, for a body width of 625px, the negative margin would be approximately 105px. Finding a universal solution for different configurations remains a puzzle to solve.

Answer 4

Although this may not be the most effective solution, it is an attempt that could potentially inspire more intricate approaches from others or even yourself.

Concept: Utilizing negative margins for a full-width child element.

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  width: 100%;
  background: #fff;
}

div {
  border: 1px solid #333;
  margin-bottom: 10px;
}

div:last-child {
  margin-bottom: 0;
}

.fixed-width-container {
  width: 70%;
  margin: auto;
  padding: 10px;
  background: LightYellow;
}

.regular-child,
.full-screen-width-child {
  height: 45px;
  line-height: 45px;
  background: LightBlue;
}

.full-screen-width-child {
  margin-left: -24%;
  margin-right: -24%;
  background: LightGreen;
}

<div class="fixed-width-container">
  <div class="regular-child">Fixed-width child</div>
  <div class="full-screen-width-child">Full screen width child with dynamic contents</div>
  <div class="regular-child">Fixed-width child</div>
  <div class="regular-child">Fixed-width child</div>
</div>

The challenge lies in determining the appropriate dimensions for the negative margins. The use of percentage values in margins can make the calculation complex. For instance, with a width: 70% for the container and a margin of -24%, the resulting negative margin would depend on the body width. In this case, for a body width of 625px, the negative margin would be approximately 105px. Finding a universal solution for different configurations remains a puzzle to solve.

Uniformly spaced design with one child extending across the entire width of the screen

Answer №1

Answer №2

Similar questions

Bootstrap columns incorrectly stacking in vertical orientation

Ways to move the cursor to the search field after the placeholder text

Styling a webpage with a two-row layout using just CSS

What is the best way to design a footer that remains fixed at the bottom of the screen but becomes unfixed when the user scrolls down?

Ensuring the aspect ratio of images stays consistent within a flexbox using CSS

The overflowing pop-up container

Is it feasible to display a message for a certain duration without using the alert() function upon clicking a button?

Fixed menubar is being used to display section headings

Creating adaptable background images with fullpage.js

What is the best way to format or delete text enclosed in quotation marks within an anchor tag using CSS or JavaScript?

Choose a unique text color

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Tips for preventing the appearance of a horizontal scroll bar when utilizing the FlexLayoutModule in Angular

Ways to eliminate the gap produced by a fixed element

having difficulties in separating the mat-table header

Every time I make a change to the code, Laravel's css/app.css file mysteriously vanishes from the mix-manifest.json

What could be the reason for the excess white space at the top and bottom of the page?

Interested in mastering BootStrap for Angularjs?

Enlarge Django thumbnail when hovering over it in Django admin console

Guide to positioning elements in CSS to maintain a fixed location