Before posting this I saw several question, including
question
question
question
and also the guide to flex-box of css tricks. However I don't understand how to solve a problem regarding the rendering of some cards that I made.
Problem
The behaviour of the cards is not OK:
The text sometimes is going outside (I tried to use word-break: keep all) the cards and I don't understand why
Sometimes the space between two cards is 0 pixels.
Expected behaviour
Cards with the text inside them, and that respect the space between them.
Code
.wrapper{
min-height: 100vh;
background-color: lightgray;
display: flex;
flex-direction: column;
}
.content {
height:auto;
flex: 1;
background: #FAFAFA;
display: flex;
color: #000;
}
.columns{
display: flex;
flex: 1;
}
.main{
z-index:1;
flex: 1;
background: #eee;
}
.sidebar{
overflow: auto;
text-align: center;
z-index: 1;
height: 100%;
width: 40%;
background: white;
}
.title{
font-size: 25;
margin-bottom: -20px;
width: 100%;
}
.photo{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 50%;
}
.rating{
font-size: 20px;
}
.card {
cursor: pointer;
text-overflow: ellipsis;
background-color: white;
text-decoration: none;
border-radius: 10px;
box-shadow: 1px 1px 50px black;
margin:auto;
width: 55%;
height: 320px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin-top: 50px;
margin-bottom: 50px;
word-break:keep-all;
padding: 0px;
}
a{
text-decoration: none;
text-decoration-color: black;
color: black;
}
.address{
font-size: 20px;
padding: 20px;
}
<html>
<head>
<title>Restosearch</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Menu down below -->
<div class="circle"></div>
<button class="btn">
<span class="btn__line"></span>
<span class="btn__line"></span>
<span class="btn__line"></span>
</button>
<div class="full-menu">
<div class="layer"></div>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#" class="nav__link">
Home
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
About
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
Portfolio
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
Contacts
</a>
</li>
</ul>
</nav>
</div>
<!-- Menu up above -->
<!-- Input, maps and cards down below -->
<main>
<div class="container">
<div class="box">
<div>
<h2 style="">Search the closest restaurant</h2>
</div>
</div>
</div>
<div class="downBox">
<input id="pac-input" class="controls" type="text" placeholder="insert here: yourNation, yourCity, yourStreet">
</div>
<div class="divider"></div>
<div class="wrapper">
<section class="content">
<div class="columns">
<main class="main">
<div id="map"></div>
</main>
<aside class="sidebar" style="background-color: gainsboro">
</aside>
</div>
</section>
</div>
<div class="divider"></div>
<!-- this section will appear only when you click on a card -->
<!-- Ricorda di settare i css per queste sezioni, il titolo deve essere circa alto 20/ 30 % -->
<div class="wrapperTwo detail">
<section class="content">
<div class="columns">
<aside class="sidebarTwo" style="">
<div class="placeInfo">
</div>
</aside>
<main class="mainTwo">
<div class="detailtitle"><h2>Titolo del ristorante qua</h2></div>
<hr>
<div class="review">
</div>
</main>
</div>
</section>
</div>
<!-- Input, maps and cards up above -->
</main>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="script.js"> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyApi&libraries=places&callback=initAutocomplete"
async defer></script>
</html>
Every card is generated dynamically with this code:
$(".sidebar").append("<div class=\"card\" id=\"" + idPlace +"\"><img src=\"" + photoMarker + " \"class=\"photo\"><div class=\"title\"><h6>" + name +"</h6></div><div class=\"rating\"><p>Rating: " + rating + "</div class=\"address\"><p>" + address + "<div class=\"space\"></div></p></div>");
This is the resulting card in the HTML structure:
<div class="card">
<img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="photo">
<div class="title"><h4></h4></div>
<div class="rating"></div>
<p></p>
</div>
Codepen
codepen here
A note about this codepen: I don't understand why, but in Chrome the layout of the row into the div wrapper is fine, however in the codepen it is not.
I'm definitely missing something, so any advice will be really appreciated.
Update
As suggested in the comments i updated the codepen, now you can see differents card in the right sidebar and as you can see the problems are:
the text go outside the card space
the cards are too closer
the sidebar aren't able to read the property of the overflow, in my chrome as you can see the sidebar has a vertical scrollbar.
Since your code is a mess, I can't see it properly and give you a working example, but your problem sounds simple. In order to see spaces between the cards you need 2 things:
Set the container with justify-content: space-between;
Give a margin to each card
Here is a simple example:
.container{
width: 80%;
border: 1px solid black;
padding: 10px;
display: flex;
justify-content: space-between;
}
.card{
background-color: #bada55;
flex-grow:1;
margin: 10px;
height: 50px;
}
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Related
I have a set of columns each containing a square box that fills to the column width and maintains a square height ratio.
The entire box needs to be clickable, with the content inside that also centered within the box. I can't figure out a way of getting the inner <a> element to fill out the space inside the parent div and have its own content centered.
Here is an editable Fiddle
The entire square should be red, entirely clickable, and with a centered download button within.
I've reviewed a bunch of similar questions about making square boxes with CSS but didn't find anything about the inner elements filling out the box like this.
Thanks
.block {
width: 100%;
height: 0;
padding-bottom: 100%;
border: 2px solid #600;
}
.block a {
display: flex;
justify-content: center;
align-items: center;
background: #C00;
text-decoration: none;
}
.block span {
padding: 1em;
border: 2px solid #FFF;
text-align: center;
color: #FFF;
}
/* Demo only */
.row {
display: flex;
justify-content: space-between;
}
.column {
width: 20%;
}
<div class="row">
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
</div>
Setting the parent .block to position: relative allows us to set .block > a to position: absolute, with dimensions that fill its parent; I only added 3 css rules, they're commented so you know which ones:
.block {
position: relative; /* change #1 */
width: 100%;
height: 0;
padding-bottom: 100%;
border: 2px solid #600;
}
.block a {
position: absolute; /* change #2 */
left: 0; right: 0; top: 0; bottom: 0; /* change #3 */
display: flex;
justify-content: center;
align-items: center;
background: #C00;
text-decoration: none;
}
.block span {
padding: 1em;
border: 2px solid #FFF;
text-align: center;
color: #FFF;
}
/* Demo only */
.row {
display: flex;
justify-content: space-between;
}
.column {
width: 20%;
}
<div class="row">
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
</div>
I am creating a portfolio page in which I am showing my 6 projects, 3 in a row using flexbox. The items inside are flowing out of the flexbox even though I have used flex-wrap. I am relatively new to this so I don't know what is happening.
The red border is my flexbox container and it contains six div elements. Inside each div element, there is one image and another div element which is like a caption. Each image is of a different size
HTML Code:
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
CSS Used:
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
There is one particular line which is enabling equal height for all images height: calc(100% );. I don't know how it works, I took it from the internet. It was used to have the equal height for each image.
Also, the bottom and the top margin between blocks is not working.
I want some help in wrapping content inside container properly and understanding how height: calc(100% ); works.
Complete Code: https://codepen.io/tushar_432/pen/poyxmyZ
Don't make the image height:100%, this will make the image take all the space pushing the text outside thus the overflow. Use flexbox to make it fill all the space minuse the text space:
#work-container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block {
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block {
width: 45%;
}
}
.work-block {
display:flex; /* here */
flex-direction:column; /* here */
}
.work-block img {
width: 100%;
margin: 0;
padding: 0;
object-fit: cover;
flex: 1; /* here */
}
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
</section>
Your caption is overflowing, you can add
display: flex;
flex-direction: column;
to your .work-block
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght#400;700&family=Catamaran:wght#400;600&family=Raleway:ital#1&display=swap');
*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
top:0;
}
body{
background-color: bisque;
font-family: 'Catamaran', sans-serif;
text-align: center;
}
#header{
position: sticky;
top:0px;
margin:0;
}
#navbar{
color:white;
width:100%;
display: flex;
background-color:#12343b;
flex-direction: row;
justify-content: flex-end;
padding:18px;
font-family: 'Catamaran', sans-serif;
font-size: x-large;
font-weight: 450;
border-bottom: 2px solid white;
}
.nav-block:hover{
color:#e1b382;
}
.nav-block{
padding:0 20px;
}
#about h1{
font-family: 'Alegreya Sans', sans-serif;
font-weight: 700;
font-size: 65px;
color: #fefefe;
}
#about h3{
font-size:24px;
font-family: 'Raleway', sans-serif;
color: #e1b382;
}
#about{
text-align: center;
padding:250px;
background-color:#2d545e;
color:white;
}
#work{
padding:50px 0;
background-color: #e1b382;
}
#work h1{
font-weight: 600;
font-size: 40px;
color: #12343b;
}
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
display: flex;
flex-direction: column;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
#contact{
padding:150px;
background-color: #2d545e;
}
#contact-container{
display: flex;
}
#footer{
padding:40px;
background-color:#2d545e;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<header id="header">
<nav id="navbar">
<div class="nav-block">About</div>
<div class="nav-block">Work</div>
<div class="nav-block">Contact</div>
</nav>
</header>
<section id="about">
<h1>Hey I am Tushar</h1><br>
<h3>a computers <br>and technology enthusiast</h3>
</section>
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
<section id="contact">
<h1>Let's Work Together</h1>
<p>How do you take your coffee?</p>
<div id="contact-container">
<div class="contact-block">
<i class="fab fa-facebook"></i><span>Facebook</span>
</div>
<div class="contact-block">
<i class="fab fa-github"></i><span>Github</span>
</div>
<div class="contact-block">
<i class="fas fa-hashtag"></i><span>Twitter</span>
</div>
<div class="contact-block">
<i class="fas fa-at"></i><span>Send a mail</span>
</div>
<div class="contact-block">
<i class="fas fa-mobile-alt"></i><span>Call me</span>
</div>
</div>
</section>
<footer id="footer">
<span>**This is just a fake portfolio. All the projects and contact details given are not real.</span>
<span>© Created for freeCodeCamp </span>
</footer>
I'm trying to learn how to use grid layout. I need to make my grid take the entire page, but for some reason, there is an extra space between the navigation bar (1st row) and the 2nd row. how do I get rid of the space so that the only space remaining between 1st and 2nd row is the grid-gap I specified.
screenshot
* {
margin: 0px;
padding: 0px;
}
#grid-layout {
display: grid;
grid-gap: 6px;
grid-column: 1fr 1fr 1fr 1fr;
grid-row: 60px auto auto auto 30px;
width: 100vw;
height: 100vh;
grid-template-areas: "nav nav nav nav" "top-post top-post post-2 post-3" "top-post top-post post-4 post-5" "newsletter newsletter newsletter newsletter" "ft ft ft ft";
}
.nav-bar {
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}
.website-title {
width: 40%;
justify-content: flex-start;
}
.nav-bar-list {
display: flex;
flex-direction: row;
width: 60%;
justify-content: flex-start;
margin: 0px;
}
.nav-bar-item {
margin-right: 50px;
}
.main-post {
grid-area: top-post;
border: 1px solid red;
width: 100%;
height: 100%;
}
#post2 {
grid-area: post-2;
border: 1px solid red;
}
#post3 {
grid-area: post-3;
border: 1px solid red;
}
#post4 {
grid-area: post-4;
border: 1px solid red;
}
#post5 {
grid-area: post-5;
border: 1px solid red;
}
.newsletter {
grid-area: newsletter;
border: 1px solid red;
}
#footer {
grid-area: ft;
border: 1px solid red;
text-align: center;
align-items: center;
padding: 5px;
margin: 0px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="utf-8">
</head>
<body>
<div id="grid-layout">
<nav class="nav-bar">
<div class="website-title">Title</div>
<ul class="nav-bar-list">
<li class="nav-bar-item">Home</li>
<li class="nav-bar-item">Blog</li>
<li class="nav-bar-item">About</li>
</ul>
</nav>
<section class="main-post">
<div class="text-gradient">
<a href="#">
<h4>Main Post Here</h4>
</a>
<p>Main Post Summary here</p>
Read More
</div>
</section>
<section class="post" id="post2">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 2 Here</h4>
<p>Post 2 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post3">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 3 Here</h4>
<p>Post 3 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post4">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 4 Here</h4>
<p>Post 4 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post5">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 5 Here</h4>
<p>Post 5 subtitle</p>
</div>
</a>
</section>
<section class="newsletter">
<form action="#">
<h5>Subscribe to our Newsletter</h5>
<div class="newsletter-container">
<div class="newsletter-element">
<input type="text" placeholder="Name" name="name" required>
</div>
<div class="newsletter-element">
<input type="text" placeholder="Email address" name="mail" required>
</div>
<div class="newsletter-element">
<input type="submit" value="Subscribe">
</div>
</div>
<!-- newletter container -->
</form>
</section>
<footer id="footer">
<div>
<p>All Right Reserved</p>
</div>
</footer>
</div>
</body>
</html>
.nav-bar{
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}
you have the padding:10px in your css code, the padding attribute puts some margin over were the .nav-bar tag is applied, you have to change it to padding:0px or remove it completely
I think the problem is about your "div" elements, ´´´<div id="grid-layout> ´´´ in HTML is working as the body of the code, I tried some solutions about this but I am also kınd a new in this too.
it was a typo instead of "grid-template-column" "grid-template-row" I had "grid-column" "grid-row"
Hi i am trying to create a blog website and i have problem that i divided page section in 3 parts i want 1,3 part section height should be equal to 2part(content part) height how to do that i tried many times but not happening
attaching screenshot of output i highlighted the part where i don't want text.
i know solution by bootstrap and js but i want from html/css
function myfucn(){
var a = document.querySelector(".content");
var b = document.querySelector(".left");
a.innerHeight() = window.innerHeight();
}
*{
padding:0px;
box-shadow: none;
margin: 0px;
}
.top{
width: cover;
height: 200px;
text-align: center;
}
.left{
text-align: center;
height: 100%;
float: left;
width: 200px;
background-color: green;
}
.right{
float: right;
width: 200px;
height: 500px;
}
.bottom{
position:fixed;
bottom: 0;
}
a{
text-decoration: none;
padding-right: 30px;
}
ul li{
list-style: none;
display: inline-block;
}
.name{
text-align: left;
padding-left: 30px;
top: -10px;
}
.name:hover{
color: red;
}
.namedes{
text-align: left;
padding-left: 35px;
}
.authorimg:hover{
transition: 2s;
transition-property: fade-in;
transform:rotate(10deg);
}
.googletranslate{
padding-top: 10px;
font-weight: 10;
}
.hackingsubmenu{
width: 100px;
height: 50px;
background-color: transparent;
font-size: 10px;
list-style: none;
text-align: left;
display: none;
}
/*.hacking:hover .hackingsubmenu{
display: block;
}*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="top"><!-- top -->
<ul> <!-- links -->
<li>HOME</li>
<li>ABOUT</li>
<li>HACKING
<ul class="hackingsubmenu">
<li>web hacking</li>
<li>app hacking</li>
<li>android hacking</li>
</ul>
</li>
<li>PROGRAMMING</li>
<li>ANDROID</li>
<li>WINTRICKS</li>
<li>SHARE WITH US</li>
<li>DOWNLOAD SOFTWARE</li>
</ul><!-- end of links -->
<div class="jumbotron"><!-- jumbotron -->
<h3 class="name">VAIBHAV'S BLOG</h3>
<p class="namedes">learn ethical hacking in a good way </p>
</div><!-- end of jumbotron -->
</div>
<div class="left"><!-- left -->
<h3>Author</h3>
<img class="authorimg" src="img/All-Time-Popular-Top-15-Hacking-Tool-For-Hackers-2015-Angry-IP-Scanner.png" alt="image" height="200px; width:cover" />
<h3>Categories</h3>
<ul style="list-style:none;">
<li>Android hacking</li><br/>
<li>Web hacking</li>
<li>Application hacking</li>
<li>Software hacking </li>
</ul>
</div><!-- end of left -->
<div class="right"><!-- right -->
<!-- google translate -->
<h4 class="googletranslate" style="text-align: center;" title="you are at right place you can now easily translate your webpage">GOOGLE TRANSLATE</h4>
<!-- google translate end -->
<!-- page counter -->
<h4 class="pagecounter" style="text-align: center;">PAGE COUNTER</h4>
<!-- end of page counter -->
</div>
<div class="bottom"><!-- bottom -->
<h6 class="fa fa-facebook">follow us on fb </h6>
</div>
screenshot of output
Alright, if you don't want to use any lib. You can wrap all your left, center, and right div into one div call middle (any name you like), then you style middle div with width: 100%.
Your content should be inside the center div. Your center div should have style float: left
<div class="middle" style="width: 100%;">
<!-- left -->
<div class="left" width="20%">
left
</div>
<!-- end of left -->
<!-- left -->
<div class="center" style="width: 60%; float: left">
the very long content here
</div>
<!-- right -->
<div class="right" style="width: 20%">
right
</div>
</div>
Use css grid. You don't have to even touch your html structure.
Here it is:
body {
padding: 0px;
margin: 0px;
height: 100vh;
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: auto auto 50px;
background: peru;
}
.top {
grid-column: 1;
grid-row: 1;
text-align: center;
background: #ccc;
}
.left {
grid-column: 1;
grid-row: 2;
text-align: center;
background-color: green;
}
.right {
grid-column: 2;
grid-row: 1 / span 2;
background: yellow;
overflow: auto;
}
.bottom {
background: pink;
grid-column: 1 / span 2;
grid-row: 3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAYOUT</title>
</head>
<body>
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
<div class="bottom">
BOTTOM
</div>
</body>
</html>
I want to decrease the space between "pricing", "how it works" and "features", as you can see here
I also know I can do that with margin but I tried a lot of different ways and it just don't come to mind on how to do that, so, it'd great if you could give me a hand.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin:15px 32px 0px 5px;
}
.nav-link{
position: relative;
float:right;
padding: 24px 40px 15px 20px;
}
#hero{
margin-top: 90px;
text-align: center;
}
#header{
overflow: hidden;
}
#email{
max-width: 275px;
width: 100%;
box-sizing: border-box;
padding:5px;
}
#form{
text-align: -webkit-center;
display: flex;
flex-direction: column;
}
.btn{
margin-top:13px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 150px;
width: 100%;
height: 30px;
background-color: #f1c40f;
padding: 0 20px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px;
border-radius: 2px;
cursor: pointer;
}
.flex{
display:flex;
margin-top: 80px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
.desc{
display: flex;
flex-direction: column;
justify-content: unset;
height: 125px;
width: 80vw;
padding: 41px 0px 0px 0px;
text-align: start;
}
.eighttwo, p{
padding: 0;
margin: 0;
}
.divisor{
margin-top: -40px;
}
.container{
width:100%;
max-width: 1000px;
}
a{
text-decoration: none;
color: #000;
}
#nav-bar{
display: flex;
background: #eee;
flex-direction: row;
}
#media screen and (max-width: 410px) {
#nav-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
margin-top: 30px;
padding: 0 50px;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
<form id="form">
<input id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Get Started" class="btn">
<div class="container">
<section id="features">
<div class="flex two">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-battery-full"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
<section id="how-it-works">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</section>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
If you use justify-content: space-between; for your flex container and margin-left: auto; on the first of your links, the links will be moved as far right as their size and padding allows - see below. (BTW: Erase the float: left - it has no effect for flex items)
#nav-bar {
display: flex;
background: #eee;
flex-direction: row;
justify-content: space-between;
}
.nav-link {
padding: 24px 40px 15px 20px;
}
.nav-link:first-of-type {
margin-left: auto;
}
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>