CODEWITHSUNDEEP
css
0711master
0711master

Reputation: 195

Giving background color only to one side of centered div

So, I have a menu which is inside a centered div. The centered div has a background color. Now I want to give the gap between the left browser window border and the centered div another color than the gap on the other side. I already tried a couple of methods like linear gradients or adding colored box with ::before, but nothing worked. Here is a picture to visualize it

<style>
 .wrapper {
  width: 100%
 }

 .centered {
  margin: 0 auto
  max-width: 80em
  background-color: grey
 }
</style>

<div class="wrapper">
 <div class="centered">
  <nav>Some menu...</nav>
 </div>
</div>

Upvotes: 0

Views: 3997

Answers (4)

mholzer78
mholzer78

Reputation: 315

1) not 'style="wrapper"' but 'class="wrapper' 2) i would suggest to give the wrapper the background-color grey and the centered the background-color white:

<style>
 .wrapper {
  width: 100%;
  background: linear-gradient(to right, #ff0000 0%,#ff0000 50%,#808080 50%,#808080 100%);
 }

 .centered {
  margin: 0 auto;
  max-width: 80em;
  background-color: white;
 }
  </style>
</head>
<body>
<div class="wrapper">
 <div class="centered">
  <div>Some menu...</div>
 </div>
</div>

Upvotes: 0

Facundo La Rocca
Facundo La Rocca

Reputation: 3876

Take a look at this codepen

Now, inside your .centered you can put whatever you want, and even you can chose how much centered should use.

<style>
 .wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
 }

 .centered {
  margin: 0;
  background-color: white;
  flex: 1; 
 }

 .left-red {
  margin: 0;
  background-color: red;
  width: 15%; 
 }
 .right {
  margin: 0;
  background-color: gray;
  width: 15%; 
 }
  </style>
</head>
<body>
<div class="wrapper">
 <div class="left-red">
 </div>
 <div class="centered">
  <div>Some menu...</div>
 </div>
 <div class="right">
 </div>
</div>

I've edited to add the left red background.

I strongly recommend you to read this great tutorial about flexbox.

Let me know if it is what you are looking for.

Upvotes: 0

Halaster
Halaster

Reputation: 1502

You can try out using an abrupt linear-gradient on the .wrapper, for example:

background: linear-gradient(to right, red 5%, white 90%, gray 5%);

Just edit the percentages after the color to get the sizing.

Wrote you an example here. Simple and elegant.

http://jsbin.com/qivagowutu/edit?html,css,output

Upvotes: 1

Wouter den Ouden
Wouter den Ouden

Reputation: 1523

You could use this to tool to make the right gradient: http://www.colorzilla.com/gradient-editor/

for example:

background: #ff3232;
background: -moz-linear-gradient(left, #ff3232 0%, #ff2828 49%, #bed4e5 50%, #bed4e5 100%);
background: -webkit-linear-gradient(left, #ff3232 0%,#ff2828 49%,#bed4e5 50%,#bed4e5 100%);
background: linear-gradient(to right, #ff3232 0%,#ff2828 49%,#bed4e5 50%,#bed4e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#bed4e5',GradientType=1 );

Maybe you already tried the right gradient, but you should change style="wrapper" to class="wrapper".

Upvotes: 0

Related Questions