Why my .topnav, .mainnav and my .content divs the content escapes them?
How can I make when I reach the page limit jump from line?
They are already 100% width
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
display: grid;
grid-template-columns: 280px 1fr;
width: 100%;
height: 100%;
position: fixed;
}
.leftbar {
background: #1D2126;
height: 100%;
width: 100%;
grid-template-rows: 100px 1fr;
}
.rightbar {
display: grid;
grid-template-rows: 100px 1fr;
width: calc(100%-280px);
height: 100%;
position: fixed;
margin-left: 280px;
}
.header {
display: grid;
grid-template-rows: 30px 70px;
width: 100%;
height: 100%;
}
.topnav {
background: #1A1E23;
}
.mainnav {
background: #1D2126;
}
.content {
background: #21252B;
overflow-y: scroll;
}
<div class="container">
<div class="leftbar">
<div class="logo"><img src="https://www.csgoroll.com/en/assets/logo.png" width="80%"></div>
<div class="chat">
<div class="chatbox">
</div>
<div class="chatsend">
</div>
</div>
</div>
<div class="rightbar">
<div class="header">
<div class="topnav">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="mainnav">d</div>
</div>
<div class="content">
asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
You have two reasons for that:
First you have an endless text starting "aaaa" so if you don't break the text (with spaces or using CSS) the layout will follow the text
Second when using the calc() function in CSS, using addition and subtraction operations, it is mandatory to leave spaces around the operator, so instead of width: calc(100%-280px);
you need to have width: calc(100% - 280px);
Look the snippet below (with some minor improvements to your code)
* {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
text-decoration: none;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
display: grid;
grid-template-columns: 280px 1fr;
height: 100%;
}
.leftbar {
background: #1D2126;
height: 100%;
}
.rightbar {
display: grid;
grid-template-rows: 100px 1fr;
}
.header {
display: grid;
grid-template-rows: 30px 70px;
}
.topnav {
background: #1A1E23;
}
.mainnav {
background: #1D2126;
}
.content {
background: #21252B;
overflow-y: scroll;
}
.logo img {
width: 80%
}
<body>
<div class="container">
<div class="leftbar">
<div class="logo">
<img src="https://www.csgoroll.com/en/assets/logo.png" />
</div>
<div class="chat">
<div class="chatbox">
</div>
<div class="chatsend">
</div>
</div>
</div>
<div class="rightbar">
<div class="header">
<div class="topnav">aaaa</div>
<div class="mainnav">d</div>
</div>
<div class="content">aaaa
</div>
</div>
</div>
Related
I want divide my HTML Page into 4 different vertical sections .
I want each section to have a different background color, for that I used div but it each background color does not cover the sides of each section.
** My aspire end result:
I don't want to see the color red of the body background color in the html.
body {
background-color: red;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container>div {
margin:30px;
}
.flex-container hr {
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border-color: #FFF;
box-shadow: none;
border-width: 5px;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="flex-container">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
Set margin: 0 for body, it has a defualt margin.
Set <hr>'s margin to 0.
Set height for each div to be 25vh (vertical height).
body {
background-color: red;
margin: 0;
}
.intro {
background-color: #674AB3;
height: 25vh;
}
.edu {
background-color: #A348A6;
height: 25vh;
}
.Skills {
background-color: #9F63C4;
height: 25vh;
}
.end {
background-color: #9075D8;
height: 25vh;
}
hr {
margin: 0;
}
<div class="intro">
<hr/>
</div>
<div class="edu">
<hr/>
</div>
<div class="Skills">
<hr/>
</div>
<div class="end">
<hr/>
</div>
You could try using grid! might as well make it responsive :D
This is to have 4 sections laying one next to another, to make them stack in the vertical direction, change:
grid-template-columns: repeat(4, 1fr);
to:
grid-template-rows: repeat(4, 1fr);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #00000000; /* transparent color */
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */
height: 100vh;
margin: auto;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<p>intro</p>
</div>
<div class="edu">
<p>edu</p>
</div>
<div class="Skills">
<p>Skills</p>
</div>
<div class="end">
<p>end</p>
</div>
Something like this?
body {
background-color: red;
}
.intro {
height:200px;
background-color: #674AB3 !important;
}
.edu {
height:200px;
background-color: #A348A6 !important;;
}
.Skills {
height:200px;
background-color: #9F63C4 !important;;
}
.end {
height:200px;
background-color: #9075D8 !important;;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
You can try this approach as well.
body {background-color:transparent;}
.intro {
background-color: #674AB3;
height:100vh;
width:100%;
}
.edu {
background-color: #A348A6;
height:100vh;
width:100%;
}
.Skills {
background-color: #9F63C4;
height:100vh;
width:100%;
}
.end {
background-color: #9075D8;
height:100vh;
width:100%;
}
.wrapper {
display:grid;
height:100vh;
width:100%;
}
<div class="wrapper">
<div class="intro">
Hello
</div>
<div class="edu">
Hello
</div>
<div class="Skills">
Hello
</div>
<div class="end">
Hello
</div>
</div>
You can simmply use display: flex to the parent container which is flex-container
like
<div style="display: flex;">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
</div>
body {
background-color: red;
}
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height: vh;
}
grid
<div class="main">
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height:75vh;
}
I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
I'm currently making a simple html page with two sections with content inside of each of them but the last content of the second div .right is going on the bottom of the page and make the page scrollable.
I tried making another div and put a flex-direction: column but it doesn't work:
body {
margin: 0;
}
.main-container {
display: flex;
flex-direction: column;
}
.left {
background: #ecece9;
width: 50%;
height: 100vh;
}
.right {
background: #ffffff;
width: 50%;
height: 100vh;
}
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
How can I put two <div> that has the same width and height next to each other without having to scroll?
You need to use flex-direction: row and not flex-direction: column.
To avoid repeating width: 50%; height: 100vh; for both .left and .right, I would also create another class, such as .box, which is applied to both and contains these properties.
body {
margin: 0;
}
.main-container {
display: flex;
flex-direction: row;
}
.box {
width: 50%;
height: 100vh;
}
.left {
background: #ecece9;
}
.right {
background: #ffffff;
}
<div class="main-container">
<div class="left box">
<h2>content</h2>
</div>
<div class="right box">
<h2>content should be on top</h2>
</div>
</div>
Change the flex direction from column to row
body {
margin: 0;
}
.main-container {
display: flex;
flex-direction: row;
}
.left {
background: #ecece9;
width: 50%;
height: 100vh;
}
.right {
background: #ffffff;
width: 50%;
height: 100vh;
}
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
Use CSS Grid to build Layouts it is very powerful. See I changed only two lines and the layout is ready.
.main-container {
display: grid;
grid-template-columns: 50% 50%
}
body {
margin: 0;
}
.main-container {
display: grid;
grid-template-columns: 50% 50%
}
.left {
background: #ecece9;
height: 100vh;
}
.right {
background: #ffffff;
height: 100vh;
}
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
Try only display flex on large screen and and block on mobile
body {
margin: 0;
}
.main-container {
display: flex;
}
.left {
background: #ecece9;
width: 50%;
height: 100vh;
padding:20px;
}
.right {
background: #ddd;
width: 50%;
height: 100vh;
padding:20px;
}
/* For mobile screen
#media only screen and (max-width: 768px) {
.main-container{
display: block;
}
.left, .right{
width: 100%;
}
}
*/
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
I'm trying to make a home page where there is 6 blocks of images with 3 columns. But also want those 6 blocks to show as 2 columns on mobile view.
I have attached some images of what I want it to look like and my code that I'm using. I've tried different types of flex-wrap but I'm not getting it to work properly.
Here is the link to jsfiddle - https://jsfiddle.net/7frjmeat/
Here is the current desktop view
Here is what I'm hoping for the mobile view to look like -
Code
html,
body,
a,
{
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
}
.flex div {
flex: 1;
padding: 2px;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
<div class="line-break"></div>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
So you need to put all of the elements inside of one flex box to really have it effect the whole group. Additionally you need to set break-points for CSS to know how many items are in a row. I generally just use min-width.
Basically set a width on items, used box-sizing to include the padding in the width, used flex-wrap to wrap content, and changed the width on the mobile version to be a two column layout. **Edit I also altered the HTML to put everything in one flex-box container.
Here's the code working for your layout. Granted it loses the HR tag.
CSS
html,
body,
a {
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
flex-wrap: wrap;
flex-basis: auto;
justify-content: space-evenly;
}
.flex div {
flex: 1;
padding: 2px;
min-width: 33%;
box-sizing: border-box;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
.flex div {
min-width: 50%;
}
}
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<center>
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
</center>
If the width of a parent div is flexible, but the contents inside of a div don't have to be, you can use display: inline-block in the image class. This will help you get the effect that you want to achieve.
An example implementation would be
<div class="main-container">
<img class="inline-image" src="img1">
...
</div>
This is just a basic example; but you can achieve this behavior using either Flexbox or CSS Grid, depending on how exactly you want the items to arrange themselves.
Flexbox usually is better for one-dimensional layouts, that meaning, when you want items to be aligned in one direction (either columns or rows); while CSS Grid is a lot easier to handle two-dimensional layouts where you need items to be aligned in both directions.
Take a look:
body * {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: center;
grid-gap: 15px;
grid-auto-rows: minmax(100px, auto);
}
.grid-item {
border: 1px solid black;
}
.flex {
width: 100%;
max-width: 650px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 30%;
margin: 5px;
}
#media (max-width: 590px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 45%;
margin: 5px;
}
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
I need to create one page with 4 elements: header, filter of elements, item list and item. But i can't to set div's without main page scroll. I want to have only one scroll bar - in item-list?
html,
body {
margin: 0;
height: 100%;
}
.header {
background-color: cadetblue;
height: 3em;
width: 100%;
}
.space {
width: 25em;
height: 100%;
}
.filter {
width: 100%;
height: 5em;
background-color: darkblue
}
.item-list {
height: 100%;
margin: 0.2em;
overflow: auto;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<body>
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
Can anybody to help me with this?
You can use flex and overflow:
html,
body {
margin: 0;
height: 100%;
}
/* === flex update ====*/
body, .space {/* display:flex and overflow:hidden */
display:flex;
flex-direction:column;
overflow:hidden;
}
.space, .item-list {/* fill whole space avalaible */
flex:1;
}
.item-list {
overflow: auto;/* overflow ...*/
background:gray /* debug, see me */
}
/* === end flex update ====*/
.header {
background-color: cadetblue;
height: 3em;
}
.space {
width: 25em;
}
.filter {
width: 100%;
height: 5em;
background-color: darkblue
}
.item-list {
margin: 0.2em;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
You can avoid using Scroll on the main element by setting a static height on your header and using calc on your space element, just like the example..
html,
body {
margin: 0;
height: 100vh;
}
.header {
background-color: cadetblue;
height:20px;
width: 100%;
}
.space {
width: 25em;
height: calc(100% + -30px);
position:relative;
}
.filter {
width: 100%;
height: 20%;
background-color: darkblue
}
.item-list {
height: 80%;
margin: 0.2em;
overflow: auto;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<body>
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
remove overflow:auto from .item-list
and make the .item class height 100% instead of 20em.
Hope this will full full your requirement.