In our ecommerce project all photos are squares. So some products have a lot of whitespace on top and bottom. I wan't to 'cut' that space without editing the photos (thousands). I almost achieved my goal. But parent DIV stretches to basic 100% of the IMG.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
height: 60%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
You could remove height: 60% from your image (which doesn't affect your image, but the .media's div height, since that div has no height set to it.). Now the container div resizes depending on the image's size (or the content of the other '.purchase' div in the flex-container, if that has more height).
Hope it helps, since I am really just guessing what you are trying to do here.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Try removing the height:60%; from .landscape and instead set a fixed height for both .media and .landscape in pixels.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
height: 600px;
width: 100%;
}
.landscape {
object-fit: cover;
width: 100%;
height: 600px;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Ok,I've found a solution by using the Javascript. Hope I will find some day pure CSS/HTML solution.
window.onload = resizer;
window.onresize = resizer;
function resizer() {
var div = document.getElementById('media');
div.style.height = (div.offsetWidth / 1.5) + 'px';
};
div {
box-sizing: border-box;
}
.container {
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
#media {
flex: 1;
overflow: hidden;
margin-right: 20px;
background-color: grey;
}
#media > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.purchase {
width: 360px;
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello world!</title>
</head>
<body>
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div id="media">
<img src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
</body>
</html>
Related
I have a fixed width element that needs to be centered when it fits on the page but if not then extend beyond the page width accessible with page scroll. I've got close to making this work but it overlaps the sidebar.
1/ How can I centre the large-fixed-grid (green element) if it fits inside the container/screen width but if not start it from after the sidebar?
2/ Additionally, if I scroll horizontally to show the fixed width element, the top-header shows a gap with difference between screen width and large-fixed-grid width (red element). Is there a way to offset the top-header inline with the scrolling horizontally so there is no white gap?
The yellow element should still be centred on the original width without scrolling. It currently behaves as expected.
I have tried lots of CSS variations but cannot get this working.
JSFiddle: https://jsfiddle.net/7tg2jo69/
Image:
Html:
<!DOCTYPE html>
<html>
<header class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row justify-content-center">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.small-flexible-grid {
background: yellow;
width: 60%;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
height: 100px;
}
Update:
I've fixed 1/ by removing class justify-content-center entirely and adding margin: auto; to both .small-flexible-grid and .large-fixed-grid
how about change the styles to
.large-fixed-grid {
background: green;
width: 100%;
max-width: 600px;
height: 100px;
}
Solved both of these using the following
JSFiddle: https://jsfiddle.net/m9wdzgb1/
Html:
<!DOCTYPE html>
<html>
<header id="top-header-onscroll" class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.small-flexible-grid {
background: yellow;
width: 60%;
margin: auto;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
margin: auto;
height: 100px;
}
Javascript:
window.onscroll = function (e) {
var top_header = document.getElementById('top-header-onscroll');
if (top_header) {
if (window.pageXOffset > 0) {
top_header.style.width = (window.innerWidth + window.pageXOffset - 30) + 'px';
}
else {
top_header.style.width = "";
}
}
}
I would like to have a layout as follows:
Whereby I have a parent container, and centred inside of that is a breadcrumb. However, I also would like a logo inside of the container which floats to the left of the breadcrumb, but respects the boundaries of the breadcrumb.
I have been playing around with flexbox and can only get it to work with absolutely positioning the logo, which means the breadcrumb does not respect the boundaries of the logo.
I have put together a JSFiddle playground here: https://jsfiddle.net/joyqwpc1/25/.
The difficult thing is, the logo can be a variable width, so setting a margin is not viable for this.
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 50px;
}
#logo {
height: 50px;
width: 50px;
background-color: blue;
position: absolute;
left: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
I've created 2 separate containers for the logo and breadcrumbs and set them a width. Then, I aligned elements inside these containers.
https://jsfiddle.net/dmitriifrlv/vbhxrj1u/39/
<div id="container">
<div class="logoContainer">
<div id="logo">
</div>
</div>
<div class="breadcrumbContainer">
<div id="breadcrumb">
</div>
</div>
</div>
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
}
.logoContainer{
width: 10%;
height: 100%;
background: yellow;
}
#logo {
height: 50px;
width: 100%;
background-color: blue;
}
.breadcrumbContainer{
width:90%;
display: flex;
justify-content: center;
}
#breadcrumb {
width: 200px;
max-width: calc(100% - 2rem);
height: 20px;
background-color: green;
}
For clean solution a little bit of JavaScript is needed:
Make sure to click "Run with JS" button: https://jsbin.com/ziziqidole/edit?html,output
<html>
<head>
<script>
function handleResize() {
var crumb = document.getElementById("breadcrumb");
var logoWidth = document.getElementById("logo").offsetWidth;
var calcWidth = (window.innerWidth - crumb.offsetWidth) / 2 - logoWidth;
if (calcWidth < 10) {
calcWidth = 10;
}
crumb.style.marginLeft = calcWidth;
}
</script>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body onresize="handleResize()" onload="handleResize()">
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
Solution without JavaScript. But some hardcoding needed e.g. logo width and crumb width.
https://jsbin.com/juxijowova/edit?html,output
<html>
<head>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
position: absolute;
left: max(260px, 50%); /* logo width + breadcrumb width/2 + margin*/
transform: translate(-50%, 0);
/*margin: 0 auto;
margin-left: 10px;/*use this if want to center on remaining area instead of screen center*/
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body>
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
This is usually how I lay something like this out: 3 containers, the side 2 will flex to fill space equally because they have the same exact basis (auto basis would break this because the left "Logo" content would be included in the basis for the left container). The middle is sized to the content and stays centered unless it becomes too wide and will start to take up space on the right and become uncentered.
.f-row {
display: flex;
}
.left-box {
flex: 1 1 0.0000001px;
padding: 1em;
border: 1px solid blue;
}
.middle-box {
padding: 1em;
border: 1px solid red;
justify-self: center
}
.right-box {
padding: 1em;
border: 1px solid green;
flex: 1 0 0.0000001px;
}
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space > Too Much Now It's Taking Up Space From the Right, Uncentered Now</div>
<div class="right-box"></div>
</div>
I'm trying to make a home page where there is 6 blocks of images with 3 columns. But also want those 6 blocks to show as 2 columns on mobile view.
I have attached some images of what I want it to look like and my code that I'm using. I've tried different types of flex-wrap but I'm not getting it to work properly.
Here is the link to jsfiddle - https://jsfiddle.net/7frjmeat/
Here is the current desktop view
Here is what I'm hoping for the mobile view to look like -
Code
html,
body,
a,
{
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
}
.flex div {
flex: 1;
padding: 2px;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
<div class="line-break"></div>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
So you need to put all of the elements inside of one flex box to really have it effect the whole group. Additionally you need to set break-points for CSS to know how many items are in a row. I generally just use min-width.
Basically set a width on items, used box-sizing to include the padding in the width, used flex-wrap to wrap content, and changed the width on the mobile version to be a two column layout. **Edit I also altered the HTML to put everything in one flex-box container.
Here's the code working for your layout. Granted it loses the HR tag.
CSS
html,
body,
a {
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
flex-wrap: wrap;
flex-basis: auto;
justify-content: space-evenly;
}
.flex div {
flex: 1;
padding: 2px;
min-width: 33%;
box-sizing: border-box;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
.flex div {
min-width: 50%;
}
}
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<center>
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
</center>
If the width of a parent div is flexible, but the contents inside of a div don't have to be, you can use display: inline-block in the image class. This will help you get the effect that you want to achieve.
An example implementation would be
<div class="main-container">
<img class="inline-image" src="img1">
...
</div>
This is just a basic example; but you can achieve this behavior using either Flexbox or CSS Grid, depending on how exactly you want the items to arrange themselves.
Flexbox usually is better for one-dimensional layouts, that meaning, when you want items to be aligned in one direction (either columns or rows); while CSS Grid is a lot easier to handle two-dimensional layouts where you need items to be aligned in both directions.
Take a look:
body * {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: center;
grid-gap: 15px;
grid-auto-rows: minmax(100px, auto);
}
.grid-item {
border: 1px solid black;
}
.flex {
width: 100%;
max-width: 650px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 30%;
margin: 5px;
}
#media (max-width: 590px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 45%;
margin: 5px;
}
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
I have a layout that is utilizing flex to hold images of varying sizes together.
However, when I resize the browser in Firefox the images don't scale evenly.
I have read a lot of posts about what causes the issue, but I am having a difficult time finding the solution for my particular scenario in the sea of information. Anyone have any ideas?
Image of where the breaks are happening in firefox.
*{box-sizing: border-box;}
.container{
max-width: 1360px;
margin: 0 auto;
}
img{
border:2px solid white;
}
.flex-row {
justify-content: flex-start;
align-items: flex-start;
width: 100%;
display: flex;
flex-direction: row;
}
.flex-column{
align-items: flex-start;
height: 100%;
max-width: 1360px;
display: flex;
flex-direction: column;
}
#media (max-width: 600px) {
.flex-column, .flex-row{
display: block;
}
img{
width: 100%;
}
}
<div class="container">
<div class="flex-row row">
<div class="flex-column">
<div><img src="https://placehold.it/548x227"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
<div class="flex-column">
<div class="flex-row">
<div><img src="https://placehold.it/812x459"></div>
</div>
<div class="flex-row bug">
<div><img src="https://placehold.it/406x227"></div>
<div><img src="https://placehold.it/406x227"></div>
</div>
</div>
</div>
<div class="flex-row row">
<div><img src="https://placehold.it/812x459"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
</div>
Here is a link to the code: https://codepen.io/enigmas2/pen/zZYPJj
i'm pretty sure firefox's flex-box is bugged out. columns don't seem to work properly.
despite that, you can kind of achieve the same thing using the float property. it took more code than i expected, however.
a potential issue is that a lot of elements have fixed heights. as i mentioned before, too, another issue with doing it this way is that images will be cropped. (notice the ikea and cheerio logos. it's because their widths far outweighs their heights).
here is a codepen.
body {
margin: 0;
}
#container {
width: 75vw;
height: 1145px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#row-one {
width: 75vw;
display: block;
}
#left-column {
width: 40.294117647058823529411764705882%;
height: 686px;
float: left;
display: flex;
flex-direction: column;
}
#top-left-image {
width: 100%;
height: 227px;
background: url('https://i.ytimg.com/vi/cNGG2SswaKo/maxresdefault.jpg') center/cover;
}
#middle-left-image {
width: 100%;
height: 459px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/8b/da/34/8bda3460f271a77a54b4cfc08583b1fc.jpg') center/cover;
}
#right-column {
width: 59.705882352941176470588235294118%;
height: 686px;
float: right;
display: flex;
flex-direction: column;
}
#top-right-image {
width: 100%;
height: 459px;
background: url('http://cdn.designcrowd.com.s3.amazonaws.com/blog/Famous-Purple-Logos/1-famous-purple-logos.png') center/cover;
}
#right-column-row {
width: 100%;
}
#middle-middle-image {
width: 50%;
height: 227px;
float: left;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/1024px-Ikea_logo.svg.png') center/cover;
}
#middle-right-image {
width: 50%;
height: 227px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/originals/f9/bd/c8/f9bdc85df698cd33535f3517659b9c03.jpg') center/cover;
}
#row-two {
width: 75vw;
height: 459px;
display: block;
}
#bottom-left-image {
width: 59.705882352941176470588235294118%;
height: 459px;
float: left;
background: url('http://logok.org/wp-content/uploads/2014/11/Sprite-logo-2014.png') center/cover;
}
#bottom-right-image {
width: 40.294117647058823529411764705882%;
height: 459px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/736x/58/6f/a9/586fa96b662feb46fd10d179a3f5308d.jpg') center/cover;
}
#media screen and (max-width: 768px) {
#left-column, #right-column, #right-column-row, #bottom-left-image, #bottom-right-image {
width: 100%;
float: none;
}
.some-images {
width: 100%;
}
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="a.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<div id="container">
<div id="row-one">
<div id="left-column">
<div class="not-all-images" id="top-left-image"></div>
<div class="not-all-images" id="middle-left-image"></div>
</div>
<div id="right-column">
<div class="not-all-images" id="top-right-image"></div>
<div id="right-column-row">
<div id="middle-middle-image"></div>
<div id="middle-right-image"></div>
</div>
</div>
<div>
<div id="row-two">
<div class="not-all-images" id="bottom-left-image"></div>
<div class="not-all-images" id="bottom-right-image"></div>
</div>
</div>
</body>
</html>
I'm currently strugging to make a node-webkit app fit the height of the current window. Below is an image of what I'm trying to achieve.
Desired result :
HTML :
<body>
<div class="header">
THIS IS A HEADER WITH LINKS AND THINGS
</div>
<div class="content">
<div class="sidebar">
SIDE BAR WITH MORE LINKS AND THINGS
</div>
<div class="mainarea">
<div class="chatbox">
SOME SORT OF BOX WITH THINGS IN
</div>
<form>
<input name="q" placeholder="type something here"/>
<input type="submit" value="Send"/>
</form>
</div>
</div>
</body>
CSS :
body {
height: 100%;
}
.header {
height: 80px;
background-color: red;
}
.content {
width: 100%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
.chatbox {
width: 100%;
border-style: solid;
border-width: 1px;
}
.mainarea {
float: right;
width: 80% !important;
background-color: green;
height: 100%;
}
Demo :
JSFiddle
Instead of float:right/left for .mainarea/.sidebar use display:table-cell. Also :
body, html { height: 100%; margin:0; }
.content { width: 100%; height: calc(100% - 80px); display:table; }
JSFiddle
You could use flexbox too.
http://jsfiddle.net/tetm7/
HTML
<div class="main">
<div class="header">HEADER</div>
<div class="content">
<div class="sidebar">SIDEBAR</div>
<div class="box">TEXT BOX</div>
</div>
</div>
CSS
html, body, .main {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.content {
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
background-color: yellow;
}
.sidebar {
background-color: orange;
width: 200px;
}
.box {
background-color: green;
width: 300px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}