How to put blocks in line in html - html

I have the following code, where I wanted to align logo(picture) and one block, which includes Username, his level and progress bar. And used flex for it, but it ate my progress bar, how can I do it so error bar's width would be 100%?
<div class="class" id="user">
<img src="user.svg">
<div>
<h2>username</h2>
<h2> Уровень </h2>
<div id="container">
<div id="progress"> 80% </div>
</div>
</div>
</div>
The CSS of the page:
#user {
display:flex;
}
#container {
background-color: white;
width: 100%;
}
#progress{
background-color: #fd6a72;
width: 100%;
}


give your elements some width.
#user {
display: flex;
align-items: center;
}
#container {
background-color: white;
width: 100%;
}
#progress {
background-color: #fd6a72;
width: calc(100vw - 25px - 8px);
height: 20px;
}
img{
height:25px;}
<div class="class" id="user">
<img src="https://via.placeholder.com/25">
<div>
<h2>username</h2>
<h2> Уровень </h2>
<div id="container">
<div id="progress"> 80% </div>
</div>
</div>
</div>

Related

Problem laying out items in an image gallery

I am having trouble laying out my items in a gallery. I would like to be able to display an image in a horizontal or vertical format and have it fit within a fixed 300px x 300px box and align to the bottom of the box. I would like the "attribution" to line up with the right edge of the image. Here is a picture of the desired layout.
Picture of desired layout
This is the html:
.gallery {
display:flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
display: flex;
background: green;
}
.gallery_description {
height:auto;
width:100%;
}
.image_attribution {
display:flex;
flex-direction:column;
align-items:flex-end;
}
.image_square {
width: 100%;
height: 100%;
background: black;
display:flex;
flex-direction:column;
align-items:flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
}
.image {
height:100%;
background: green;
width:
}
.image_contain {
width: 100%;
height: 100%;
object-fit:contain;
object-position: bottom;
}
.attribution {
float:right;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>
I am unable to make the image fit within the box. Ive tried use "object-fit:contain" but to no avail. I would be grateful for any help you can offer.
Update: the code is almost working. The last item is to make the attribution align with edge of the image. align attribution to edge of image Here is the latest version of the code in Codepen.
https://codepen.io/acrossky/pen/KKoNdPX

Maybe something like this:
.gallery {
display: flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
background: green;
}
.gallery_description {
width: 100%;
height: auto;
}
.image_attribution {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.image_square {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
justify-content: center;
}
.image {
height: 100%;
width: 100%;
}
.image_contain {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
.attribution {
display: block;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>

Flex Layout not following flex percentages

I am trying out flex layout in my angular app.
I am trying to create a layout with base as :
I have tried writing a code.
my .html file
<div flexLayout = "row">
<div fxFlex="100%" class="first_bar">
Second Div
</div>
</div>
<div flexLayout = "row">
<div fxFlex="100%" class="second_bar">
Third Div
</div>
</div>
<div flexLayout = "row">
<div fxFlex="12%" class="third_bar_1">
Fourth Div 1
<!-- <h5>third div</h5> -->
</div>
<div fxFlex="86%" class="third_bar_2">
Fourth Div 2
</div>
</div>
.first_bar{
background-color: #cdf7fb;
height: 6%;
}
.second_bar{
background-color: #cdf7;
height: 12px;
}
.third_bar_1{
background-color: #6390c3;
}
.third_bar_2{
background-color: white;
}
But my output looks like
Flex Layout is not working properly and height of divs is also not being followed.
Can some one help me with this?

<div fxLayout="column" fxLayoutAlign="start space-between" fxLayoutGap="10px">
<div class="first_bar">
Second Div
</div>
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="10px">
<div fxFlex="12" class="second_bar">
Side
</div>
<div fxFlex="88" fxLayout="column" fxLayoutAlign="space-bewteen" fxLayoutGap="10px">
<div [ngClass]="['third_bar_1']">
first
</div>
<div [ngClass]="['third_bar_2']">
second
<div>
</div>
</div>
</div>
CSS
.first_bar{
background-color: #cdf7fb;
height: 100px;
}
.second_bar{
background-color: #cdf7;
height: calc(100vh - 200px);
}
.third_bar_1{
background-color: #6390c3;
height: 100px;
}
.third_bar_2{
border:1px solid red;
height: calc(100vh - 315px);
}
Working stackblitz link here

Simple use flex and wrap all with div
.main {
display: flex;
flex-wrap: wrap;
}
.first_line {
width: 100%;
height: 50px;
}
.first_bar {
background-color: #cdf7fb;
height: 6%;
width: 100%;
height: 100%;
}
.all_below {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.second_wrap {
height: 200px;
width: 20%;
}
.second_bar {
background-color: #6390c3;
height: 100%;
}
.third_wrap {
width: 80%;
}
.third_bar_1 {
background-color: #cdf7;
height: 100px;
}
.third_bar_2 {
background-color: lightblue;
height: 100px;
}
<div></div>
<div class="main">
<div flexLayout="row" class="first_line">
<div fxFlex="100%" class="first_bar">
Second Div
</div>
</div>
<div class="all_below">
<div flexLayout="row" class="second_wrap">
<div fxFlex="100%" class="second_bar">
Third Div
</div>
</div>
<div flexLayout="row" class="third_wrap">
<div fxFlex="12%" class="third_bar_1">
Fourth Div 1
<!-- <h5>third div</h5> -->
</div>
<div fxFlex="86%" class="third_bar_2">
Fourth Div 2
</div>
</div>
</div>
</div>

Content Div overlaps Menu Div - HTML & CSS

I have content navigation div overlapping menu navigation div. Please let me know what am i missing here. Please find fiddle link below:
https://jsfiddle.net/y4c2xs5j/1/
HTML:
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
}
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}

As per my understanding, you want to cover only 60px width with menu-nav, and rest want to cover with content-nav, According to below code:
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
If I am getting correct then you just neeed to add one more property with content-nav, overflow:hidden;
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
overflow:hidden;
}
By adding overflow hidden, you will get complete width rest 60px with content-nav, That is issue cause by float:left, when we are use float property, then the issue is generated, for the same we have to use overflow:hidden

Try this code. Is this what you needed ?
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
display: flex;
flex-direction: column;
}
.menu-nav {
width: 100vw;
background: green;
height: 20vh;
float: left;
}
.content-nav {
width: calc(100vw - 100px);
background: yellow;
height: 100vh;
}

You just need to add one property in ".content-nav" and also add clearifx class in the parent of both tag (.menu-nav, .content-nav)
<div class="top-nav clearfix">
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
float: left;
}

Whenever you use rows and columns, please check if you have at least one container that contains them. The gap you see on the right is caused by the negative margins from the rows.
The easy fix is to have .container-fluid on or inside menu and content nav.
On menu and content nav
<div class="top-nav">
<div class="menu-nav container-fluid">
...
</div>
<div class="content-nav container-fluid">
...
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/8/
Inside menu and content nav
<div class="top-nav">
<div class="menu-nav">
<div class="container-fluid">
...
</div>
</div>
<div class="content-nav">
<div class="container-fluid">
...
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/7/
You don't need to calculate the width for content-nav as fluid container will set its width to 100%:
.content-nav {
/*width: calc(100vw - 60px);*/
background: yellow;
height: 100vh;
}

How to make a fluid layout equally spaced

My problem is both a design and code issue, I have a diagonal layout which consists of a paragraph of text paired with an image which is then flipped (image then paragraph) on the next row.
The problem is I don't know the height of the paragraph or the height of the image so how do I make it equally spaced for the end user?
Here is a fiddle that may help explain my question.
My code:
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
</div>
<div class="container">
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
</div>
.one{
height:200px;
background:red;
width:50%;
float:left;
}
.two{
float:left;
height:auto;
background:blue;
width:50%;
}
.three{
float:left;
height:400px;
background:blue;
width:50%;
}
.container{
height:auto;
display:flex;
flex-direction:row;
align-items:center;
}
img{
float:left;
width:100%;
}
Class one is the paragraph ( shorter paragraph )
Class .two is the picture
Class .three is a longer paragraph
as you can see row one and two are equally spaced but row three has a larger space which wont look good to the end user.
Any help is appreciated.

Drop the img and use background-image and background-size: cover. With that you can make the image to completely cover the space left.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
background: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce') center;
background-size: cover;
border: 1ps solid red;
width: 50%;
}
.three {
height: 400px;
background: blue;
width: 50%;
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
</div>
</div>
<div class="container">
<div class="two">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
</div>
</div>
Or if the whole picture should be visible, use background-size: contain instead.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
background-image: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce');
background-position: center center; /* or "left top", and so on */
background-repeat: no-repeat; /* or "repeat-y", and so on */
background-size: contain;
border: 1ps solid red;
width: 50%;
}
.three {
height: 400px;
background: blue;
background-repeat: no-repeat; /* or "repeat-y", and so on */
width: 50%;
}
.three + .two { /* where class .two comes after .three */
background-repeat: repeat-y; /* repeat vertically */
background-position: center top; /* start at "center top" */
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
</div>
</div>
<div class="container">
<div class="two">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
</div>
</div>
Updated based on a comment.
If the image shouldn't scale up, but scale down, you either need a script to detect the image size and toggle between background-size: contain (scale down) and background-size: auto (keep org. size), or, as shown below, using the img, combined with transform to center it. The latter won't allow to control repeat though.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
position: relative;
width: 50%;
overflow: hidden;
}
.two img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.three {
height: 400px;
background: blue;
width: 50%;
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
<img src="http://placehold.it/100" alt="">
</div>
</div>
<div class="container">
<div class="two">
<img src="http://placehold.it/800" alt="">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
<img src="http://placehold.it/800" alt="">
</div>
</div>

How to make divs same height?

I have one parent-div which contains three divs and I would like to make them same height but it is not working. The first and third div contains each an image. The second div contains three divs with content.
Here is the HTML:
<div class="container">
<div class="column1">
<img src="http://placehold.it/300x318">
</div>
<div class="column2">
<div class="row1">
<div class="text">UNIKE GUSTAVIANSKE STILMØBLER.</div>
<div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
<div class="text">OG 1800-TALLS TRADISJONER.</div>
</div>
<div class="row2"></div>
<div class="row3">
<div class="text">
Åpningstider:<br>
Man - Fre 11 -17 Lør 11- 15
</div>
</div>
</div>
<div class="column3">
<img src="http://placehold.it/300x318">
</div>
</div>
The .container has the css-rule display:flex;. When I apply this also to .column1, .column2 and .column3, the layout breaks.
I am trying to achieve that the images height increase and decrease depended to .column2. Unfortunately, I have not the possibility to change the HTML or use JS.
Here you can see a JS-Fiddle. I have commented out the CSS-rules.
Many thanks for your help!

In the question you mention that you apply display:flex to .column1, .column2 and .column3.
Instead just apply this to .column1 and .column3 and leave .column2 as display:block.
This should resolve your problem (works in your JS-Fiddle).

You just need to apply a height and max-width to the images. They will distort to fit into the space and make your images look weird. If you choose images that are this dimensions, they will look better.
.container {
width: 100%;
display: flex;
}
.container img{
height: 100%;
max-width: 100%;
}
.row1 {
background-color: #fff;
padding-top: 40px;
}
.row1 .text {
font-size: 30px;
text-align: center;
line-height: 50px;
font-weight: 300;
}
.row2 {
height: 150px;
background-color: #e4e8eb;
}
.row3 {
background-color: #c7cacf;
padding: 10px 0px;
}
.row3 .text {
font-size: 25px;
text-align: center;
line-height: 25px;
}
<div class="container">
<div class="column1">
<img src="http://placehold.it/300x318">
</div>
<div class="column2">
<div class="row1">
<div class="text">
UNIKE GUSTAVIANSKE STILMØBLER.</div>
<div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
<div class="text">OG 1800-TALLS TRADISJONER.
</div>
</div>
<div class="row2"></div>
<div class="row3">
<div class="text">Åpningstider:
<br>Man - Fre 11 -17 Lør 11- 15</div>
</div>
</div>
<div class="column3">
<img src="http://placehold.it/300x318">
</div>
</div>

you can add this lines for row css
.row {
display: flex;
justify-content: center; /* align horizontal */
align-items: center;
}

You just need to specify the height and width of image tag.Just add width:100% and height 100% for image tag.
.container {
width: 100%;
display: flex;
}
.container img{
height: 100%;
max-width: 100%;
}
.row1 {
background-color: #fff;
padding-top: 40px;
}
.row1 .text {
font-size: 30px;
text-align: center;
line-height: 50px;
font-weight: 300;
}
.row2 {
height: 150px;
background-color: #e4e8eb;
}
.row3 {
background-color: #c7cacf;
padding: 10px 0px;
}
.row3 .text {
font-size: 25px;
text-align: center;
line-height: 25px;
}
.imgsize{
width: 100%;
height: 100%;
}
<div class="container">
<div class="column1">
<img src="http://placehold.it/300x318" class="imgsize">
</div>
<div class="column2">
<div class="row1">
<div class="text">
UNIKE GUSTAVIANSKE STILMØBLER.</div>
<div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
<div class="text">OG 1800-TALLS TRADISJONER.
</div>
</div>
<div class="row2"></div>
<div class="row3">
<div class="text">Åpningstider:
<br>Man - Fre 11 -17 Lør 11- 15</div>
</div>
</div>
<div class="column3">
<img src="http://placehold.it/300x318" class="imgsize">
</div>
</div>

If I'm understanding properly you can add this to your styles:
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
Your columns are already filling to the parent height. Using the above css styles the images in this will fill the parent div height and basically overflow the width. If you do something else like set height of the images to 100% it will distort the image.
Here is a similar question with same (but more detailed) answer. https://stackoverflow.com/a/26967278/3366016