Bootstrap - make content in first col vertically align relatively to second col - html

I'm trying to vertically align content inside column relatively to it's inline column, which is higher.
It's pretty hard for me to explain in words, so:
Here's the HTML structure.
<div class="row">
<div class="col-sm-7">
<div class="i-need-to-be-in-the-middle">
<!--some content-->
</div>
</div>
<div class="col-sm-5">
<div class="btns">
<button>
first btn
</button>
<button>
second btn
</button>
<button>
third btn
</button>
</div><!--btns-->
</div>
</div><!--.row-->
Here's how it looks like:
Here's the desire result:
I've tried a lot of solutions, but the only solutions which work for me made a mess with boostrap because they involved absolute or flexing elements.
I've also notice that the height of the first col is relative to the content length, which is less then the height of the button.

What is required is to make the columns the same height and then align the content in the center of each column
Flexbox Method
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
border: 1px solid grey;
justify-content: center;
}
button {
margin: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-7 column">
<div class="i-need-to-be-in-the-middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
</div>
</div>
<div class="col-sm-5 column">
<div class="btns column">
<button>
first btn
</button>
<button>
second btn
</button>
<button>
third btn
</button>
</div>
<!--btns-->
</div>
</div>
<!--.row-->
</div>
Codepen Demo
CSS Tables Method
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.table {
display: table;
}
.column {
float: none;
/* remove bootstrap default */
display: table-cell;
vertical-align: middle;
border: 1px solid grey;
justify-content: center;
}
button {
display: block;
margin: .5em auto;
width: 95%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row table">
<div class="col-sm-7 column">
<div class="i-need-to-be-in-the-middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
</div>
</div>
<div class="col-sm-5 column">
<div class="btns">
<button>
first btn
</button>
<button>
second btn
</button>
<button>
third btn
</button>
</div>
<!--btns-->
</div>
</div>
<!--.row-->
</div>
Codepen Demo

Try this:
<div class="center-vertically">
<p>
I'm vertically aligned.
</p>
</div>
The CSS:
.center-vertically{
vertical-align: middle;
}

Looks like your having some grid troubles, try something like this:
HTML:
<body>
<div class="row header">
<div class="column column-2">Logo</div>
<div class="column column-4">-</div>
<div class="column column-6">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="row middle">
<div class="column column-2">Left-</div>
<div class="column column-8">So much content.</div>
<div class="column column-2">Right-</div>
</div>
<div class="row footer">
<div class="column column-12">(c) 2016</div>
</div>
</body>
CSS:
.row {
border: 2px solid rebeccapurple;
}
.column {
border: 2px solid blue;
margin: 1%;
float: left;
border-radius: 20px;
text-align: center;
}
.row:before,
.row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
.row,
.column {
box-sizing: border-box;
}
.column-1 {
width: 6.333%;
}
.column-2 {
width: 14.66%;
}
.column-3 {
width: 23%;
}
.column-4 {
width: 31.33%;
}
.column-5 {
width: 39.66%;
}
.column-6 {
width: 48%;
}
.column-7 {
width: 56.33%;
}
.column-8 {
width: 64.66%;
}
.column-9 {
width: 73%;
}
.column-10 {
width: 81.33%;
}
.column-11 {
width: 89.66%;
}
.column-12 {
width: 98%;
}
.header > .column,
.footer > .column {
padding: 25px;
}
.middle > .column {
height: 400px;
line-height: 400px;
}
.header ul {
margin: auto;
}
.header li {
display: inline-block;
list-style-type: none;
}
All you will have to do is edit the size in CSS for each grid element and you should be good!

Related

How can I make <div> elements responsive inside <nav> element

so I was making a dashboard page for this bot and the page looks good on desktop , but isn't responsive on mobile devices.
THE PAGE ON DESKTOP
THE PAGE ON MOBILE DEVICES
THE CODE FOR PAGE
HTML
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link id="theme" href="/static/css/light.css" aria-labelledby="dark" rel="stylesheet">
<link href="/static/css/main.css" rel="stylesheet">
<title>Steve.</title>
</head>
<body>
<nav class="navbar navbar-expand-lg text-div">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<img id="navbar_dicord_brand" src="/static/images/discord_logo_black.svg" width="120" height="60">
</ul>
<ul class="nav navbar-nav navbar-center">
<li>
<a class="spacing" style="padding-right:.5em" href="#"></span><strong>Commands</strong></a>
<span id="number_badge" class="top-0 start-100 translate-middle badge rounded-pill" style="background-color: crimson;">16<span class="visually-hidden">unread messages</span>
</li>
<li><a class="spacing" href="https://top.gg/bot/834409783502438480/invite/"><strong>Invite</strong></a></li>
<li><a class="spacing" href="https://discord.gg/JEDu42vVBX"><strong>Support Server</strong></a></li>
<li><a class="spacing" href="https://www.patreon.com/ks47"><strong>Patreon</strong></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand a_text" href="https://top.gg/bot/834409783502438480">
<img src="/static/images/avtar.webp" width="45" height="45">
<strong>Steve.</strong>
</a>
</ul>
</div>
</nav>
<div class="body_container">
<div>
<center>
<div class="container text-div" style="width: fit-content;" >
<h1 class="display1 text_font">Anime and Manga in your Discord Server.</h1>
</div>
</center>
<div class="container text-div" style="margin-top:3%">
<div class="row">
<div class="col" style="text-align: left;">
<h1 class="display1"><img id="clyde_icon" src="/static/images/icon_clyde_black_RGB.svg" width="45px" height="45px"> {{count}} Guilds</h1>
</div>
<div class="col" style="text-align: center;">
<h1 class="display1"><img id="hash_icon" src="/static/images/hashtag.svg" width="45px" height="30px">{{channels}} Channels</h1>
</div>
<div class="col" style="text-align: right;">
<h1 class="display1"><img id="user_icon" src="/static/images/user_svg.svg"> {{users}} Users</h1>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase font-weight-bold">Footer text 1</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita sapiente sint, nulla, nihil
repudiandae commodi voluptatibus corrupti animi sequi aliquid magnam debitis, maxime quam recusandae
harum esse fugiat. Itaque, culpa?
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-6 mb-md-0 mb-3">
<h5 class="text-uppercase font-weight-bold">Footer text 2</h5>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio deserunt fuga perferendis modi earum
commodi aperiam temporibus quod nulla nesciunt aliquid debitis ullam omnis quos ipsam, aspernatur id
excepturi hic.
</p>
</div>
</div>
</div>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>
CSS 1
.spacing{
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;
text-decoration: none;
font-size: 20px;
}
a.spacing{
padding-left: 1.5em;
padding-right: 1.5em;
}
a.spacing:hover{
color: crimson;
}
.text_font{
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande','sans-serif';
}
.body_container{
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
font-family: 'Whitney','Helvetica Neue',Helvetica,Arial,'Lucida Grande','sans-serif';
font-size: 2vw;
}
CSS 2
body{
background-color: white;
background-image:url(/static/images/background1.jpg);
background-size: cover;
color: black;
}
.a_text{
color:rgb(0, 0, 0);
font-family: Whitney,'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;
}
a.a_text:hover{
color: crimson;
text-decoration: none;
}
.footer{
background-color:rgba(247, 247, 247, 0.884);
color: black;
margin-top: 10%;
padding-bottom: 2%;
position: fixed;
bottom: 0;
}
.text-div{
background-color: rgba(247, 247, 247, 0.882);
color: black;
}
.spacing{
color: black;
}
So I need to make sure that the divs in nav bar are responsive I TRIED Some #media queries but didn't got the desired results so is there a way that the navbar can be responsive and the center div objects would appear like a list
something like the image below
This is a simple example... But before...
Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the head section in your code -> Viewport Meta Tag.
Don't use <center> element to center content:
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
sourse: MDN - Center Element
Use flexbox, grid or positioning property -> Center Anything is CSS.
Some elements in your code (in navbar) doesn't have a closing tag.
The Code:
Open code in full screen and resize the window.
var burger = document.querySelector('.burger');
var list_container = document.querySelector('.list-container');
burger.addEventListener('click', () => {
list_container.classList.toggle('active');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {list-style-type: none;}
a {text-decoration: none;}
.navbar-container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
position: relative;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#media (min-width: 576px) {.navbar-container {max-width: 100%;}}
#media (min-width: 768px) {.navbar-container {max-width: 760px;}}
#media (min-width: 992px) {.navbar-container {max-width: 960px;}}
#media (min-width: 1200px) {.navbar-container {max-width: 1180px;}}
header {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fafafa;
border: 1px solid #eee;
height: 80px;
z-index: 999;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.logo-container a:link,
.logo-container a:visited {
display: flex;
justify-content: center;
align-items: center;
color: #151515;
}
.logo-container ion-icon {
color: #151515;
margin-right: 5px;
font-size: 40px;
}
.logo-container span {
font-size: 30px;
}
.list-container {
transition: all 0.2s;
}
.list-container.active {
transform: translateX(0);
}
.list-container ul {
display: flex;
}
.list-container ul li {
margin: 0 15px;
}
.list-container ul li a:link,
.list-container ul li a:visited,
.brand-container a:link,
.brand-container a:visited {
color: #151515;
font-weight: 600;
font-size: 20px;
}
.burger {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
display: none;
}
.burger span {
display: block;
width: 30px;
height: 4px;
background-color: #121212;
}
.burger span:not(:last-of-type) {
margin-bottom: 5px;
}
#media screen and (max-width:992px){
.list-container ul li a:link,
.list-container ul li a:visited {
font-size: 18px;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden;
}
.burger {
display: block;
}
.brand-container {
display: none;
}
.list-container {
position: fixed;
width: 100vw;
height: 100vh;
background-color: #fafafa;
top: 80px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform: translateX(-100%);
}
.list-container ul {
flex-direction: column;
padding: 20px 10px;
}
.list-container ul li {
margin: unset;
}
.list-container ul li {
margin: 0 0 30px 0;
}
}
<script type="module" src="https://unpkg.com/ionicons#5.4.0/dist/ionicons/ionicons.esm.js"></script>
<header>
<nav class="navbar navbar-container">
<div class="logo-container">
<a href="#">
<ion-icon name="logo-discord"></ion-icon>
<span>Discord</span>
</a>
</div>
<div class="list-container">
<ul class="list">
<li>Commands</li>
<li>Invite</li>
<li>Support Server</li>
<li>Patreon</li>
</ul>
</div>
<div class="brand-container">
<a href="#">
<img src="..." alt="...">
<span>Steve</span>
</a>
</div>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
Use flexbox with #media queries, it will help you. Change the flex-direction from raw to column on mobile device width. :)

Create line to divide content with HTML and CSS [duplicate]

This question already has answers here:
how to add vertical line between two divs
(6 answers)
Closed 3 years ago.
I'm trying to divide the content of a webpage in two parts. The left side for a navbar and the right side for the main content of the page. I'm trying to use hr tag to create a line and divide the two parts but I'm having problems.
This is the HTML code:
<div id="left_content">
<nav class="main-menu">
<ul>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">Stars Components</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="vertical-line" style="height: 500px;"></div>
<div id="right_content>
...
</div>
This is the CSS code:
div.vertical-line{
width: 0px;
height: 100%;
float: left;
border: 1px inset;
background-color: #eeeeee;
margin-left: 250px;
}
This is one screenshot of the problem.
Any suggestion? Thanks for reading.
Here is the minimal layout technique with modern flexbox layout
.split-layout {
display: flex;
flex-direction: column;
}
#media screen and (min-width: 30em) {
.split-layout {
flex-direction: row;
align-items: stretch;
}
}
.split-layout__item {
flex: 1;
}
#media screen and (min-width: 30em) {
.split-layout__item {
padding-left: 1em;
}
.split-layout__item:first-child {
padding: 0;
}
}
.split-layout__divider {
display: flex;
flex-direction: row;
align-items: center;
}
#media screen and (min-width: 30em) {
.split-layout__divider {
flex-direction: column;
}
}
.split-layout__label {
padding: 1em;
}
.split-layout__rule {
flex: 1;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
border-width: 1px 0 0 0;
}
#media screen and (min-width: 30em) {
.split-layout__rule {
border-width: 0 1px 0 0;
}
}
/* =DEMO STYLES
--------------------------------------------------------------------*/
html {
padding: 2em;
background: #3B4558;
color: #fff;
}
<div class="wrapper">
<div class="split-layout">
<div class="split-layout__item">
<h2>Navigation</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus? In beatae hic tenetur molestiae facilis illo neque esse repellendus harum. A, consequatur, labore.
</p>
</div>
<div class="split-layout__divider">
<div class="split-layout__rule"></div>
<div class="split-layout__rule"></div>
</div>
<div class="split-layout__item">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus?
</p>
</div>
</div>
</div>
Use CSS grid. CSS grid is great for content layout.
body {
font-family: Tahoma, sans-serif;
}
.grid {
display: grid;
grid-template-areas: 'cell-navbar cell-content cell-content cell-content';
}
.cell-navbar {
grid-area: cell-navbar;
border-right: thin solid #ccc;
}
.cell-content {
grid-area: cell-content;
}
body,
main,
.cell-navbar,
.cell-content {
height: 100vh;
}
<main class="grid">
<div class="cell-navbar">Navbar</div>
<div class="cell-content">Content</div>
</main>
More on CSS grid:
enter link description here
Try adding the following line to your CSS style
#left_content, #right_content { float:left; }
my preferred way of doing this,
<style>
#content { height: 100%; }
#left_content, #right_content {
float:left;
}
#left_content {
width:300px;
}
#right_content {
height:inherit;
padding-left:30px;
border-left:2px solid #000;
}
</style>
<body>
<div id="content">
<div id="left_content">
left side content goes here
</div>
<div id="right_content">
right side content goes here
</div>
</div>
</body>
Use flexbox instead, and draw the vertical line as border-right on #left_content:
.container{
display:flex
}
#left_content{
border-right: solid 1px #333;
padding-right:20px;
}
#right_content{
flex: 1 1 100%;
background-color: lightblue;
padding-left:20px;
}
<div class="container">
<div id="left_content">
<nav class="main-menu">
<ul>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">Stars Components</span>
</a>
</li>
</ul>
</nav>
</div>
<div id="right_content">
...
</div>
</div>

Vertically center and wrap text around another div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm at a loss here, I've been trying various things for a couple hours trying to get some text to center itself vertically in another div when it is only one line. When there are multiple times, it looks great and wraps beautifully.
Here is a photo of what I'm talking about:
photo
How can I fix the first instance (one line only) so it is centered vertically in the box? Here's a bootply.
Thank you!
Wrap the text you want to center in an HTML element and center that element using flexbox:
.list-item {
min-height: 52px;
border: 1px solid #E0E0E0;
display: flex;
align-items: stretch;
margin: 5px 0;
}
.list-item-status-container {
padding-right: 10px;
display: flex;
align-items: stretch;
border-left: 6px solid #90CAF9;
background-color: #E3F2FD;
max-width: 300px;
white-space: nowrap;
}
.list-item-status-content {
padding-left: 10px;
padding-right: 8px;
margin-top: auto;
margin-bottom: auto;
}
.list-item-content {
font-size: 17px;
display: block;
vertical-align: middle;
font-weight: 500;
padding-left: 8px;
padding-right: 8px;
display: flex;
flex-direction: column;
}
.list-item-content p,
.list-item-status-content > div {
margin-top: auto;
margin-bottom: auto;
}
.list-item-content > div {
width: 200px;
}
.item-unchecked-box {
color: #BDBDBD;
padding-right: 8px;
display: inline-block;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<div class="list-item">
<div class="list-item-status-container">
<div class="list-item-status-content">
<div>
<div class="item-unchecked-box">
<i class="fas fa-square fa-lg"></i>
</div>
Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
</div>
</div>
</div>
<div class="list-item-content">
<p>This should be vertically centered if there is room.</p>
</div>
</div>
<div class="list-item">
<div class="list-item-status-container">
<div class="list-item-status-content">
<div>
<div class="item-unchecked-box">
<i class="fas fa-square fa-lg"></i>
</div>
Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
</div>
</div>
</div>
<div class="list-item-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, esse deleniti odio fugiat culpa excepturi enim omnis laborum distinctio officia odit laudantium aliquid sint, ad expedita alias. Voluptatem, eveniet, odio.</p>
</div>
</div>
You need to add text-center like below
<div class="list-item-content text-center">
This should be vertically centered if there is room
</div>
</div>
I'm assuming that you are using bootstrap?
You need css to set the parent container to display: table; then the container as display:table-cell;
.list-item-content{
height: 350px; width: 250px; background-color:#F1F1F1;
display: table;
}
.list-item-content .cell{
display:table-cell; text-align: center; vertical-align: middle;
}
<div class="list-item-content">
<div class='cell'>
This should be vertically centered if there is room
</div>
</div>
.list-item-content {
display: flex;
align-items: center;
min-height: 52px;
}
<div class="list-item-content">
This should be vertically centered if there is room
</div>
Since you set the min-height of .list-item to be 52px, that means it's also safe to assume .list-item-context min-height is also 52px.

Column height of widow on resize

I am stuck, I want to make the height of my left column equal to the height of the right column . Seems the problem is the width of my video but I know how to fix this issue
I put in code this :
#font-face {
font-family: "poppins-bold";
src: url('../css/fonts/Poppins-Bold.ttf');
}
#font-face {
font-family: "poppins-light";
src: url('../css/fonts/Poppins-Light.ttf');
}
#font-face {
font-family: "poppins-medium";
src: url('../css/fonts/Poppins-Medium.ttf');
}
#font-face {
font-family: "poppins-regular";
src: url('../css/fonts/Poppins-Regular.ttf');
}
#font-face {
font-family: "poppins-semibold";
src: url('../css/fonts/Poppins-SemiBold.ttf');
}
body {
margin: 0;
background-color: #0080b9;
}
.conteneur {
min-width: 1050px;
}
.light {
font-family: "poppins-light";
}
.video-cover {
width: 100%;
height: 175px;
background-color: gray;
margin-top: 10px;
margin-bottom: 50px;
}
#bloc-gauche {
background-color: white;
width: 25%;
float: left;
/*height: 900px;*/
height: 100vh;
color: #0080b9;
font-family: "poppins-semibold";
overflow: scroll;
/*
padding-left:20px;
padding-right:20px;
padding-top:20px;
*/
}
.wrapper-bloc-gauche {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}
#intro {
width: 185px;
margin-bottom: 50px;
}
#content-bloc-droite {
padding-top: 25px;
}
#bloc-droite {
background-color: #0080b9;
width: 75%;
float: right;
font-family: "poppins-semibold";
color: white;
background-repeat: repeat-x;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
#description {
font-size: 15px;
text-align: center;
width: 45%;
margin-top: 25px;
}
.video-player-container {
/*width:40%;*/
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
margin-bottom: 40px;
}
.video-player {
width: 100%;
border: 5px solid #ECECEC;
box-sizing: border-box;
}
.footer-bloc-droite {
text-align: center;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
}
#logo-joon {
float: left;
width: 200px;
}
#btn-xp {
display: inline-block;
margin: 0 auto;
background-color: white;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #0080b9;
}
#joon-p {
float: right;
width: 200px;
}
#joon-p-img {
/*transform: rotate(-20deg);
padding-bottom: 0px;
-webkit-transform-origin-x: -55px;
overflow: hidden;
*/
-webkit-transform-origin-x: -55px;
width: 95%;
}
#left-block {
float: left;
}
#right-block {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class='conteneur'>
<div id='bloc-gauche'>
<div class='wrapper-bloc-gauche'>
<div class='row'>
<div id='intro'>
Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
</div>
</div>
<div id='bloc-droite'>
<div id='content-bloc-droite'>
<div class='row'>
<img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
</div>
<div class='row'>
<div id='description' style='text-align:center;' class='center-block'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
</div>
</div>
<div class='row'>
<div class='video-player-container center-bloc'>
<video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
<source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
</video>
</div>
</div>
<div class='footer-bloc-droite'>
<div class='row'>
<div id='logo-joon'>
<img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
</div>
<div id='btn-xp'>
Démarrer l'expérience de voyage
</div>
<div id='joon-p'>
<img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
</div>
<div style='clear:both'></div>
</div>
</div>
</div>
</div>
<div style='clear:both'></div>
</div>
I have a another little problem: I wanted to put the plane little up.
I tried to use position:absolute but all other element is not centered.
You provided so much code, that is useless and as you can no one cared to fix your issue, anyway all i'm going to say is that i tried to add certain height:100% and height:100vh on some wrapper elements and it should work now.
#font-face {
font-family: "poppins-bold";
src: url('../css/fonts/Poppins-Bold.ttf');
}
#font-face {
font-family: "poppins-light";
src: url('../css/fonts/Poppins-Light.ttf');
}
#font-face {
font-family: "poppins-medium";
src: url('../css/fonts/Poppins-Medium.ttf');
}
#font-face {
font-family: "poppins-regular";
src: url('../css/fonts/Poppins-Regular.ttf');
}
#font-face {
font-family: "poppins-semibold";
src: url('../css/fonts/Poppins-SemiBold.ttf');
}
body {
margin: 0;
background-color: #0080b9;
}
.conteneur {
min-width: 1050px;
height: 100vh;
}
.light {
font-family: "poppins-light";
}
.video-cover {
width: 100%;
height: 175px;
background-color: gray;
margin-top: 10px;
margin-bottom: 50px;
}
#bloc-gauche {
background-color: white;
width: 25%;
float: left;
/* height: 900px; */
height: 100vh;
color: #0080b9;
font-family: "poppins-semibold";
overflow: scroll;
/*
padding-left:20px;
padding-right:20px;
padding-top:20px;
*/
}
.wrapper-bloc-gauche {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
max-height: 100%;
}
#intro {
width: 185px;
margin-bottom: 50px;
}
#content-bloc-droite {
padding-top: 25px;
max-height: 100%;
overflow: auto;
}
#bloc-droite {
background-color: #0080b9;
width: 75%;
float: right;
font-family: "poppins-semibold";
color: white;
background-repeat: repeat-x;
height: 100%;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
#description {
font-size: 15px;
text-align: center;
width: 45%;
margin-top: 25px;
}
.video-player-container {
/*width:40%;*/
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
margin-bottom: 40px;
}
.video-player {
width: 100%;
border: 5px solid #ECECEC;
box-sizing: border-box;
}
.footer-bloc-droite {
text-align: center;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
}
#logo-joon {
float: left;
width: 200px;
}
#btn-xp {
display: inline-block;
margin: 0 auto;
background-color: white;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #0080b9;
}
#joon-p {
float: right;
width: 200px;
}
#joon-p-img {
/*transform: rotate(-20deg);
padding-bottom: 0px;
-webkit-transform-origin-x: -55px;
overflow: hidden;
*/
-webkit-transform-origin-x: -55px;
width: 95%;
}
#left-block {
float: left;
}
#right-block {
float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class='conteneur'>
<div id='bloc-gauche'>
<div class='wrapper-bloc-gauche'>
<div class='row'>
<div id='intro'>
Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
</div>
</div>
<div id='bloc-droite'>
<div id='content-bloc-droite'>
<div class='row'>
<img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
</div>
<div class='row'>
<div id='description' style='text-align:center;' class='center-block'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
</div>
</div>
<div class='row'>
<div class='video-player-container center-bloc'>
<video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
<source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
</video>
</div>
</div>
<div class='footer-bloc-droite'>
<div class='row'>
<div id='logo-joon'>
<img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
</div>
<div id='btn-xp'>
Démarrer l'expérience de voyage
</div>
<div id='joon-p'>
<img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
</div>
<div style='clear:both'></div>
</div>
</div>
</div>
</div>
<div style='clear:both'></div>
</div>

How to make div's width stretch with content

I'm trying to build a dynamic dialog control that can be used for any type of content required for that dialog. It contains a primary container, header (for dialog title), body content and footer (for buttons). I've managed to get it working so the height is dynamically adjusting based on the content and view height of the window, but I can't get the width to do the same.
Here's what I've got so far. As you can see the width of the dialog is being forced to use the max-width that is defined as apposed to using that CSS definition only when the content requires it.
.dialog-box2{
position: relative;
min-width: 400px;
max-width: calc(90vw - 100px);
margin: 20px auto;
margin-bottom: 0;
}
.dialog-content{
position: relative;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba (0,0,0,.2);
outline: 0;
box-shadow:0 3px 9px rgba(0,0,0,.2);
margin-top: 100px;
min-height: 185px;
}
.dialog-header{
min-height: 6.43px
padding: 15px;
padding-bottom: 0;
margin-bottom: -1px;
}
.dialog-title{
padding-bottom: 5px;
margin:0;
line-height: 1.43;
border-bottom: 1px solid #0290d7;
}
h3{
font-size: 16px;
}
.dialog-body{
position: relative;
padding: 15px;
max-height: calc(85vh - 250px);
overflow-y: scroll;
margin-bottom: 30px;
}
.dialog-footer{
padding: 15px;
overflow: hidden;
background-color: #eee;
border-top: 1px solid #ccc;
}
/*---------- for testing only ---------------------*/
.profile-btn{
border: 1px solid #CCCCCC;
border-bottom: 15px solid #0290D7;
width: 120px;
height: 140px;
margin: 20px 20px 0 0;
padding-top: 35px;
color: #0290D7;
text-align: center;
float: left;
}
<div class="dialog-box2">
<div class="dialog-content">
<div class="dialog-header">
<h3 class="dialog-title" id="myDialogLabelDefault">Dialog Title</h3>
</div>
<div class="dialog-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum nisi est sed incidunt magni maxime? Praesentium itaque sed nihil veritatis. Dolorem autem, alias reprehenderit facilis deserunt voluptatum dolore natus. Impedit.</p>
<div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div><!--
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>
<div class="profile-btn">Thing</div>-->
</div>
</div>
<div class="dialog-footer">
<div class="prev">
<button type="button" class="btn btn-primary-outline">Save as Profile</button>
</div>
<div class="sc-next">
<button type="button" class="btn-link dialog-cancel" data-close="dialog">Cancel</button>
<span class="sc-dialog-bullet"></span>
<button type="button" class="btn btn-primary-outline">Outlined 2nd Btn</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
Here is an example of what I'm getting with the above code and where the issue lies, in case my explanation of what I'm trying to accomplish isn't clear.
What am I doing wrong, I feel like I've tried everything I can think of.
Thanks in advance for your help!
You can try using display: flex; or display:inline-block;
.dialog-box2{
display: flex;
justify-content: center;
min-width: 400px;
max-width: 90%;
margin: 20px auto;
margin-bottom: 0;
}
You'll probably have to properly center the div, but the content should adapt just fine.
Remove the max-width property from the .dialog-box2 div.
Setting any of the width columns prevents the div from stretching but unsetting all the widths allows the element to stretch...
.dialog-box2{
min-width: unset;
width: unset;
max-width: unset;
}
The flex attribute is needed for the page layout with respect to other elements on the page but doesn't play into the solution to the question, so I've omitted it.