Justify-content: space-between is not working as expected - html

Would appreciate some help on this. So, I wanted to re-align the first picture to look like the second picture. I was expecting the space-between to distribute the space evenly in between so I've been trying to use justify-content: space-between which unfortunately doesn't work. Any idea why?
HTML
#import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
width: 350px;
max-width: 100%;
border: 1px solid blue;
position: relative;
margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title>Progress Bar</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<div class="btn-container">
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>

In flex div all item get same width, if you set empty div then it's also consider as a one item of that flex div that's why your "progress" class div also get same width there is no matter there is data or not in the div.
To make your desire design make "progress" class hidden.
.progress {
display: none;
}

Because there is another div before the circle 1. It should be removed:
<div class="container">
<div class="progress-container">
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<div class="btn-container">
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</div>
Try this fiddle here: http://jsfiddle.net/usf9Lcdg/

this happened because of the id="progress" DIV that takes a space in the row ...
#import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
width: 350px;
max-width: 100%;
border: 1px solid blue;
position: relative;
margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title>Progress Bar</title>
</head>
<body>
<div class="container">
<div class="progress" id="progress"></div>
<div class="progress-container">
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<div class="btn-container">
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>

Related

How can make vertically space-between columns in a row with bootstrap [duplicate]

This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
I want to make vertically space-between those two pictures at right side. Can you help me with that? Should change my HTML struct or something? I couldn't find a solution with this HTML struct. s
here it is the screenshot
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container mt-5 border">
<div class="row">
<div class="col-md-6">
<img class="img-fluid a" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
</div>
<div class="col-md-6">
<div class="row ">
<div class="col-12 mt-md-6">
<img class="img-fluid b" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
</div>
<div class="col-12 mt-md-6">
<img class="img-fluid c" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
img {
object-fit: cover;
border: 1px solid red;
}
.a {
width: 100%;
height: 500px;
}
.b,
.c {
width: 100%;
height: 200px;
}
#media (max-width: 768px) {
.a {
height: 200px;
}
.b,
.c {
margin-top: 1rem;
}
}
Here you go...
img {
object-fit: cover;
border: 1px solid red;
}
img.a {
width: 100%;
height: 500px;
}
img.b,
img.c {
width: 100%;
height: 200px;
}
#media (max-width: 768px) {
img.a {
height: 200px;
}
img.b,
img.c {
margin-top: 1rem;
}
}
.row {
height: 500px;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>
<body>
<div class='container mt-5 border'>
<div class='row'>
<div class='col-md-6'>
<img class='img-fluid a' src='https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib'>
</div>
<div class='col-md-6'>
<div class='row'>
<div class='col-12 mt-md-6 d-flex align-items-start'>
<img class='img-fluid b' src='https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib'>
</div>
<div class='col-12 mt-md-6 d-flex align-items-end'>
<img class='img-fluid c' src='https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</html>
For the bottom image you could include a responsize unit like vh with a margin-top with inline CSS such as follows. You can achieve this without bootstrap in just vanilla CSS.
<div class="col-12" style="margin-top: 10vh">
<img class="img-fluid c" src="https://images.unsplash.com/photo-1623709537069-80ff1bfff9e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib">
</div>

Css moving the divs in left and right

I have the "left ads" div and a "right ads" div and the main content and menu at the center. I want to move the "left ads" div in left so that so that the "menu bar" and all the content below it gets at top. And i want to move the "right ads" div in right . Also after moving them they should be independent i.e what ever be their content they should not effect the middle div i.e main content div .[Please view it in desktop in full screen]
*{
margin: 0;
padding: 0;
}
#adleft{
background: pink;
}
#wrapper{
max-width: 1024px;
margin: 0 auto;
}
#topmenubar{
background:violet;
}
#logoandad{
background:greenyellow;
}
#main_content{
background: azure;
border: 1px solid black;
}
#featuredcontent{
background: burlywood;
}
#morecontents{
background: crimson;
}
#allquizes{
background: chocolate;
}
#adright{
background: aqua;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/quiz.css">
<title>QuizOm</title>
</head>
<body>
<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
<div id="featuredcontent">
<div class="twoupperbox">Featured content 1</div>
<div class="twoupperbox">Featured content 2</div>
</div>
<div id="morecontents">
<div class="bottomthreebox">conten1</div>
<div class="bottomthreebox">conten2</div>
<div class="bottomthreebox">conten3</div>
</div>
<div id="allquizes">
<h1>All Quizes</h1>
<div class="bottomthreebox">All quiz1</div>
<div class="bottomthreebox">All quiz2</div>
<div class="bottomthreebox">All quiz3</div>
</div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>
</body>
</html>
The easiest way to achieve this would be using display:flex
#adleft{
background: pink;
}
#wrapper{
max-width: 1024px;
margin: 0 auto;
flex:1 0 auto;
}
#topmenubar{
background:violet;
}
#logoandad{
background:greenyellow;
}
#main_content{
background: azure;
border: 1px solid black;
}
#featuredcontent{
background: burlywood;
}
#morecontents{
background: crimson;
}
#allquizes{
background: chocolate;
}
#adright{
background: aqua;
}
.container{
display: flex;
flex-direction: row;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/quiz.css">
<title>QuizOm</title>
</head>
<body>
<div class="container">
<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
<div id="featuredcontent">
<div class="twoupperbox">Featured content 1</div>
<div class="twoupperbox">Featured content 2</div>
</div>
<div id="morecontents">
<div class="bottomthreebox">conten1</div>
<div class="bottomthreebox">conten2</div>
<div class="bottomthreebox">conten3</div>
</div>
<div id="allquizes">
<h1>All Quizes</h1>
<div class="bottomthreebox">All quiz1</div>
<div class="bottomthreebox">All quiz2</div>
<div class="bottomthreebox">All quiz3</div>
</div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>
</div>
</body>
</html>

Fixed sidebar causing trouble to bootstrap responsive design

I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.
I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.

How would get two div tags to align horizontally

Okay so I have two div elements that I want to align vertically, the elements are identified as "NavBar" and "title" I have tried multiple times to align them but nothing seems to work... Any help would be great and the code is below.
Here is the code:
body {
background-color: black;
}
div.NavBar {
color: blue;
background-color: white;
text-align: center;
max-width: 25%;
min-width: 140px;
flex: 1;
}
div.title {
color: purple;
text-align: center;
}
div.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' href='favicon.png' type='image/png'/ >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bobby The Death Mage</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="NavBar">
<h1>Nav Bar<BR>---------------</h1>
</div>
</div>
<div class="title">
<h1>Site Title<BR>--------------------------------------------</h1>
</div>
</body>
</html>
If you want to align the 2 divs horizontally, you're closing the </div> of "container" before "title", close it after the "title" div block https://jsfiddle.net/L9n8jf2y/
<div class="container">
<div class="help">
<h1>Nav Bar</h1>
</div>
<div class="title">
<h1>Site Title</h1>
</div>
</div>
div {
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' href='favicon.png' type='image/png'/ >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bobby The Death Mage</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="Nav Bar">
<h1>Nav Bar<BR>---------------</h1>
</div>
</div>
<div class="title">
<h1>Site Title<BR>--------------------------------------------</h1>
</div>
</body>
</html>
you close the container div after NavBar.. so according to your code here is the answer just place the container div end after class title /div> close and add a extra class into container class div- https://jsfiddle.net/exwbfxa8/1/
body {
background-color: black;
}
div.v_align {
display: inline-flex;
}
div.NavBar {
color: blue;
background-color: white;
}
div.title {
color: purple;
text-align: center;
}
<div class="container v_align">
<div class="NavBar">
<h1>Nav Bar--------------</h1>
</div>
<div class="title">
<h1>Site Title----------------------</h1>
</div>
</div>

HTML - how to make one div scrollable and the others static?

I have this default.html file that places all div elements.
I need div header and sidebar to be fixed and only div content to be scrollable if content is too big.
My default.html follows:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<title th:text="#{app.name}"> </title>
<style type="text/css">
.content {
display: -webkit-flex;
display: flex;
height: 100vh;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div id="header" th:replace="fragments/header :: headerFragment"> </div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
</body>
</html>
What am I missing here?
.header, .footer { overflow: hidden; position: fixed; }
.page-content { overflow: auto; }
You are using a class in the CSS and an id in the code. Aslo you dont need the type="text/css" in html5:
<style>
#content {
display: -webkit-flex;
display: flex;
height: 100vh;
width: 100%;
overflow: auto;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
height: 150px;
width: 100%;
background-color:lightpink;
padding:25px;
margin:20px;
}
#header{
color:white;
width:100%;
height:40px;
left:0;
top:0;
position:fixed;
background-color:black;
}
#sidebar{
top:0;
left:0;
width:90px;
height:100%;
position:fixed;
color:white;
background-color:steelblue;
}
</style>
</head>
<body>
<div id="defaultFragment" fragment="defaultFragment">
<div id="header"> <center><h3>Header</h3></center> </div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
</body>
</html>