I have a simple flexbox layout like this...
html, body {
margin:0;
padding:0;
}
.container {
display:flex;
flex-direction:row;
}
.section1 {
width:50%;
}
.section2 {
width:50%;
}
.img_16x9_holder {
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
img {
max-width:100%;
}
<div class="container">
<div class="section1">
<div class="img_16x9_holder">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
<div class="section2">
<div class="img_matchheight_holder">
<img src="http://lorempixel.com/g/300/650/" alt="300x650image">
</div>
</div>
</div>
I am trying to set the left image to a 16x9 ratio and then the right hand one should crop and fill to match the height of the left.
This is what I am trying to achieve..
Can I do this using CSS alone, or am I best off looking at a javascript height matching solution?
You can have more info here
Here is an example:
html, body {
margin:0;
padding:0;
}
.container {
display:flex;
}
.section img{
height:100%;
}
#sec-1 img{
/*resize image with % or fixed width depending on the image size*/
width:50%;
}
#sec-2 img{
/*resize image with % or fixed width depending on the image size*/
width:50%;
}
<div class="container">
<div id="sec-1" class="section">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
<div id="sec-2" class="section">
<img src="http://lorempixel.com/g/300/650/" alt="300x650image">
</div>
</div>
You can consider background for the second image:
html,
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
}
.section1 {
width: 50%;
}
.section2 {
width: 50%;
}
.img_16x9_holder {
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.img_matchheight_holder {
background-size: cover;
background-position: center;
flex-grow:1;
margin-left:5px;
}
img {
max-width: 100%;
}
<div class="container">
<div class="section1">
<div class="img_16x9_holder">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
</div>
<div class="img_matchheight_holder" style="background-image:url(http://lorempixel.com/g/300/650/)">
</div>
</div>
Related
Okay so this slider strolls well and works perfectly. Every slide perfectly snaps into place vertically and horizontally on different screen sizes. However, when the (vanilla) javascript begans to slide the slider to the next slide, I am no longer able to slide back to the previous slides until the javascript completes its cycle through all of the frames (divs). Each slide once displayed using JavaScript seems to disappear until it goes back to slide "zero" (the first slide). I noticed the scroll bar "thumb" on my version of the slider gets longer (indicating the entire slide package getting shorter each time the JavaScript displays a slide) each time the javascript "moves" the slides. So how can I alter my Vanilla JavaScript to only move the slides in my slider and not transform my slides where the slides are lost once viewed? My slides are lined up horizontally and once one is displayed, they disappear. Below is my basic HTML, CSS and JavaScript.
Sorry I couldn't separate the Css and JavaScript I'm having technical difficulties.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SGRLA - SA</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="font/style.css"/>
<script src=.3.3.1/jquery.min.js></script>
</head>
<body>
<div class=mainContentBoxSliders id=slider>
<div class="slides" id=ul><center>
<div class=sliderButtons id=sliderBtnsS>
<
1
2
3
4
5
>
<div style="clear: both;"></div>
</div></center>
<div class=slide id=slide-1>
<div class=imageWindow>
<img src=images/photoOne~4.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text1>
My Text Content
</div>
</div>
<div class=slide id=slide-2>
<div class=imageWindow>
<img src=images/photoOne~1.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text2>
My Text Content for Slide 2
</div>
</div>
<div class=slide id=slide-3>
<div class=imageWindow>
<img src=images/photoOne~2.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text3>
My Text Content for Slide 3
</div>
</div>
<div class=slide id=slide-4>
<div class=imageWindow>
<img src=images/photoOne~3.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text4>
My Text Content for Slide 4
</div>
</div>
<div class=slide id=slide-5>
<div class=imageWindow>
<img src=images/photoOne~5.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text5>
My Text Content for Slide 5
</div>
</div>
</div>
</div> </body>
</html>
CSS
<!----CSS & JavaScript------>
<style>
body {
background-color:#000;
margin:0px;
font-family:'Open Sans';
}
.mainContentBoxSliders {
background-color:#000;
height:auto;
width: 100%;
}
.imageWindow {
width:512px;
height:auto;
}
.mainTextContainer {
padding-right:10px;
height:506px;
width:460px;
font-size:20px;
font-family:'Open Sans Light';
font-weight:normal;
margin-bottom:40px;
margin-top:30px;
margin-left:10px;
}
a {
text-decoration:none;
color:white;
}
/** On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) **/
#media screen and (max-width: 992px) {
.imageWindow {
width:100%;
height:auto;
}
.mainTextContainer {
text-align:center;
padding-right:10px;
height:auto;
width:100%;
font-size:40px;
font-family:'Open Sans Light';
font-weight:normal;
}
#slide-4 {
background-size:auto 100%;
background-position:center;
}
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
margin:0px auto 0px auto;
width: 100%;
max-width:1024px;
overflow-x: auto;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 3px;
}
.slides::-webkit-scrollbar-thumb {
background: #DDDDDD;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: auto;
margin-right: 50px;
border-radius: 10px;
background: #000;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.sliderButtons {
padding-top:60px;
position: absolute;
align-items: center;
}
.sliderButtons > a {
z-index:12;
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: #5F6855;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
color:white;
font-size:20px;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
slider.img {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#slide-text1{
background-color:rgba(254, 254, 254, 0.275);/***transparent div background***/
border-radius:15px;
}
#slide-1 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;}
#slide-2 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:black;
background-color:white;
}
#slide-3 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;
background-color:black;
background-image:url(images/sarahSBG.jpg);
background-position: center;
background-size: auto 120%;
font-size:20px;
}
#slide-4 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;
background-color:black;
background-image:url(images/serahBg.png);
background-position: center;
background-size: auto 120%;
}
#slide-5 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;
background-color:black;
}
.btn-next, .btn-prev {
visibility: hidden;
}
JavaScript
// Select all slides
const slides = document.querySelectorAll(".slide");
// loop through slides and set each slides translateX property to index * 100%
slides.forEach((slide, indx) => {
});
// current slide counter
let curSlide = 0;
// maximum number of slides
let maxSlide = slides.length - 1;
// select next slide button
const nextSlide = document.querySelector(".btn-next");
// add event listener and next slide functionality
nextSlide.addEventListener("click", function () {
// check if current slide is the last and reset current slide
if (curSlide === maxSlide) {
//alert ("next button clicked - Loading Slide "+slides.length);
curSlide = 0;
} else {
curSlide++;
//alert ("next button clicked - Loading Slide "+slides.length);
}
// move slide by -100%
slides.forEach((slide, indx) => {
slide.style.transform = `translateX(${100 * (0 - curSlide)}%)`;
});
});
setInterval(function () {
// check if current slide is the last and reset current slide
if (curSlide === maxSlide) {
// alert ("next button clicked - Loading Slide "+slides.length);
curSlide = 0;
} else {
curSlide++;
//alert ("auto change Loading Slide "+slides.length);
}
// move slide by -100%
slides.forEach((slide, indx) => {
slide.style.transform = `translateX(${100 * (0 - curSlide)}%)`;
});
}, 6000);
I made a mobile web page using IScroll.
The composition of the web page is as follows.
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item">
<div class="disable">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
If you run the code above,
You can scroll by raising the cursor to A and B.
On mobile, you can scroll using touch.
But, So if you raise your cursor over a DIV with Aqua background color and scroll,
I can't scroll.
The DIV, "Position:Fixed," is...
Since the height is 100%, I don't think there's a scroll event.
For your information, Item needs a Click event.
So the "Pointer-Events: None" property is not allowed.
The "Trigger" function can't even give you an event.
Give me an idea.
https://jsfiddle.net/kasthe/b3w2hpn1/3/
Apply pointer-events: none to just the class=disable div. div class=item is still clickable.
$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item" onclick="alert('item clicked')">
<div class="disable" style="pointer-events:none">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
I'm trying to fill my page horizontally with as many blocks as possible and center the result.
I want the grid to be able to resize when the window becomes smaller:
wide window
xxx
small window
xx
x
Is this possible to achieve without javascript?
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
To explain the desired centering visually:
Can the yellow highlighted area be evenly distributed on either side?
The desired box alignment:
This only works in chrome for some reason.
Auto-fit and auto-fill needs a known width to calculate from, we can do that with max-width:100% instead of using width which will stretch it and prevent us from centering, and avoid fixed widths.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
max-width: 100%;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
There is a quirk with this, if you start with a wide viewport then resize it to a smaller one, the grid won't be centerd because of auto-fill
Say you have 3 elements but the container can fit 4 with auto-fill it will create a forth column but we have no forth element so it will look unevenly spaced.
I suggest using auto-fit, which instead of creating the forth column it will split the space evenly on each side.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
max-width: 100%;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Now if you resize the window enough you'll see sometimes it's not evenly spaced that's because of the relative unit on the max-width, it need to recalculate the width because it's based on the parent and parent's width which is based on the content.
we can trigger that recalculation using an animation.
chrome specific solution
.center {
display: flex;
flex-direction: column;
align-items: center;
}
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
max-width: 100%;
animation: recalc 5s linear infinite;
}
#keyframes recalc {
to {
max-width: 99.9%;
}
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
To support at least FF and maybe some other browsers, use viewport units.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
max-width: 100vw;
margin:0 auto;
}
.center {
display: flex;
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Try this with flexbox.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 767px) {
.grid {
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 50%
}
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I wouldn't use grid for this. Use flex:
*{
box-sizing:border-box; padding:0; margin:0; font-size:0;
}
html,body{
width:100%; height:100%; background:#ccc;
}
.box{
width:200px; height:150px; background-color:white; border:6px solid red;
}
.box:nth-child(2n+2) {
background-color:blue;
}
.center,.grid{
display:flex; align-items:center; justify-content:center; height:100%;
}
.grid{
min-width:600px; flex-wrap:wrap; align-items:center;
}
<div class='center'>
<div class='grid'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>
</div>
Yes, you can centre an auto-fill, left-aligned grid (and it works in Firefox).
To do this, you just need justify-content: center; on the grid container, which would give you this:
A good example of this (and why it works) is on the MDN docs page for justify-content
Your example would look like this:
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
justify-content: center; /* <-- This is all you need to add */
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
It's worth noting though, that when you only have one row of boxes, they may not be centred, since the repeat function will create empty columns to fill the row, effectively left aligning the actual boxes:
I have a div with an image background (in React with Next.js, but that shouldn't matter).
import styles from './my-component.module.css';
import Background from '../../../public/assets/images/background-image.png';
// later
<div
style={{ backgroundImage: `url(${Background})` }}
className={`${styles['background-image']}`}
>
Here is the CSS I'm currently using:
.background-image {
border-radius: 8px;
background-size: cover;
background-repeat: no-repeat;
height: auto;
}
I can't get the image to take the full height. It should always take the display's width, but take as much height as it can without stretching or repeating. How can I do that?
Update: Yes, the container has more height than the element.
Update 2 Viira's solution almost works, but the image doesn't respect padding on the right side.
Maybe this can help.
Don't set it in background image try insert it in img tag
*{box-sizing: border-box;}
body {
margin: 0;
}
.background-image {
border-radius: 8px;
background-size: cover;
background-repeat: no-repeat;
height: auto;
}
.container {
display: table;
width: 100%;
}
.img {
display: table-cell;
width: 100%;
position: absolute;
z-index: -1;
}
.img img {
width: 100%;
}
.text {
display: table-cell;
padding: 30px;
width: 100%;
}
<div class="background-image">
<div class="container">
<div class="img">
<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
</div>
<div class="text">
<h1>Are you ready</h1>
<p>Click the link</p>
<button>Click Here</button>
</div>
</div>
</div>
NOTE: The image is stretched to full width because its resolution is low. you can set it's width to auto to display its original size.
Solution 2:
As the OP mentioned, padding is not respected by the image. I came up with a solution. Since the .container div is in display: table; padding isn't allowed there. So, by giving the padding to its parent .background-image this issue will be lifted.
*{box-sizing: border-box;}
body {
margin: 0;
}
.background-image {
border-radius: 8px;
padding: 15px 40px;
}
.container {
display: table;
width: 100%;
max-width: 100%;
position: relative;
}
.img {
display: table-cell;
width: 100%;
position: absolute;
z-index: -1;
}
.img img {
width: 100%;
}
.text {
display: table-cell;
padding: 30px;
width: 100%;
}
<div class="background-image">
<div class="container">
<div class="img">
<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
</div>
<div class="text">
<h1>Are you ready</h1>
<p>Click the link</p>
<button>Click Here</button>
</div>
</div>
</div>
Set padding for .background-image div so that the padding will apply.
So you want your image to determine the height of your div. That is not possible when using the image as background.
You need to load image into dom as an element which can then be used to determine the height of your div, if you want to show some content on top of the image in this case, you will have to overlay it on top of the image.
Here's a sample html structure you can use to achieve this
<div style="position:relative">
<img src="https://images.unsplash.com/photo-1573496528816-a104a722b3db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%; height: auto;" />
<div style="position:absolute; top: 0; left: 0; width: 100%; height: 100%">
// YOUR CONTENT
</div>
</div>
Here is how I ended up solving it:
import PropTypes from 'prop-types';
import React from 'react';
import styles from './background-image-card.module.css';
function BackgroundImageCard({ alt, children, className, image }) {
return (
<div className={`${className} ${styles.container}`}>
<div className={styles.overlay} />
<img alt={alt} src={image} className={styles['background-image']} />
<div className={styles.content}>{children}</div>
</div>
);
}
BackgroundImageCard.propTypes = {
alt: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
image: PropTypes.string,
};
export default BackgroundImageCard;
.container {
align-items: center;
display: flex;
justify-content: center;
position: relative;
width: 100%;
}
.overlay {
background: var(--gray-800);
border-radius: 8px;
height: 100%;
opacity: 0.8;
position: absolute;
width: 100%;
}
.background-image {
border-radius: 8px;
height: auto;
width: 100%;
z-index: -1;
}
.content {
position: absolute;
}
My parent div has a variable height depending on the size of the window.
I have an #image-container and a #second-container that I am trying to fit inside my parent div. My #second-container is also a variable height depending on the screen size and I am trying to get it to affix to the bottom of the parent container.
Right now I am accomplishing this via javascript but I was wondering if there was anyway to do this using pure css.
function resize() {
var header_height = $("#header").height(),
second_container = $("#second-container").height(),
image_container = $("#image-container").height();
document.getElementById('image-container').style.height = header_height - second_container +'px';
}
resize();
$( window ).resize(function() { resize(); });
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
* { margin:0; padding:0 }
#header {
background-color:#f0f0f0;
height:100vh;
}
#image-container {
background-image:url('https://images.unsplash.com/photo-1428509774491-cfac96e12253');
background-size:cover;
background-position:center;
height:50vh;
}
#second-container {
font-size:0;
}
.grid {
vertical-align:top;
display:inline-block;
width:25%;
}
.box {
padding-bottom:56.25%;
border:1px solid #232323;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="image-container"></div>
<div id="second-container">
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
</div>
</div>
The solution would be to make the position of the header relative and the position of the container absolute and fixed to the bottom. This can be achieved by adding the following to your css:
CSS:
#header{
position: absolute;
}
#second-container{
position:absolute;
bottom:0;
}
Edit:
If you want to do this without absolute positioning the solution would be to make the image an object rather than a background. Here is a JSFiddle that shows this. You will have to modify the height/width some but this should solve your problem.
HTML:
<div id="header">
<div id="second-container">
<div class="image"><img src="https://images.unsplash.com/photo-1428509774491-cfac96e12253"></div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
</div>
</div>
CSS:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0
}
#header {
background-color: #f0f0f0;
height: 100vh;
/* position: relative; */
/* background-image: url('https://images.unsplash.com/photo-1428509774491-cfac96e12253'); */
/* background-size: cover; */
/* background-position: center; */
}
img{
height:100vh;
object-size:contain;
}
#second-container {
font-size: 0;
position: relative;
left: 0;
bottom: 0px;
width: 100%;
z-index: 100
}
.grid {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: #ddd;
margin:0;
}
.box {
box-shadow: 0 0 0 1px #232323 inset;
height: 80px;
}