I am trying to make a div that contains 4 columns.
The first one should be rotated vertically. Text in it should be centered vertically and horizontally. It also should have a background and width 10%.
The rest columns (2, 3, 4) should have width 30%.
What is the best approach to do this?
P.S. Of course the div should be responsive and should look good at any resolution.
Remember, you will need to add min-height or height if the other divs with(30% width has too little content). in my case i added 300px;
.flex {
display: flex;
}
.flex-center-all {
display: flex;
justify-content: center;
align-items: center;
width: 10%;
background: green;
min-height: 300px;
}
.rotate {
transform: rotate(90deg);
}
.container {
width: 100%;
}
.container > div:not(.flex-center-all) {
width: 30%;
}
<div class="flex container">
<div class="flex-center-all">
<div class="rotate">rotate</div>
</div>
<div>text <br> txt</div>
<div>text</div>
<div>text</div>
</div>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I want to make a typical Header/Content/Footer Layout in CSS with Flexbox. Header and Footer should have a fixed size. The Content should scale with the wrapper, so I thought I give it a flex property of 1.
Works pretty well, but I want to have a img in the Content div that scales up to 100% in height of the div.
For small Images it works but when it exceets the size of the content div, the div scales to the img??
I modeled the Problem:
.wrapper{
display: flex;
flex-direction: column;
height:200pt;
background: grey;
}
.a{
height:50pt;
background: blue;
}
.b{
flex: 1;
background: red;
}
.b img{
height:100%;
}
.c{
height:50pt;
background: green;
}
<div class="wrapper">
<div class="a"></div>
<div class="b">
<!--
With Small Image it works!
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/WLE_Austria_Logo_%28no_text%29.svg/50px-WLE_Austria_Logo_%28no_text%29.svg.png">
-->
<img src="https://i.chzbgr.com/full/7006036736/h52434C0A/computer-says-no">
</div>
<div class="c"></div>
</div>
The reason why this happens with flex is that the flex container by default cannot be smaller than its content. So even if you set its height to 100%, the moment you put more content in it than fits, it will expand.
The solution for that is using min-height: 0 on this flex container.
.wrapper {
display: flex;
flex-direction: column;
height: 200pt;
background: grey;
}
.a {
height: 50pt;
background: blue;
}
.b {
flex: 1;
background: red;
min-height: 0;
}
.b img {
height: 100%;
}
.c {
height: 50pt;
background: green;
}
<div class="wrapper">
<div class="a"></div>
<div class="b">
<img src="https://i.chzbgr.com/full/7006036736/h52434C0A/computer-says-no">
</div>
<div class="c"></div>
</div>
I think the best solution would be to not use the fixed height for the wrapper to allow the wrapper to scale based on its content. Also, give image display block to get rid of unnecessary spacing:
.b img{
display: block;
}
.wrapper{
min-height:200pt;
}
I'm trying to build a flexible layout that should adapt to different screen sizes as the following pictures show.
It's basically two div rows, occupying each 50% of the vertical size of the screen.
Top div is a container to hold pictures and bottom div will display a leaflet map.
I'd like the Image div to keep aspect ratio so image is not deformed, ans Map div to adapt horizontally.
So far, my code is basic and looks like this :
<div id="container">
<div id="Top div">
<div id='image'>Image</div>
</div>
<div id="Bottom div">
<div id='map'>Map</div>
</div>
</div>
Any idea of the CSS style I should add to each div to achieve this layout ?
Image layout desktop
Image layout smartphone
You could use Flexbox to achieve this layout. Refer to my CSS below and check out the attached Codepen.
#container {
display: flex;
flex-flow: row wrap;
}
#Top {
display: flex;
flex: 1 1 100%;
padding-bottom: 1rem;
}
#image {
flex: 0 1 50%;
margin: auto;
padding: 3rem;
background-color: #ccc;
text-align: center;
}
#Bottom {
flex: 1 1 100%;
}
#map {
padding: 5rem;
background-color: green;
text-align: center;
}
If, for some reason you cannot use flexbox you can achieve this easily. The main trick is to add an element to act as a wrapper to the image, set a height/width to this element and then set the max-width/max-height on the image to 100%. This way it will scale without deforming.
To achieve occupying each 50% of the vertical size of the screen you can set the height to 50vh.
#map {
background-color: green;
height: 100%;
}
.section {
height: 50vh;
}
.img-container {
width: 100%;
text-align: center;
}
.sample-img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="Top div" class="section img-container">
<img class="sample-img" src="https://via.placeholder.com/180" alt="image" />
</div>
<div id="Bottom div" class="section">
<div id='map'>Map</div>
</div>
</div>
I'm trying to create a two-column section where:
Columns have same width (responsive)
The height of block is defined by the height of image contained in left column after it stretches to 100% of it's parent.
In the right column there are several elements one of which is a link containing image.
I want that link with image from last paragraph to shrink it's height containing original image aspect ratio without stretching the it's container when the image has portrait orientation.
Not sure it its possible with plain CSS. Tried with flexbox and grid layout but I must be missing something.
I prepared a fiddle: https://jsfiddle.net/Kuznets/8u6c70ku/3/
* { box-sizing: border-box }
.wrap { max-width: 80%; margin: 0 auto; }
.container { display: flex; }
.left, .right {
flex: 0 0 50%;
border: 1px solid black;
}
.left {
position: relative;
display: flex;
align-items: flex-end;
}
.left div.left-text {
position: absolute;
color: white;
padding: 1em;
font-size: 200%;
}
.should-set-height {
width: 100%;
}
.right {
display: flex;
flex-direction: column;
align-items: center;
justify-content:space-between;
}
<div class="wrap">
<div class="container">
<div class="left">
<img class="should-set-height" src="https://dummyimage.com/200x240/aaaaaa/ffffff" alt="">
<div class="left-text">
This is a beautiful slogan
</div>
</div><!--/.left-->
<div class="right">
<header>Product title</header>
<a class="fit-height" href="javascript:void(0)">
<img class="should-shrink" src="https://dummyimage.com/200x400/aaaaaa/ffffff">
</a>
<div class="price">$ 19.99</div>
<button class="button-black">Add to basket</button>
</div><!--/.right-->
</div><!--/.containter-->
</div><!--/.wrap-->
One way you could accomplish this would be to have the left image set to have width: 100%, height: auto; then use a background image for the right container.
Here's a quick demo on CodePen: https://codepen.io/patriziosotgiu/pen/NaBmZe?editors=1100
You could also add extra rules, like for instance a min-width for the left column, or have those columns fit in one column for mobile.
Note: I assumed the left image to be larger than 200x240px
I have a div that uses the background-image attribute with background-size set to cover. Within the <div> that contains the background image, I have a <div> that contains a text block and a <div> that contains an image.
I am trying to vertically align the two <div>s within the background image.
I have code (below) that vertically aligns the <div>s relative to each other but not within the background image. I understand that my code does not work because the vertical alignment needs to happen at the bg class level but I can't figure out how to make it work.
I have the following HTML
<div class="bg">
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6">
<h4 class="text-center">Zack Gallinger has an MBA from Rotman School of Management. He also runs The 10 and 3, a Canadian data journalism site.</h4>
</div>
<div class="col-xs-6">
<img src="http://www.lucidwebgrouptest3.com/Images/Zack.jpg" class="img-circle">
</div>
</div>
</div>
</div>
and CSS
body,
html {
height: 100%;
}
.bg {
background-image:
url("http://www.lucidwebgrouptest3.com/Images/Background.jpg");
height: 60%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
h4 {
color: white;
}
The code is also on CodePen.
You need to add a height to container and row, so they match the bg
.container {
height: 100%;
}
.vertical-align {
height: 100%;
display: flex;
flex-direction: row;
}
Updated codepen
What would be the best way, given any number of elements in a container, to align some elements to the left and some to the right while centering both left and right content vertically?
For example, given this markup:
<div class="action">
<div class="message">This is our message</div>
<div class="comment">Comments for the message</div>
<div class="person">John Doe</div>
<div class="date">01/18/2013</div>
<div class="time">12:35 PM</div>
</div>
Can the message and comment be left aligned in the action container while the person, date and time are right aligned with both left and right content vertically centered? Can this be done without new markup and with any content length for each element?
Thanks.
Some CSS would do the trick. Have the containing div position: relative, and float the children div's either left or right. Also center-align the text.
.container{
position: relative;
}
.left{
float: left;
width: 50%;
background-color: Silver;
text-align: center;
}
.right{
float: right;
width: 50%;
background-color: Yellow;
text-align: center;
}
Fiddle Example
With a minimal change to existing markup (introduction of two div tags, one for each column), this becomes rather trivial if you use Munawwar's flex-helper.
HTML:
<div class="hbox flex">
<div class="left vbox main-center">
<div class="message">
<p>This is our message.</p>
<p>It spans many lines.</p>
<p>Or rather, paragraphs.</p>
<p>Additional waffle.</p>
<p>Syrup, bacon, a banana.</p>
<p>Tall glass of milk.</p>
</div>
<div class="comment">Comments for the message.</div>
</div>
<div class="right vbox main-center">
<div class="person">John Doe</div>
<div class="date">01/18/2013</div>
<div class="time">12:35 PM</div>
</div>
</div>
CSS:
/*Example-specific CSS*/
/*left column*/
.left {
width: 80%;
background-color: Silver;
text-align: center;
}
/*right column*/
.right {
width: 20%;
background-color: Yellow;
text-align: center;
}
/*Minimal use of Munawwar's flex-helper*/
/* https://github.com/Munawwar/flex-helper */
/*Stack child items vertically*/
.vbox {
display: flex;
/*Align children vetically*/
flex-direction: column;
align-content: flex-start;
/*Prevent extending beyond boundaries*/
overflow: hidden;
}
/*Stack child items horizontally*/
.hbox {
display: flex;
/*Align children horizontally*/
flex-direction: row;
align-content: flex-start;
/*Wrap items to next line on main-axis*/
flex-wrap: wrap;
/*Prevent extending beyond boundaries*/
overflow: hidden;
}
/*Stretch item along parent's main-axis*/
.flex {
flex: 1;
}
/*Stack child items to the main-axis center*/
.main-center {
justify-content: center;
}
JSFiddle demo
No waffles were harmed in the production of this answer, though some may have been eaten.