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>
Related
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>
I am facing one issue, maybe not a big one but I am not able to figure out how can I do
I want the double line in between the content of a div left (Subtotal) and right ($200).
Can anyone help me with this?
I have tried but I am not able to make it vertically middle.
Attaching screenshot of how I want it to look:
enter image description here
CODE SNIPPET I AHVE TRIED:
.row{
display: flex;
}
.dividerLine{
display: table-cell;
vertical-align: middle;
text-align: right;
border: 2px solid red;
height: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-4 dividerLine" style="background-color:lavenderblush;">
</div>
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
product total and I want to make the double line in between them
Attaching the screenshot how it looks:
You can achieve this by giving .row the align-items: center; property and removing margin from the p tags inside .start-lines.
You can use CSS flex align center option for this.
.row {
display: flex;
align-items: center;
}
.mb-0 {
margin-bottom: 0 !important;
}
.dividerLine {
border-top: 2px solid red;
border-bottom: 2px solid red;
height: 7px;
background-color: lavenderblush;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-6">
<div class="dividerLine"></div>
</div>
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
That looks like a giant equals sign, so let's make it a giant equals sign. That way we can be sure that it will align with the other characters vertically correctly without us having to do any other vertical positioning.
The way this can be done is to put an = character in the central column at the standard font-size but scale in the x direction. We put a huge scale in just so it will cover the whole central column whatever the width. Of course this isn't seen as overflow is set to hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
p.wide-font {
transform: scale(10000, 1);
color: gold;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" style="text-align: right;">
<p style="text-align: right;">SUBTOTAL</p>
</div>
<div class="col-sm-4" style="overflow: hidden;">
<p class="wide-font">=</p>
</div>
<div class="col-3">
<p style="text-align: left;">SUBTOTAL</p>
</div>
</div>
</div>
</body>
</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>
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.
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>