I am trying to make a simple flex layout:
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width: 100%;
}
#chatContainer {
background-color: red;
width:100%;
}
#usersContainer {
background-color: green;
width:320px;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>
The problem is : when rendered, the width of #usersContainer is not 320px but... 274px !
Any idea on how to correct that ? (I need to use display:flex, not absolute)
You are facing the shrink effect. Since the total width (100% + 320px) is bigger than 100% both your elements will shrink equally to fit their parent container.
To avoid this you can disable the shrink for the second div:
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width: 100%;
}
#chatContainer {
background-color: red;
width:100%;
}
#usersContainer {
background-color: green;
width:320px;
flex-shrink:0;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>
Or don't use width:100% and replace it with flex:1 so that your first div will fill the remaining space left by the second one:
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width:100%;
}
#chatContainer {
background-color: red;
flex:1;
}
#usersContainer {
background-color: green;
width:320px;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>
You can use calc() in #chatContainer, or min-width in #usersContainer, or use them both like in example below.
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width: 100%;
}
#chatContainer {
background-color: red;
width:calc(100% - 320px);
}
#usersContainer {
background-color: green;
width:320px;
min-width: 320px;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>
Related
I have a layout similar to table that contains 3 columns.
The first column is 40px，second is auto width by it content, third is the rest available width.
The rows should be highlight when hover, and have click listener.
Tried to use table and grid box layout. But still have some problems.
Table:
table-layout: fixed, can't get the real rest width.
table-layout: auto, can't set max-width of table.
Grid:
wrap cells with row, the column can't be a same width(not align).
unwrap, can't set the row event and style.
So, is there any solution to reslove the problems.
codepen: https://codepen.io/Woody-lxf/pen/dyOQezE
<section style="width:300px">
<main>
<div class="row">
<div class="col1"><input type="checkbox"/></div>
<div class="col2">type: checkbox <br/> value:1111111</div>
<div class="col3">The Description 11111111</div>
</div>
<div class="row">
<div class="col1"><input type="radio"/></div>
<div class="col2">type: radio <br/> value:2</div>
<div class="col3">The Description 22222222222222222222</div>
</div>
</main>
<hr/>
<main class="table">
<div class="tr">
<div class="td1"><input type="checkbox"/></div>
<div class="td2">checkbox <br/> value:1</div>
<div class="td3">The Description 11111111</div>
</div>
<div class="tr">
<div class="td1"><input type="radio"/></div>
<div class="td2">radio <br/> value:2</div>
<div class="td3">The Description 22222222222222222222</div>
</div>
</main>
</section>
main{
background:#f7f7f7;
}
main *{
box-sizing:border-box;
}
.row{
display:grid;
grid-template-columns: 40px minmax(min-content, 40px) auto;
width:100%;
cursor:pointer;
}
.row:hover{
background:#e6e7e8;
}
.row>*{
padding:4px 8px;
white-space:nowrap;
}
.col3, .td3{
overflow:hidden;
text-overflow:ellipsis;
}
.table{
width:100%;
table-layout:fixed;
display:table;
}
.tr{
display:table-row;
cursor:pointer;
}
.tr:hover{
background:#e6e7e8;
}
.tr>*{
display:table-cell;
padding:4px 8px;
white-space:nowrap;
}
.td1{
width:40px;
}
Not 100% sure what you want, but if I understand correctly, it can be done with flex:
<div className="container">
<div className="column1" />
<div className="column2" />
<div className="column3" />
</div>
And css just like this:
.container {
height: 80vh;
width: 80vw;
margin: auto;
display: flex;
padding: 5px;
}
.column1 {
background: lightgreen;
height: 100%;
width: 250px;
}
.column2 {
background: lightcoral;
height: 100%;
}
.column2:hover {
background: lightgreen;
}
.column2:active {
background: yellow;
}
.column3 {
background: lightblue;
height: 100%;
}
I have some specific problem with CSS. I was trying to find a solution but I couldn't find this kind of example:
.container {
background: blue;
height: 50px;
}
.nested {
background: red;
width: calc(100vh - 20px);
}
.primary {
background: yellow;
height: 50px;
float: left;
}
.secondary {
background: green;
height: 100%;
float: left;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div>
</div>
<div class="secondary">
wwwwwww
</div>
</div>
I've created a Fiddle with a simple version of the problem:
https://jsfiddle.net/7nwxfgg5/
I want to extend the Green div to fill all of the available Blue container width, but I don't have any idea how I can do that.
EDIT
Removing float: left helped with width, but now I noticed that it doesnt work with height, please check this snippet:
.container {
background: blue;
}
.nested {
background: red;
height: 200px;
width: calc(100vh - 20px);
}
.primary {
background: yellow;
height: 50px;
float: left;
}
.secondary {
background: green;
height: 100%;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div>
</div>
<div class="secondary">
wwwwwww
</div>
</div>
How can I resize green div to the same height as red?
Flex is really hand for layouts. I find float to be more trouble than it's worth so I try to avoid it. It makes building responsive layouts much easier. Here is a good resource to learn more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
background: blue;
height: 50px;
display:flex;
}
.nested {
background: red;
width: 100%;
}
.primary {
background: yellow;
flex:0 0 50%;
}
.secondary {
background: green;
flex:0 0 50%;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div><!-- nested -->
</div><!-- primary -->
<div class="secondary">
wwwwwww
</div><!-- secondary -->
</div><!-- container -->
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>
I've been trying to figure out what my right div is floating out of position.
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: 600px;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<title>Layout</title>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>
Any pointers? I know this is going to be deceptively simple but I've drawn a blank
div{
border: 1px solid #000000;
margin:3px;
}
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: auto;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
This is the correct way :
first put the floating elements (left - right) than the non floating one (main)
Also make shure you clear after float ("clear:both")
ps I give thhe main "with:auto" but is not necessary... only more compatible
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
Semantically, you probably should go with the main content of the page first, then the supporting content. This template also will shrink the content area based on the space available, although that can easily be adjusted with the CSS if you wanted a fixed layout by setting a specific width on the .content element.
<div class="header"></div>
<div class="content">
<div class="main">
<div class="main-inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
Then for the CSS, you use something like this:
.header, .footer, .content {
clear: both;
}
.header, .footer {
height: 100px;
}
.content {
width: 100%;
max-width: 1000px; /* Keeps the site from growing beyond 1000px */
margin: 0 auto; /* Centers the content area */
}
.main, .left, .right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin: 0 200px;
}
.left, .right {
width: 200px;
}
.left {
margin-left: -100%; /* Puts the left sidebar to the top left of the .content element */
}
.right {
margin-left: -200px; /* Puts the right sidebar on the right edge of the .content element */
}
/* Colors and Heights so you can see things */
.main-inner, .left, .right { min-height:600px; }
.header, .footer { background-color: red; }
.main-inner { background-color: yellow; }
http://jsfiddle.net/j1rLfmky/