This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 7 years ago.
Hi i am having trouble with removing the white space between header and content, which are in div tags. I tried lots of things that i searched in google and other tutorials but cant find the solution. Any help would be appreciated.
Here is my code:
/*--------------general-----------------*/
body {
margin: 0;
padding: 0;
}
/*------------header--------------------*/
#header {
background-color: #d4e6d5;
display: block;
margin-bottom: 0;
padding-bottom: 0;
}
#header #navigation {
width: 1100px;
background-color: red;
margin-left: 133px;
}
#navigation ul {
list-style: none;
width: 685px;
margin-left: 173px;
}
#navigation #nav-meny {
display:inline-block;
border:solid;
border-bottom: none;
}
#navigation li a{
text-decoration: none;
display: inline-block;
padding: 20px;
padding-left: 40px;
padding-right: 40px;
color: black;
font-size: 16px;
font-weight: bold;
background-color: teal;
}
#navigation li a:hover {
background-color: yellow;
}
/*------------------ contenti ---------------*/
#content {
width: 1100px;
background-color: grey;
margin-left: 133px;
min-height: 580px;
}
#content h3 {
margin-left: 20px;
margin-top: 20px;
/*gives margin top to whole content div???*/
}
/*---------------- footeri --------------------*/
#footer {
}
#footer p {
}
<div id="header">
<div id="navigation">
<ul>
<li id="nav-meny">Tabi1</li>
<li id="nav-meny">Tabi2</li>
<li id="nav-meny">Tabi3</li>
<li id="nav-meny">Tabi4</li>
<li id="nav-meny">Tabi5</li>
</ul>
</div> <!-- end of navigation -->
</div> <!--end of header -->
<div id="content">
<!-- Content here -->
<h3> Here will be content...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.\</p>
</div> <!-- end of content-->
<div id="footer">
<p>Here is footer...</p>
</div> <!-- end of footer-->
I searched in this site for this problem, but could not find a solution that helped me...
Thank you for your time :)
Two things doing this:
margin-bottom of the ul in the header - you have to remove it
margin-top of the h2 in #content. Add a overflow: hidden to #content and the margin will stay inside #content (I think this is what you want).
Snippet:
/*--------------general-----------------*/
body {
margin: 0;
padding: 0;
}
/*------------header--------------------*/
#header {
background-color: #d4e6d5;
display: block;
margin-bottom: 0;
padding-bottom: 0;
}
#header #navigation {
width: 1100px;
background-color: red;
margin-left: 133px;
}
#navigation ul {
list-style: none;
width: 685px;
margin-left: 173px;
margin-bottom: 0; /* <------------ new */
}
#navigation #nav-meny {
display:inline-block;
border:solid;
border-bottom: none;
}
#navigation li a{
text-decoration: none;
display: inline-block;
padding: 20px;
padding-left: 40px;
padding-right: 40px;
color: black;
font-size: 16px;
font-weight: bold;
background-color: teal;
}
#navigation li a:hover {
background-color: yellow;
}
/*------------------ contenti ---------------*/
#content {
width: 1100px;
background-color: grey;
margin-left: 133px;
min-height: 580px;
overflow: hidden; /* <------------ new */
}
#content h3 {
margin-left: 20px;
margin-top: 20px;
/*gives margin top to whole content div???*/
}
/*---------------- footeri --------------------*/
#footer {
}
#footer p {
}
<div id="header">
<div id="navigation">
<ul>
<li id="nav-meny">Tabi1</li>
<li id="nav-meny">Tabi2</li>
<li id="nav-meny">Tabi3</li>
<li id="nav-meny">Tabi4</li>
<li id="nav-meny">Tabi5</li>
</ul>
</div> <!-- end of navigation -->
</div> <!--end of header -->
<div id="content">
<!-- Content here -->
<h3> Here will be content...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.\</p>
</div> <!-- end of content-->
<div id="footer">
<p>Here is footer...</p>
</div> <!-- end of footer-->
H3's and UL's intrinsically have margins, you'll need to set them to 0 to remove the gap
#navigation ul {
list-style: none;
width: 685px;
margin-left: 173px;
margin-bottom: 0;
}
#content h3 {
margin-left: 20px;
margin-top: 0px;
/*gives margin top to whole content div???*/
}
Edit:
Oh and if you want to stretch the container use padding not margin.
#content h3 {
padding-left: 20px;
padding-top: 20px;
margin-top: 0px;
/*gives margin top to whole content div???*/
}
Add this to your css file:
*{
margin:0px;
}
JSFiddle: http://jsfiddle.net/leonard01/vrpmwnnv/1/
Related
I'm trying to show the sidebar below the header initially, which works fine when the user lands on the website, but when a user scrolls the page, the sidebar not taking the full height, basically I want to achieve sidebar to be fixed at the left once user scrolls just like shown here.
Here is my code snippet
html,
body {
height: 100%;
}
.header {
border: 1px solid black;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.body {
height: 100%;
background-color: tomato;
display: flex;
padding-bottom: 2000px;
}
.sidebar {
width: 30%;
position: -webkit-sticky;
position: sticky;
height: 100%;
background: black;
color: white;
/* top: 0px; */
}
.content {
padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
<div class="sidebar">SIDEBAR</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>
I removed height:100% on body and html and also .height, because there is no goal of that as they are adapting their height based on content.
Then I fixed the sidebar height to 100vh.
Now it is fixed. It only leaves at the end because you added a padding-bottom: 2000px; in your .body container.
html,
body {
/*height: 100%;*/
}
.header {
border: 1px solid black;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.body {
/*height: 100%;*/
background-color: tomato;
display: flex;
padding-bottom: 2000px;
}
.sidebar {
width: 30%;
position: -webkit-sticky;
position: sticky;
height: 100vh;
background: black;
color: white;
top: 0;
}
.content {
padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
<div class="sidebar">SIDEBAR</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>
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>
How can I create top navbar with logo on the left and nav on the right. When i use flexbox or display-inline-block it doesn't work.
<header id="header" class="header">
<a class="logo" href="" title="">Essembli.</a>
<nav class="top-nav">
<ul class="site-nav">
<li>O nas</li>
<li>Zespół</li>
<li>Kompetencje</li>
<li>Zarząd</li>
<li>Kariera</li>
<li>Kontakt</li>
</ul>
</nav>
</header><!-- /header -->
My CSS:
.header {
position: fixed;
.logo {
float: left;
}
.top-nav {
.site-nav {
display: inline-block;
li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
}
}
}
You can get it by using following approach
I posted it in css not scss.
If you check fiddle it will more clear you that to how to get it.
Fiddle
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
background: tomato;
padding: 5px;
}
.logo {
flex: 1 0 0;
}
.navigation {
flex: 1 0 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.navigation ul {
display: flex;
width: 100%;
justify-content: space-between;
}
.content {
margin-top: 30px;
}
<header id="header" class="header">
<div class="logo">
LOGO
</div>
<div class="navigation">
<ul>
<li>NAV</li>
<li>NAV</li>
<li>NAV</li>
<li>NAV</li>
</ul>
</div>
</header>
<!-- /header -->
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
</div>
You need to apply that display: inline-block; to .top-nav since nav is a block element by default.
Added red/green background color to show you the block size, instead of using float, just use a div to wrap the logo
https://jsfiddle.net/dalinhuang/hfhjtp2y/
SCSS:
.header {
position: fixed;
background: green;
.logowrapper {
display: inline-block;
}
.top-nav {
.site-nav {
display: inline-block;
li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
}
display: inline-block;
background: red;
}
}
.header {
position: fixed;
background: green;
}
.header .top-nav {
display: inline-block;
background: red;
}
.header .top-nav .site-nav {
display: inline-block;
}
.header .top-nav .site-nav li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
.logowrapper {
display: inline-block;
}
<header id="header" class="header">
<div class="logowrapper"><a class="logo" href="" title="">Essembli.</a></div>
<nav class="top-nav">
<ul class="site-nav">
<li>O nas</li>
<li>Zespół</li>
<li>Kompetencje</li>
<li>Zarząd</li>
<li>Kariera</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<!-- /header -->
CODEPEN
How can I align my paragraphs between columns when my h1s vary in size? caveat I have no control over the size of headers and therefore cannot add a static height.
Align to the crosshairs.
HTML:
<div class="paddingBlock">
<h1>Align the paragraphs to dynamic height h1s</h1>
<p>How do I make sure the paragraphs align w/o a fixed height on headers ?</p>
<div class="eqWrap">
<div class="eq">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium numquam quibusdam quis, deleniti placeat quas vitae ex </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
</div>
<div class="eq">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nesciunt aliquam magni corporis dolor, assumenda similique nisi doloremque repudiandae, consequatur, reprehenderit. Explicabo dolorum consequatur quasi consequuntur, qui adipisci saepe ipsam!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
</div>
</div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
font-family: sans-serif;
line-height: 1.4;
}
h1 {
font-size: 150%;
}
p {
margin-bottom: 10px;
}
.eqWrap {
display: flex;
}
.eq {
width: 50%;
padding: 10px;
}
.eq:nth-child(1) {
background: papayawhip;
}
.eq:nth-child(2) {
background: maroon;
}
One thing you can try is to make your content boxes (.eq) flex containers, then use auto margins to pin the paragraphs to the bottom:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: sans-serif;
line-height: 1.4;
}
h1 {
font-size: 150%;
}
.eqWrap {
display: flex;
}
.eq {
width: 50%;
padding: 10px;
display: flex; /* NEW */
flex-direction: column; /* NEW */
}
p {
margin-top: auto; /* NEW */
margin-bottom: 10px;
}
<div class="paddingBlock">
<h1>Align the paragraphs to dynamic height h1s</h1>
<p>How do I make sure the paragraphs align w/o a fixed height on headers ?</p>
<div class="eqWrap">
<div class="eq">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium numquam quibusdam quis, deleniti placeat quas vitae ex </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
</div>
<div class="eq">
<h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nesciunt aliquam magni corporis dolor, assumenda similique nisi doloremque repudiandae, consequatur, reprehenderit. Explicabo dolorum consequatur quasi consequuntur, qui adipisci saepe ipsam!</h1>
<p>Align these paragraphs. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam
harum commodi impedit.</p>
</div>`
</div>
Revised Codepen
Depending on the size of each paragraph, and where you want your h1 aligned, you may need to adjust the auto margins. Here are some examples: Methods for Aligning Flex Items