This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
My html code
*,body{
padding: 0;
margin: 0;
}
.main{
width: 80%;
height: 100%;
}
.sidebar{
float: left;
width: 20%;
background-color: blue;
}
.main-content{
float: left;
width: 80%;
background-color: red
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<div class="sidebar">
<div class="home"></div>
<div class="library"></div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</div>
<div class="main-content">
<div class="topic"></div>
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</div>
</div>
</body>
</html>
As per my knowledge, I must see two block with blue colour covering 20% of window and red colour covering 80% of window. But I am getting just a blank window. Where is the problem?? Sorry if there is any obvious problem in code but I am beginner in html and css specially css.
Thanks for help in advance.
floats layout technique is little "out of date" (Use Flexbox -or- Grids).
Next, you could use semantic HTML5 tags main, aside, and so on (Instead of divs only).
Summarize of CSS layout techniques: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout.
Last .main { height: 100%; } "not working" (No visual change) - read her why:
Why doesn't height: 100% work to expand divs to the screen height?
About your Q - your divs are empty (Put inside content and/or set min-height / height). Also related: Boxmodel. Working example:
*,body{
padding: 0;
margin: 0;
color: white;
}
html, body, .main {
height: 100%;
}
.sidebar{
float: left;
width: 20%;
height: 100%;
background-color: blue;
}
.main-content{
float: left;
width: 80%;
height: 100%;
background-color: red
}
.videos{
background: purple;
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<aside class="sidebar">
<div class="home">home</div>
<div class="library">library</div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</aside>
<main class="main-content">
<div class="topic"></div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<article class="post">post 1</article>
<article class="post">post 2</article>
<article class="post"></article>
</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</main>
</div>
</body>
</html>
Flexbox
*,body{
padding: 0;
margin: 0;
color: white;
}
.main {
display: flex;
}
aside{
flex-basis: 20%;
background-color: blue;
}
main{
flex-basis: 80%;
background-color: red
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<aside class="sidebar">
<div class="home">home</div>
<div class="library">library</div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</aside>
<main class="main-content">
<div class="topic"></div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<article class="post">post 1</article>
<article class="post">post 2</article>
<article class="post"></article>
</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</main>
</div>
</body>
</html>
Nested flexbox example
Take a look at how easy it is to control the layout.
*,body{
padding: 0;
margin: 0;
color: white;
}
.main {
display: flex;
min-height: 40vh;
}
aside{
flex-basis: 20%;
padding: 5px;
background-color: blue;
}
main{
flex-basis: 80%;
background-color: red
}
.main-content{
display: flex;
}
.main-content > div{
flex-basis: 33%;
border: 1px solid white;
padding: 5px;
}
.videos{
background: purple;
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<aside class="sidebar">
<div class="home">home</div>
<div class="library">library</div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</aside>
<main class="main-content">
<div class="topic">Topic</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<article class="post">post 1</article>
<article class="post">post 2</article>
<article class="post"></article>
</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</main>
</div>
</body>
</html>
You should also add heights to the body and the divs.
CSS
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.main {
width: 80%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: blue;
}
.main-content {
float: left;
width: 80%;
height: 100%;
background-color: red
}
Related
I have the following snippet (open snippet as full page) :
#container_1{
margin-top: 50px;
margin-bottom: 150px;
}
.block1{
background: green;
margin-bottom: 15px;
color: #FFFFFF;
}
#moving_block{
z-index: 0;
background-color: purple;
color: #FFFFFF;
}
#footer{
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="container_1" class="container">
<div class="col-md-5 col-md-offset-1">
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
</div>
<div class="col-md-4">
<div id="moving_block" class="col-md-3 affix">
<div class="row">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
I would like to stop the purple block when he encounter the last green block.
This can be done using position:sticky.
I consider bootstrap V4 for this since there is builtin function for sticky. I also simplified the code to keep only the relevant one for the demo:
#container_1 {
margin-top: 50px;
margin-bottom: 150px;
}
.block1 {
background: green;
color: #FFFFFF;
}
.block1:not(:last-child) {
margin-bottom: 15px;
}
#moving_block {
background-color: purple;
color: #FFFFFF;
}
#footer {
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div id="container_1" class="container">
<div class="row">
<div class="col-5 col-offset-1">
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
</div>
<div class="col-6">
<div id="moving_block" class="overflow-auto position-sticky sticky-top">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
I am designing this website for my introductory course. They require flex/grid layouts (although we didn't cover this in class). I decided to follow a youtube tutorial that was making a grid with 3 columns (1fr each). It then added a background to every "cell". In every "cell" I have a title and a description. I want to style the title and description in each "cell" to always be in the center, no matter the sizing of the page. I have managed to make the text adjust its size to the dimension of the page, but the title still overflows to the right when I minimize the window's width.
This is what I mean by overflow:
As you might guess, when the width is too large, the title tends to go to the right. This is the code (I no longer have images as background but you get the idea):
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
//care este portofolio-img-background
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
.portfolio-items-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper{
position:relative;
}
.portfolio-img-background{
height:350px;
width: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portfolio-img-background:nth-of-type(odd)
{
background-color: maroon;
}
.portfolio-img-background:nth-of-type(even)
{
background-color: rgb(101, 172, 122);
}
.title-text-wrapper{
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
#italian{
font-family: 'Pacifico', cursive;
}
#american{
font-family: 'Mitr';
}
.title-wrapper div{
justify-content: center;
font-size:5vw;
color: white;
align-items: center;
text-align: center;
align-content: center;
}
/* Needs to be more specific with selector*/
.title-text-wrapper .subtitle{
transition: 1s;
font-weight: 600;
color: transparent;
align-self: center;;
}
.title-text-wrapper:hover .subtitle{
font-weight: 600;
color: lightseagreen;
}
.img-darken{
transition: 1s;
filter: brightness(10%);
}
.logo-wrapper{
width: 50%;
margin-bottom: 2px;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="american">American</div>
</div>
<div class="subtitle">
This is a description of american food.
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="italian">Italian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Asian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mexican">Mexican</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="romanian">Romanian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="barbeque">Barbeque</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="indian">Indian</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Chinese</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mediteranean">Mediteranean</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="desserts">Desserts</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="smoothies">Smoothies</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="coffee">Coffee</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
</div>
</div>
I'm a beginner at this, so I would appreciate your advice on anything that's wrong with this code.
Issue is you are using padding left right to make item in center, I removed that and make its width:100% as you are using flex so its align center already
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
//care este portofolio-img-background
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
.portfolio-items-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper{
position:relative;
}
.portfolio-img-background{
height:350px;
width: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portfolio-img-background:nth-of-type(odd)
{
background-color: maroon;
}
.portfolio-img-background:nth-of-type(even)
{
background-color: rgb(101, 172, 122);
}
.title-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
width: 100%;
}
#italian{
font-family: 'Pacifico', cursive;
}
#american{
font-family: 'Mitr';
}
.title-wrapper div{
justify-content: center;
font-size:5vw;
color: white;
align-items: center;
text-align: center;
align-content: center;
}
/* Needs to be more specific with selector*/
.title-text-wrapper .subtitle{
transition: 1s;
font-weight: 600;
color: transparent;
align-self: center;
}
.title-text-wrapper:hover .subtitle{
font-weight: 600;
color: lightseagreen;
}
.img-darken{
transition: 1s;
filter: brightness(10%);
}
.logo-wrapper{
width: 50%;
margin-bottom: 2px;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="american">American</div>
</div>
<div class="subtitle">
This is a description of american food.
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="italian">Italian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Asian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mexican">Mexican</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="romanian">Romanian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="barbeque">Barbeque</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="indian">Indian</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Chinese</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mediteranean">Mediteranean</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="desserts">Desserts</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="smoothies">Smoothies</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="coffee">Coffee</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
</div>
</div>
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I am trying to create something like so:
I am sure I am starting out wrong but I cannot see how else, plus I can't find anything online to help. My code so far is:
<div class="container">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
<div class="four">
four
</div>
<div class="five">
five
</div>
<div class="six">
six
</div>
</div>
And the css
.container {
background-color: blue;
display: flex;
}
.one {
height: 400px;
width: 30%;
background-color: red;
}
.two {
height: 250px;
width: 35%;
background-color: white;
}
.three {
height: 400px;
width: 35%;
background-color: lightblue;
}
The problem is that I cannot get the next set of divs to line up under correctly. Jsfiddle
Solution1: Why not you use Bootstrap, Thanks.
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
Solution2: Use Masonry Grid:
#container {
width: 100%;
max-width: 700px;
margin: 2em auto;
}
.cols {
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.box {
margin-bottom: 20px;
}
.box.one {
height: 200px;
background-color: #d77575;
}
.box.two {
height: 300px;
background-color: #dcbc4c;
}
.box.three {
background-color: #a3ca3b;
height: 400px;
}
.box.four {
background-color: #3daee3;
height: 500px;
}
.box.five {
background-color: #bb8ed8;
height: 600px;
}
.box.six {
background-color: #baafb1;
height: 200px;
}
<div id="container" class="cols">
<div class="box one"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box three"></div>
<div class="box two"></div>
<div class="box five"></div>
<div class="box one"></div>
<div class="box two"></div>
<div class="box six"></div>
<div class="box three"></div>
<div class="box two"></div>
</div>
I had issue with unwanted white space and now have figured that out, but now I am having issues with browser resizing. How do I keep the two scrolling divs adjust with height and width. I want the div on the left to automatically adjust in height while the div on the right automatically adjusts in height and width whatever the size of the browser is. Thank you for your help.
I am trying to make it easier and display it in JSfiddle but it doesn't seem to display correctly.
Here is the code:
<html>
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
<style>
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 26px;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
</style>
i had modified your code
the two files are index.html and style.css
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button1
</div>
<div class="rightmenu">
button2
</div>
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
style.css
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:90%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 10%;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
i think it is your answer if you want to ask anything else then you know what to do ,
and if this is your answer then mark it as answered, so that it no longer reamain in the catagory of unanswered.
i had seen your code , i'd ran it on my browser as it displays under my Mozilla , the fault is not in styling the fault is the placement of your button your button are in the 'id=container' tag which take space from 'id=left' tag hence it is came out due to its data, if you remove :
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
this section from your code you will see the difference.