I'd like to display four elements side by side. I'm using display: table and display: table-cell to accomplish this:
#container {
width: 960px;
background-color: orange;
height: 400px;
}
#table {
display: table;
table-layout: fixed;
border-spacing: 10px;
width: 100%;
}
div.item {
display: table-cell;
height: 150px;
background-color: blue;
}
<div id="container">
<div id="table">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
</div>
How can I make the rightmost and leftmost cells flush with the container div's edge and maintain equal spacing between the inner cells?
Thank you!
An easy way would be to use border on cells instead of border-spacing. Then you could cancel out border on the first of last cell. Also, keep the colour same as that of your container.
div.item {
display: table-cell;
border: 10px solid orange; /* Same colour as of the container */
border-left: none; /* reset left border to keep uniform */
}
div.item:last-child { border-right: none; } /* remove from last one */
Example Snippet:
#container {
width: 960px;
background-color: orange;
height: 400px;
}
#table {
display: table;
table-layout: fixed;
width: 100%;
}
div.item {
display: table-cell;
height: 150px;
background-color: blue;
border: 10px solid orange;
border-left: none;
}
div.item:last-child { border-right: none; }
<div id="container">
<div id="table">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
</div>
You can remove the table div and make container display: flex with space-between justification.
<div id="container">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
#container {
display: flex;
justify-content: space-between;
}
.item {
background-color: red;
width: 24%;
}
https://jsfiddle.net/kyy7qgLz/2/
Related
I want possibly the simplest CSS code for aligning 2 lines of text with 1 single icon on the left side. I am attaching the sample here: https://prnt.sc/1udg41j
Please help with the minimal code if possible.
Make sure the image is within the same parent as the text and then to have the icon be on the left side. I believe you'll need to type:
example {
float: left;
}
It would be much easier if you included the code. :P
.main {
display: flex;
}
.iconbox {
display: flex;
align-items: center;
background-color: #f5f5f5;
}
.icon {
margin-right: 10px;
border: 1px solid red;
font-size: 42px;
height: 50px;
width: 50px;
display: grid;
place-content: center;
}
h3 {
margin: 0;
}
p {
margin: 5px 0 0;
}
<div class="main">
<div class="iconbox">
<span class="icon">⅀</span>
<div class="detail">
<h3>heading here</h3>
<p>discription here..</p>
</div>
</div>
<div class="iconbox">
<span class="icon">⅀</span>
<div class="detail">
<h3>heading here</h3>
<p>discription here..</p>
</div>
</div>
<div class="iconbox">
<span class="icon">⅀</span>
<div class="detail">
<h3>heading here</h3>
<p>discription here..</p>
</div>
</div>
</div>
I have have this following snippet and was wondering if anyone can help get the overflow corrected so the element with id "list" can be scrolled vertically while sized to the same height as the first two divs. Thank you!
#parent {
display: flex;
overflow: hidden;
}
#first, #second {
height: 200px;
width: 150px;
border: solid;
}
#list {
overflow-y: auto;
}
.item {
border: solid;
height: 150px;
width: 150px;
}
<div id="parent">
<div id="first">
</div>
<div id="second">
</div>
<div id="list">
<div class="item">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
<div class="item">
item 4
</div>
</div>
</div>
For that you need to restrict the height of #list and use overflow-x: hidden; on it. Then it will scroll. Note the width: 165px setting for #list to allow the border to be not covered by the scrollbar.
* {
box-sizing: border-box;
}
#parent {
display: flex;
}
#first,
#second {
height: 200px;
width: 150px;
border: solid;
}
#list {
overflow-x: hidden;
height: 200px;
width: 165px;
}
.item {
border: solid;
height: 150px;
width: 150px;
}
<div id="parent">
<div id="first">
</div>
<div id="second">
</div>
<div id="list">
<div class="item">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
<div class="item">
item 4
</div>
</div>
</div>
I want to arrange some items of variable width in a column, where the column has a fixed width. But I want elements to stack up next to each other if the total width of a group of elements doesn't exceed the column width. In the snippet, I want to add CSS to the first container so that that the 2nd and 3rd divs will be next to each other, as they are in the second container. I don't know the element widths in advance so I can't just do this manually by putting divs around the elements that should be adjacent. I want to also accomplish with just flexbox, not CSS grids if that's also a solution.
.container {
width: 500px;
border: 1px solid red;
}
.flexcol {
display: flex;
flex-direction: column;
align-items: center;
}
.inlineblock > div {
display: inline-block;
}
.item {
border: 1px solid black;
font-size: 24pt;
text-align: center;
}
.item1, .item4 {
width: 400px;
}
.item2, .item3 {
width: 200px;
}
<div class="container flexcol">
<div class="item item1">
Item 1
</div>
<div class="item item2">
Item 2
</div>
<div class="item item3">
Item 3
</div>
<div class="item item4">
Item 4
</div>
</div>
<div class="container flexcol">
<div class="item item1">
Item 1
</div>
<div class="inlineblock">
<div class="item item2">
Item 2
</div>
<div class="item item3">
Item 3
</div>
</div>
<div class="item item4">
Item 4
</div>
</div>
Fiddle here of same code: https://jsfiddle.net/6ycer7b0/1/
You can do this with a row direction and enable the wrap to simulate a column behavior as the elements will stack above each other:
.container {
width: 500px;
border: 1px solid red;
}
.flexcol {
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: center;
}
.item {
border: 1px solid black;
font-size: 24pt;
text-align: center;
}
.item1, .item4 {
width: 400px;
}
.item2, .item3 {
width: 200px;
}
<div class="container flexcol">
<div class="item item1">
Item 1
</div>
<div class="item item2">
Item 2
</div>
<div class="item item3">
Item 3
</div>
<div class="item item4">
Item 4
</div>
</div>
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I have the following (simplified) html & css:
<div class="container">
<div class="one">Some text for div 1</div>
<div class="two">Some text for div 2</div>
</div>
<style>
.two {float: right}
</style>
When both elements fit together in their container, I want it to look like;
Some text for div 1 Some text for div 2
However when they do not fit next to each other I want the second div's float to be removed, like;
Some text for div 1
Some text for div 2
How can I achieve this?
Flexbox can do that;
.parent {
border: 1px solid red;
margin: 1em auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.skinny {
width: 60%;
}
.left {
height: 50px;
background: green;
flex: 0 0 250px
}
.right {
height: 50px;
background: pink;
flex: 0 0 250px;
}
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="parent skinny">
<div class="left"></div>
<div class="right"></div>
</div>
my variant without flexbox and more cross-browser
.container{
font-size: 0;
text-align: justify;
}
.container::after{
content: "";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
.class-1, .class-2{
display: inline-block;
font-size: 14px;
text-align: left;
}
<div class="container">
<div class="class-1">Some text for div 1</div>
<div class="class-2">Some text for div 2</div>
</div>