Footer is on right place but the columns in section are overlapping the footer
.columns {
float:left;
width: 22%;
height: 30%;
margin-left:8%;
}
Instead of float:left; I have used display:inline-block; but issue
not resolved this problem is occurring when website displayed on
mobile. When viewed on desktop it's working fine.
Try adding this to your CSS
box-sizing: border-box;
.container {
background: #f4f4f4;
padding: 5%;
margin: 5%;
}
.column1 {
background: #b40404;
padding: 5%;
color: #fff;
}
.column2 {
background: #000;
padding: 5%;
color: #fff;
}
.column3 {
background: #b40404;
padding: 5%;
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="column1">
This is column 1<br><br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus vero labore obcaecati illum reprehenderit incidunt consequatur quidem, id repellendus impedit, quaerat, mollitia ea culpa sint? Totam sunt omnis quis
eaque.
</div>
</div>
<div class="col-md-4">
<div class="column2">
This is column 2<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium mollitia, incidunt accusantium iure eius suscipit fugit tempore veniam deleniti, nulla dolore repudiandae voluptas, eaque architecto ratione recusandae
consectetur officia. Saepe.
</div>
</div>
<div class="col-md-4">
<div class="column3">
This is column 3<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis vitae nulla, beatae tenetur ea eaque obcaecati perspiciatis, architecto nemo culpa id non facilis distinctio aliquam. Accusamus voluptatum mollitia perferendis
libero.
</div>
</div>
</div>
</div>
you can use Bootstrap. Use the class container then row and define columns inside it. Like this:
Related
I am doing a course on Frontend Masters. This is the first project of the introductory course. I made the website according to the one said at: https://btholt.github.io/intro-to-web-dev-v2/news.html
Here's my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="P1.css">
<link href="https://fonts.googleapis.com/css2?family=Aladin&display=swap" rel="stylesheet">
<title>The News Times</title>
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
</head>
<body>
<div>
<h1 class="heading">The News Times</h1>
</div>
<div class="flex">
<div class="blk s25">
<h3 class="title">Student Learns HTML</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit!
Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,
dolore nesciunt repellat ipsum?
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit!
Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,
dolore nesciunt repellat ipsum?
</p>
</div>
<div class="blk s50">
<h3 class="title">BREAKING: Puppies are adorable</h3>
<img src="http://placecorgi.com/600/300" alt="Corgie" style="width: 96%;">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit!
Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,
dolore nesciunt repellat ipsum?
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit!
Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,
dolore nesciunt repellat ipsum?
</p>
</div>
<div class="blk s25">
<h3 class="title">CSS is Apparently a Thing</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit!
Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,
dolore nesciunt repellat ipsum?
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit!
Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,
dolore nesciunt repellat ipsum?
</p>
</div>
</div>
<div class="flex">
<div class="blk s25 cust">
<h3 class="title">Boy likes Turtle</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit!
Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,
dolore nesciunt repellat ipsum?
</p>
<p>Voluptate, ut, cupiditate ducimus vitae blanditiis ex impedit debitis est tempora dolores nam sed. Esse nobis
ea inventore qui enim quia beatae ab commodi laboriosam quam aliquam aut perspiciatis fuga nam rerum temporibus
voluptatum explicabo voluptate, pariatur ullam laudantium eligendi.
</p>
</div>
<div class="blk s75">
<div class="inner-flex">
<div class="element politics">
<h1>Politics</h1>
</div>
<div class="element technology">
<h1>Technology</h1>
</div>
<div class="element local">
<h1>Local</h1>
</div>
<div class="element sports">
<h1>Sports</h1>
</div>
<div class="element opinion">
<h1>Opinion</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Here's my CSS code:
body
{
background-color: indianred;
}
.heading
{
text-align: center;
font-size: 120px;
font-family: 'Cedarville Cursive', cursive;
margin: 0px 0px;
}
.flex
{
display: flex;
align-items:stretch;
border: 2px solid black;
align-content: center;
margin:2.0%;
height: 100%;
}
.blk
{
padding: 7px;
text-align: center;
}
.s50
{
width: 50%;
border-left: 2px solid black;
border-right: 2px solid black;
}
.s25
{
height: inherit;
width: 25%;
}
.s75
{
width: 75%;
}
.title
{
font-family: 'Aladin', cursive;
font-size: 60px;
}
.cust
{
border-right: 2px black solid;
}
.inner-flex
{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
padding: 0;
margin: 0;
}
p{
text-align: justify;
}
.element
{
text-align:left;
}
.politics
{
background-color: #ffeaa7;;
}
.technology
{
background-color: #81ecec;;
}
.local
{
background-color: #55efc4;;
}
.sports
{
background-color: #a29bfe;;
}
.opinion
{
background-color: #74b9ff;;
}
However you would see that on zooming in the page, the inner-flex div doesnt occupy the whole length.
Any ideas how to fix it?
This is because you have a different structure of elements.
In the original example the parent flex row (<section class="row">) has set align-items: stretch; css property. This is responsible for the stretching.
Original:
<section class="row">
<article class="story quarter">
<!-- content //-->
</article>
<ul class="story three-quarter other-sections">
<!-- links //-->
</ul>
</section>
This is actually working in your code, but it is applied to the extra container div (<div class="blk s75">) only and it does not apply to the contents of that container. So your .inner-flex will not be stretched but rather gets the height to fit its contents.
Your code:
<div class="flex">
<div class="blk s25 cust">
<!-- content //-->
</div>
<div class="blk s75">
<div class="inner-flex">
<!-- links //-->
</div>
</div>
</div>
You can fix this by fixing the structure and eliminating that extra container or (as already suggested in the comments) by applying the css property height: 100%; to the class .inner-flex.
You can also apply the css property flex-grow: 1; to the .element class to close the gaps between the boxes (this was technically also suggested in the comments, as flex: 1; is a shortcut property that sets flex-grow among others).
I want to have 3 divs with text vertically aligned top, middle and bottom of the parent with an image on the right.
If possible, I need to support older browsers as well. Sorry if this is simple, I have very little experience with css.
I think you want something like this:
.container{
width: 500px;
height: fit-content;
display:flex;
background-color: #ff0000;
padding: 20px;
border: 1px solid black;
}
.textPart{
display:flex;
flex-direction:column;
width:50%;
background-color: rgba(255, 255, 255, 0.5);
}
.text{
border: 1px solid black;
padding:10px;
}
.imgPart {
background-image: url('https://www.placehold.it/200x400');
width: 50%;
border: 1px solid black;
}
<div class="container">
<div class="textPart">
<div class="text"><h1>Some text here</h1></div>
<div class="text"><h1>Some text here</h1></div>
<div class="text"><h1>Some text here</h1></div>
</div>
<div class="imgPart"></div>
</div>
The key point here is display: flex.
And about the browser support, most of the browsers, including may old versions, also support flexbox with or without the prefix -webkit-. (src- caniuse.com)
I used "float" property for this problem. because it is simple and have a good browser support. but you must notice that the width of two column is variable according to image size. you could use any image you want in "img" tag.
*, *::after, *::before {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#whole-parent {
background-color: rgb(120,110,122);
color: #fff;
}
/* these two class is directly related to layout */
.clearfix::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
padding: 5px;
}
/* ------------- */
.wid1 {
width: 70%;
}
.wid2 {
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>three divs</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="whole-parent" class="clearfix">
<div class="column wid1">
<div>
<h1>div1</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
<div>
<h1>div2</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
<div>
<h1>div3</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
</div>
<div class="column wid2">
<img src="book1.jpg" alt="an image">
</div>
</section>
</body>
</html>
With standard behavior of overflow: scroll the padding-bottom is in the bottom of the scrolled block. But how can I make padding-bottom fixed, so odd text will not appear right after bottom border
https://jsfiddle.net/nvg23rp8/6/
body{
background-color: green;
}
.wrapper{
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-top: 20px;
padding-bottom: 20px;
overflow-y: scroll;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.inner{
background: blue;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
CSS is all about illusions!
Make an outer container and give it some padding to give the required illusion. I couldn't get your Fiddle, so I made a new one. Here you go: https://jsfiddle.net/z9ztcstb/
.container {
position: relative;
}
.text-container {
background: red;
padding: 10px;
}
.text {
height: 100px;
/* background: green; */
overflow: scroll;
}
<div class="container">
<div class="text-container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In
quae earum recusandae beatae, optio. Incidunt velit corporis nesciunt, soluta dolor laborum eius recusandae perspiciatis. Est alias minima hic iure, incidunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam alias suscipit, quia, vitae consectetur laudantium nisi itaque odio aliquam dolorem voluptas atque, eos perspiciatis. Excepturi cumque doloribus ad, itaque tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quaerat saepe possimus fuga consequuntur, dolorum facere harum, ullam id similique tempora magni non dolores. Praesentium esse omnis quia eaque quos!
</div>
</div>
</div>
I would suggest that you put the scroll on the inner box, this would be the most effective way of preventing unwanted overflow of text below the blue background. You could do this without the 'inner' css. Try this out. fiddle here
Hope this helps
$('.wrapper').on('scroll', function() {
$('.inner').scrollTop($(this).scrollTop());
});
body {
background-color: green;
}
.wrapper {
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-bottom: 30px;
position: fixed;
left: 10%;
top: 10%;
}
.middle {
margin: 20px;
padding: 2px 5px;
height: 90%;
overflow-y: scroll;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
this will work:
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
</div>
<div class="border">
</div>
</div>
div.wrapper {
width:340px;
height:120px;
background-color:#ccc;
overflow:auto;
position:relative;
}
div.border {
border:solid 10px red;
height:100px;
position:fixed;
width:300px;
height:100px;
top:0;
left:0;
}
div.content{
z-index:1;
margin:10px;
}
The main point is to put the border outside of the .wrapper container.
The only issue I can see here is you cannot use mouse wheel to scroll .content inside .wrapper, since it has been overlapped by .border
Here is a JSFiddle link you can see: https://jsfiddle.net/zsydyc/pw9jz5s2/3/
I think this might be helpful.
body{
background-color: green;
}
.wrapper{
height: 140px;
width: 300px;
background: transparent;
border: 1px solid #000;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
height: 100px;
}
.inner{
background: blue;
overflow-y: scroll;
height: 100%;
}
::-webkit-scrollbar {
width: .5rem;
background: inherit;
}
::-webkit-scrollbar-thumb {
background: #f00;
border-radius:.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
let mymap = L.map('map').setView([54.5, -2], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
}).addTo(mymap);
*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.map-container{
display: flex;
}
/*#map {*/
/* //height: 100%;*/
/* //width: 100%;*/
/* position: absolute;*/
/* top: 0;*/
/* bottom: 0;*/
/* left: 0;*/
/* right: 0;*/
/*}*/
.map{
border: 1px solid green;
}
.info-block{
background: white;
width: 400px;
}
.info-block__inner{
overflow: scroll;
height: 100%;
}
.content_container{
padding: 0 20px 20px 20px;
}
.content{
margin-top: 30px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<div class='map-container'>
<div id="map" class="map flex-element"></div>
<div class="info-block flex-element">
<div class="info-block__inner">
<div class="content_container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
I have a plunker here - https://plnkr.co/edit/RnJBeUaXcQtOneIn4jwM?p=preview
I'm trying to create a layout like this - https://plnkr.co/edit/PvszkAJCwFK9FhftEwTA?p=preview
I need the full page split into two columns one fixed with and the other the rest of the with of the page and containing the map.
Is it possbile to do this with flex box.
.map-container{
display: flex;
}
You can accomplish that with these steps:
Give map-container a height, height: 100%;
Add flex-grow: 1 to map, and it will take the avail space left (and order: 1 to move it to the right side)
Move overflow: scroll to info-block (I changed it to auto and also removed the info-block__inner as it appeared it was only there for the scroll)
Instead of adding order: 1 to map, you can of course move its markup after the info-block.
Updated plnkr
Stack snippet
let mymap = L.map('map').setView([54.5, -2], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
}).addTo(mymap);
*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.map-container{
display: flex;
height: 100%;
}
.map{
border: 1px solid green;
flex-grow: 1;
order: 1;
}
.info-block{
background: white;
width: 400px;
overflow: auto;
}
.content_container{
padding: 0 20px 20px 20px;
}
.content{
margin-top: 30px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<div class='map-container'>
<div id="map" class="map flex-element"></div>
<div class="info-block flex-element">
<div class="content_container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
</div>
</div>
</div>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
You could do something like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.parent {
display: flex; /* displays children inline */
}
.parent > .fixed {
width: 400px; /* adjust to your needs */
height: 200px; /* for presentation */
background: Teal;
}
.parent > .map {
flex: 1; /* takes all the remaining space */
height: 200px; /* for presentation */
background: Aqua;
}
#media screen and (max-width: 568px) { /* adjust to your needs */
.parent {
flex-direction: column; /* stacks children vertically */
}
.parent > .fixed {
width: 100%; /* makes it responsive */
}
}
<div class="parent">
<div class="fixed">CONTENT</div>
<div class="map">MAP</div>
</div>
I created a few div and gave some colours to it in order to see the difference on changes as I code and see that there is a big white spacing between each box.
How can I remove these white spaces?
Here my fiddle: https://jsfiddle.net/Wosley_Alarico/8tgLzjeq/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
<ul>
<li><a id="deposit" href="#">Deposit</a></li>
<li><a id="account" href="#">Account</a></li>
<li><a id="credit" href="#">Credit</a></li>
</ul>
<div class="box deposit">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
<div class="box account">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
<div class="box credit">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
</div>
<div id="random">
<p>This is a random text</p>
</div>
CSS:
li{
list-style:none;
color: white;
width: 30%;
a{
color: white;
text-decoration: none;
&:hover{
color: blue;
}
}
}
ul{
background: black;
padding: 20px 0;
text-align: center;
display: flex;
justify-content: center;
}
.box{
height: 200px;
}
.deposit{
background-color: green;
}
.account{
background: pink;
}
.credit{
background: blue;
}
li a.active{
color: red;
}
Hope you can help
remove the p margins and replace them with paddings if needed: p{margin:0;}