Position a div in the center and add color to one side of the space

Question

Position a div in the center and add color to one side of the space

I am seeking a way to create a centered div with the left side filled with color, as shown in examples.

I have devised two solutions without using flexbox, but both seem somewhat like hacks.

body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 60px;
    position: fixed;
}

.center-part {
    width: 500px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(0,255,0,0.8);
    position: relative;
}

.blue-big {
    background-color: blue;
    width: 9999px;
    height: inherit;
    position: absolute;
    right: 500px;
}

.equal-side {
    display: table-cell;
}

<div class="header" style="top: 0px">
    <div class="center-part">
        <div class="blue-big">
        
        </div>
    </div>
</div>

<div class="header" style="top: 70px; display: table;">
    <div class="equal-side" style="background-color: blue">
    </div>
    <div class="center-part" style="display: table-cell;">
    </div>
    <div class="equal-side">
    </div>
</div>

The first solution involves a large div and positioning, while the second one relies on "display: table".

I am uncertain if either of these approaches is considered best practice or if there is a better way to achieve this layout?

The green DIV will not completely fill the height, ruling out the option of placing a div in the background with 50% width.

html css

Answer 1

Answer №1

Using a linear-gradient is a simple solution, as shown in the code snippet below:

.container {
  background: linear-gradient(to right, green 50%, transparent 0) 0 0/100% 40% no-repeat;
  height: 100px;
  background-color:rgba(255,0,0,0.5);
}

.container>div {
  width: 300px;
  height: 40%;
  background:blue;
  margin: 0 auto;
}

<div class="container">
  <div></div>
</div>

Alternatively, you can use a pseudo element with overflow to create a similar effect:

.container {
  overflow:hidden;
  height: 100px;
}

.container>div {
  width: 300px;
  height: 100%;
  background:blue;
  margin: 0 auto;
  position:relative;
}
.container>div:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:-1000%;
  bottom:0;
  background:green;
  z-index:-1;
}

<div class="container">
  <div></div>
</div>

Answer 2

Using a linear-gradient is a simple solution, as shown in the code snippet below:

.container {
  background: linear-gradient(to right, green 50%, transparent 0) 0 0/100% 40% no-repeat;
  height: 100px;
  background-color:rgba(255,0,0,0.5);
}

.container>div {
  width: 300px;
  height: 40%;
  background:blue;
  margin: 0 auto;
}

<div class="container">
  <div></div>
</div>

Alternatively, you can use a pseudo element with overflow to create a similar effect:

.container {
  overflow:hidden;
  height: 100px;
}

.container>div {
  width: 300px;
  height: 100%;
  background:blue;
  margin: 0 auto;
  position:relative;
}
.container>div:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:-1000%;
  bottom:0;
  background:green;
  z-index:-1;
}

<div class="container">
  <div></div>
</div>

Answer 3

Answer №2

This specific solution has been quite effective for me, and you can check it out here.

Below is the HTML code snippet:

    <div class="test-header">
  <div class="equal-side left-side">
  </div>
  <div class="center-part">
     <div class="center">
       INSERT TEXT HERE
    </div>
  </div>
  <div class="equal-side right-side">
  </div>
</div>

CSS styling used in this particular scenario:

    .test-header {
  position: relative;
  width: 100%;
  height: 60px;
  text-align: center;
}

.equal-side {  
  display: inline-block;
  height: 100%;
  width: 49%;
}

.left-side {
  background: blue;
}

.right-side {
  background: red;
}

.center-part {
  background: white;
  width: 500px;
  height: 60px;
  display: block;
  position: absolute;
  margin-left: -250px;   /*half of center element's width*/
  left: 50%;
  top: 0;
}

.center {
  width: 100%;
  border: 1px dashed;
}

Answer 4

This specific solution has been quite effective for me, and you can check it out here.

Below is the HTML code snippet:

    <div class="test-header">
  <div class="equal-side left-side">
  </div>
  <div class="center-part">
     <div class="center">
       INSERT TEXT HERE
    </div>
  </div>
  <div class="equal-side right-side">
  </div>
</div>

CSS styling used in this particular scenario:

    .test-header {
  position: relative;
  width: 100%;
  height: 60px;
  text-align: center;
}

.equal-side {  
  display: inline-block;
  height: 100%;
  width: 49%;
}

.left-side {
  background: blue;
}

.right-side {
  background: red;
}

.center-part {
  background: white;
  width: 500px;
  height: 60px;
  display: block;
  position: absolute;
  margin-left: -250px;   /*half of center element's width*/
  left: 50%;
  top: 0;
}

.center {
  width: 100%;
  border: 1px dashed;
}

Answer 5

Answer №3

If you're looking to create a linear gradient effect with only one element, check out the informative resources at CSS-tricks. They provide detailed explanations on how to achieve this design technique.

In my initial response, I overlooked mentioning the container needed to center the div. I have now updated with two examples - one utilizing flexbox and the other without. Whether you prefer not to use flexbox or are unable to, both options are provided for your convenience.

.container {
  display: flex;
  justify-content: center;
}

.bar {
  height: 50px;
  width: 400px;
  background-image:
    linear-gradient(
      to right, 
      red,
      red 50%,
      orange 50%,
      orange 100%
    );
}

.bar-noflexbox {
  height: 50px;
  width: auto;
  margin: 1rem 20%;
  background-image:
    linear-gradient(
      to right, 
      red,
      red 50%,
      orange 50%,
      orange 100%
    );
}

<div class="container">
  <div class="bar"></div>
</div>

<div>
  <div class="bar-noflexbox"></div>
</div>

Answer 6

If you're looking to create a linear gradient effect with only one element, check out the informative resources at CSS-tricks. They provide detailed explanations on how to achieve this design technique.

In my initial response, I overlooked mentioning the container needed to center the div. I have now updated with two examples - one utilizing flexbox and the other without. Whether you prefer not to use flexbox or are unable to, both options are provided for your convenience.

.container {
  display: flex;
  justify-content: center;
}

.bar {
  height: 50px;
  width: 400px;
  background-image:
    linear-gradient(
      to right, 
      red,
      red 50%,
      orange 50%,
      orange 100%
    );
}

.bar-noflexbox {
  height: 50px;
  width: auto;
  margin: 1rem 20%;
  background-image:
    linear-gradient(
      to right, 
      red,
      red 50%,
      orange 50%,
      orange 100%
    );
}

<div class="container">
  <div class="bar"></div>
</div>

<div>
  <div class="bar-noflexbox"></div>
</div>

Position a div in the center and add color to one side of the space

Answer №1

Answer №2

Answer №3

Similar questions

Dynamically insert <td> elements into <tr> element using both jQuery and JavaScript

What could be the reason for the state not initializing with the provided value?

Make sure to keep the <div> element nested within the image

Unsuccessful CORS on whateverorigin.org with YQL

Ensure that the text in the table with a width of 100% remains stable

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Showcasing Items Within JSON Object in Angular

Using JQuery to Enhance the Highlight Effect: Tips and Tricks

Using routerLink for linking to multiple components

What is the best way to trigger a new css animation on an element that is already in the midst of

I have implemented a custom-built sidebar component and I'm unsure about the process of adding data to it

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Revising text for real-time editing

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

Bring to life the div that has been clicked

Unusual behavior exhibited by ng-if within a widget

Adding and removing attributes with Jquery upon clicking a button

Using Javascript to Conceal Button for Unauthenticated Users

Attempting to recreate the dynamic banner featured in the video

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript