I would like to have three separate vertical columns, is there a way I can change my code to make the columns vertical instead of horizontal (like they are now).
.cols {
font-weight: bold;
min-height: 50%;
min-width: 90%;
background: #000000;
margin-bottom: 15px;
display: table;
table-layout: fixed;
}
.cols div {
position: relative;
background: #232323;
}
.col {
display: table-cell;
}
<div class="cols">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
Currently I have three horizontal boxes stretching across an outside container, I would like the three boxes to be evenly set out in vertical columns, if that makes sense.
If I understand what you mean, this can be done using flex:
.cols {
min-height: 50%;
min-width: 90%;
background: #000000;
margin-bottom: 15px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.cols div {
background: #232323;
color: #fff;
}
<div class="cols">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
I would like to align the boxes vertically. It works fine if the words in the box is all in one line. However if the words in one of the box goes to 2 lines or more the box will not align properly.
.col {
display: inline-block;
width: 31%;
padding: 2px 5px;
}
.box {
height: 80px;
margin: 0 auto;
display: flex;
background-color: #f4f4f4;
justify-content: center;
align-items: center;
font-size: 20px;
text-decoration: none;
font-weight: normal;
}
<div class="col">
<div class="box">Box</div>
</div>
<div class="col">
<div class="box">This is a box</div>
</div>
<div class="col">
<div class="box">Please see inside this box for some contents to read</div>
</div>
you can use flex box to easily avoid this issue.
put all cols in a flex wrapper.
<div class="wrapper">
<div class ="col">
<div class="box">Box</div>
</div>
<div class ="col">
<div class="box">This is a box</div>
</div>
<div class ="col">
<div class="box">Please see inside this box for some contents to read</div>
</div>
</div>
.wrapper{
display: flex;
}
Its because the <div class="box"> overflow with content.
you could adjust class .box height and add some padding to align them right properly.
.box {
height: 80px;
margin: 0 auto;
display: flex;
background-color: #f4f4f4;
justify-content: center;
align-items: center;
font-size: 20px;
text-decoration: none;
font-weight: normal;
height: 100%;
padding: 28px;
}
Heres an example https://codepen.io/mcfaith9/pen/vYmJvLK
Add a flex parent .row which will contain your col cell columns
/*QuickReset*/ * {margin:0; box-sizing:border-box;}
.row {
display: flex;
}
.col {
display: flex;
flex-direction: column;
}
.cell-4 {
flex: 1 1 33.333%;
}
.box {
padding: 10px;
border: 1px solid #aaa;
background-color: #f4f4f4;
min-height: 80px;
}
<div class="row">
<div class="col cell-4">
<div class="box">Box</div>
</div>
<div class="col cell-4">
<div class="box">This is a box</div>
</div>
<div class="col cell-4">
<div class="box">Please see inside this box for some contents to read</div>
</div>
</div>
I have a flex wrapper with 3 columns, in third column there is rotated text, how can I place the text to the bottom right position of the column?
What I want:
What I have:
.wrapper {
border: 1px solid black;
padding-top: 50px;
display: flex;
justify-content: space-between;
}
.column-2 {
transform-origin: left bottom;
transform: rotate(-90deg);
}
<div class="wrapper">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
writing-mode can also be used to rotate text :
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).
possible examples:
.wrapper {
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.column-2 {
writing-mode: vertical-lr;
border: solid;
margin: 2em;
}
/* also */
.wrapper.bis {
align-items: end;
}
.bis .column-2 {
margin: 0;
}
<div class="wrapper">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
<hr>
<div class="wrapper bis">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
An older similar answer : How do I center a transformed and rotated div? (when prefix was to be used ) applied here without prefix would do :
.wrapper {
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.column-2 {
writing-mode: vertical-lr;
transform:scale(-1);
border: solid;
margin: 2em;
}
/* also */
.wrapper.bis {
align-items: end;
}
.bis .column-2 {
margin: 0;
}
<div class="wrapper">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
<hr>
<div class="wrapper bis">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
If you want to stick to transform, here is an older answer of mine that allows to stretch the container according to the string length : How to display vertical text in table headers with auto height / without text overflow?
text-orientation can be usefull too :
The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
You can do a display: flex on the columns div, and adjust them as you need. I've made an example on codepen
<div class="parent">
<div class="child first">Column 1</div>
<div class="child second">Column 2</div>
<div class="child third"><p>Column 3</p></div>
</div>
And then the CSS:
.parent {
display: flex;
}
.child {
width: 20%;
display: flex;
height: 100px;
border: 2px solid black;
}
.first {
font-size: 40px;
}
.second {
align-items: flex-end;
justify-content: center;
}
.third p {
transform: rotate(-90deg);
}
You can do something like this
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
Take a look at transform-origin
.wrapper {
font-family: Arial;
display: flex;
flex-direction: row;
}
.wrapper div {
padding: 0 20px;
}
.wrapper h3 {
font-size: 0.4em;
transform: rotate(-90deg);
transform-origin: 35px 16px;
}
<div class="wrapper">
<div>
<h1>Column 1</h1>
</div>
<div>
<h2>Column 2</h2>
</div>
<div>
<h3>Column 3</h3>
</div>
</div>
I'm trying to make a horizontally scrolling container that holds a bunch of tabs. I want to make an overlay (think an options menu) that can appear over a tab. And what I would like is for the overlay to sit over the top of the horizontal scrollbar. Here is an image with what I mean:
But here is what I actually get:
I've recreated my problem with a small example below:
.page {
display: flex;
flex-direction: column;
max-width: 800px;
margin: 0 auto;
}
.header {
height: 30px;
background: #ccc;
display: flex;
}
.items {
display: flex;
align-items: stretch;
margin-right: 0.5rem;
&:last-child {
margin-right: 0;
}
> * {
margin-right: 0.5rem;
&:last-child {
margin-right: 0;
}
}
}
//Why I'm using 2 wrappers: https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
.scroll-super-wrapper {
display: flex;
flex-grow: 1;
height: 100%;
width: 100%;
position: relative;
}
.scroll-wrapper {
display: flex;
flex-grow: 1;
overflow-x: hidden;
}
.tabs {
display: flex;
flex-wrap: nowrap;
align-items: start;
position: absolute;
top: 0;
right: 0;
bottom: -0.85rem; // Makes the scrollbar appear underneath
left: 0;
overflow-x: auto;
}
.tab {
background: #444;
color: #FFF;
display: flex;
align-items: center;
white-space: nowrap;
height: 100%;
text-align: center;
padding: 0 1rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
margin-right: 0.5rem;
position: relative;
&:last-child {
margin-right: 0;
}
}
.overlay {
position: absolute;
top: 100%;
left: 0;
height: 100px;
padding: 1rem;
background-color: black;
}
<div class="page">
<div class="header">
<div class="items left-items">
<button>Options</button>
<button>New</button>
</div>
<div class="items scroll-super-wrapper">
<div class="scroll-wrapper">
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">
Tab 3
<div class="overlay">
Overlay content
</div>
</div>
<div class="tab">Tab 4</div>
<div class="tab">Tab 5</div>
<div class="tab">Tab 6</div>
<div class="tab">Tab 7</div>
<div class="tab">Tab 8</div>
<div class="tab">Tab 9</div>
<div class="tab">Tab 10</div>
<div class="tab">Tab 11</div>
</div>
</div>
</div>
<div class="items left-items">
<button>Export</button>
<button>Share</button>
</div>
</div>
</div>
Stackoverflow's code snippets totally mess up the formatting. I've made a codepen here: https://codepen.io/anon/pen/rXLZgN
Is it possible to do this without using JavaScript to calculate the x/y coordinates and make the element position: fixed? I would like to do this with just CSS if possible.
You defined your tabs class as absolute to the relative scroll-super-wrapper
That means that the wrapper will always contain it.
so or you will built it again from in a different way.
or you can take your overlay class and set it position:fixed and it will take it out the relative of the wrapper (not recommended at all);
I am using a flex grid to lay out information. I want to highlight one of the cells within the grid so that it stands out to users by adjusting the height of the respective cell. However, my attempts have not gotten far as adjusting the properties of once cell will thereby affect the surrounding cells.
In my fiddle below, I have a class .highlighted within .flexbox-2 that I would like to change. Basically, the row 1 of the second column would have a taller height than the first and third column, but all the borders will still be aligned. I was thinking to apply position: absolute and change its CSS there, but this does not prove fruitful. I'm wondering if there are other routes I can take.
Check this jsfiddle
Code:
* {
box-sizing: border-box;
}
body {
font-family: helvetica, serif;
}
.container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flex {
display: flex;
flex-direction: column;
}
.flex-row {
flex: 1;
border: 1px solid;
}
.flexbox-1 {
-webkit-flex: 1;
border: solid 3px red;
}
.flexbox-2 {
-webkit-flex: 1;
border: solid 3px green;
height: 200px;
margin-left: 10px;
position: relative;
}
.highlighted {
position: absolute;
border: 1px solid yellow;
padding-top: 20px;
}
.flexbox-3 {
-webkit-flex: 1;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}
<div class="container">
<div class="flex flexbox-1">
<div class="flex-row">row 1</div>
<div class="flex-row">row 2</div>
<div class="flex-row">row 3</div>
</div>
<div class="flex flexbox-2">
<div class="flex-row highlighted">row 1</div>
<div class="flex-row">row 2</div>
<div class="flex-row">row 3</div>
</div>
<div class="flex flexbox-3">
<div class="flex-row">row 1</div>
<div class="flex-row">row 2</div>
<div class="flex-row">row 3</div>
</div>
</div>
If you want that first row to stick out above the other two columns, you could use a negative margin-top:
.highlighted {
border: 1px solid yellow;
margin-top: -10px;
padding-bottom: 10px;
}
Working Example
Need to split all tabs in such a way that. Last tab width will be 50% width and rest all tabs must fit in 50%. For now I gave fixed width: 16.65%. Would like to avoid it as there could 2 or 3 tabs excluding last tab.
Can this be achieved using display: flex ?
* {
margin: 0;
}
.wrapper {
overflow: hidden
}
.wrapper .tab {
float: left;
width: 16.65%;
text-align: center;
background: #ccc;
}
.wrapper .last-tab {
width: 50%;
background: #999
}
<div class="wrapper">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab last-tab">Last Tab</div>
</div>
You can do it like this:
* {
margin: 0;
}
.wrapper {
display: flex; /* displays children inline */
overflow: hidden;
}
.wrapper > .tab {
flex: 1; /* enables growing of flex-items so they can fill flex-containers width / this is the shorthand way, but you can also use: flex: 1 1 auto; (i.e. flex-grow, flex-shrink, flex-basis) */
/*float: left;*/
/*width: 16.65%;*/
text-align: center;
background: #ccc;
}
.wrapper > .last-tab {
/*width: 50%;*/
flex: 0 1 50%; /* adjusted to take half of the wrappers width (i.e. initial width is set to 50%) */
background: #999;
}
<div class="wrapper">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab last-tab">Last Tab</div>
</div>
If you want to do it pure flexbox way without the use of the width property.
try this
* {
margin: 0;
}
.wrapper {
overflow: hidden;
display: flex;
width: 100%;
}
.wrapper .tab {
width: calc(50%/3);
text-align: center;
background: #ccc;
}
.wrapper .last-tab {
width: 50%;
background: #999
}
<div class="wrapper">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab last-tab">Last Tab</div>
</div>
Take 2 blocks of 50-50%. Then you can easily divide inner divs as per your requirement.
Hope this helps you :)
* {
margin: 0;
}
.wrapper {
/*overflow: hidden*/
display:flex;
}
.wrapper .tab-container {
/*float: left;*/
display:flex;
width: 50%;
background: #ccc;
}
.wrapper .tab {
/*float: left;*/
display:flex;
width: 33.33%;
text-align: center;
}
.wrapper .last-tab {
width: 50%;
background: #999;
text-align: center;
}
<div class="wrapper">
<div class="tab-container">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="last-tab">Last Tab</div>
</div>