Here's a backwards one.. IE Working while chrome does not!
I'm getting strange extra vertical spaces between divs in chrome. IE the divs sit flush against each other as intended.
I originally had a min-height attribute which caused some errors with width, but took that out. Still not entirely sure what's causing the spacing issue.
Any help is appreciated! Thanks all, -BR
CSS
#container {
width: 100%;
}
#headerout {
width: 100%;
height: 100px;
background: #1240AB;
}
#header {
width: 1000px;
margin: auto;
}
.splitout {
width: 100%;
height: 225px;
}
.split {
width: 1000px;
margin: auto;
}
.content {
width: 750px;
margin: auto;
}
.white {background-color: #DDE3F0;}
.lightblue {background-color: #C9D5F0;}
#footerout {
width: 100%;
height: 30px;
background: #1240AB;
}
#footer {
width: 1000px;
margin-left: 25px;
}
Markup
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset='utf-8'>
</head>
<body>
<div id="container">
<header>
<div id="headerout">
<div id="header">
<p>Content<p>
</div>
</div>
</header>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout lightblue">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
</div>
<div id="footerout">
<div id="footer">
<p>foot</p>
</div>
</div>
</body>
</html>
Don't use css-reset.
Prefer normalize.css: http://necolas.github.io/normalize.css/
"reasons":
https://stackoverflow.com/a/8357635/1518921
this help with "bugs".
You need to use css-reset for paragraph's margins (they causing this)
http://jsfiddle.net/eUVm8/
Simple example of reset
* {
margin: 0;
padding: 0;
}
Chrome add's margins for paragraphs by default.
Related
I'm attempting to have several overlapping divs that are then selectively displayed through scrolling. This can already be accomplished with images using background-attachment: fixed, but I'm looking for a solution that can work with any child element.
A working example of the desired effect with images:
.main {
position: relative;
height: 100vh;
overflow-y: scroll;
}
.scroll-block {
height: 100vh;
width: 100vw;
overflow: hidden;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
<html class="overflow-hidden">
<head>
<link rel="stylesheet" href="/public/tailwind.css">
</head>
<body class="main">
<div class="scroll-block" style="background-image: url(http://placekitten.com/500/500)">
</div>
<div class="scroll-block" style="background-image: url(http://placekitten.com/400/400)">
</div>
<div class="scroll-block" style="background-image: url(http://placekitten.com/300/300)">
</div>
</body>
</html>
I tried simply putting a fixed/absolute div inside the scrollable blocks and setting overflow: hidden, but the overflow property has no effect on fixed/absolute divs. Is there any way to achieve this with CSS?
clip-path can help you here:
body {
position: relative;
height: 100vh;
margin: 0;
overflow-y: scroll;
}
.scroll-block {
height: 100vh;
clip-path: inset(0);
}
.scroll-block > * {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
padding:20px;
}
<body class="main">
<div class="scroll-block">
<div>
<img src="http://placekitten.com/500/300">
<h2>title1</h2>
</div>
</div>
<div class="scroll-block">
<div>
<img src="http://placekitten.com/400/400">
<h2>title 2</h2>
</div>
</div>
<div class="scroll-block">
<div>
<img src="http://placekitten.com/300/300">
<h2>title 2</h2>
</div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display: flex;
overflow: scroll;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
In this simple example I use both padding on the parent div and margin on the child but there is no padding or margin on the far right of the container... How can I solve this problem? Ty
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display:inline-flex;
overflow: auto;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
I guess you want to keep the lightblue padding when the scroll bar appear. You will have to separate the scroll container and the padding container in order to achieve this.
I suggest you change the HTML into this:
*{
box-sizing: border-box;
}
html,body{
margin: 0;
}
.wrapper{
padding: 10px;
background-color: lightblue;
max-width: 500px;
}
.scroll{
overflow-x: scroll; /* or auto */
display: flex;
}
.content{
background-color: yellow;
margin: 5px;
}
<div class="wrapper">
<div class="scroll">
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
</div>
</div>
You can also check out this CodePen
I created space between my bootstrap columns using columns insight columns. However, when I start resizing the window, the distance between the columns gets smaller and disappears eventually, both columns start overlapping ech other. How can I keep the space when resizing using bootstrap? Thanks!!!
http://jsfiddle.net/humotrj0/604/
HTML:
<header id="home">
<div class="container-fluid">
<div class="row center-block home_boxes_row">
<div class="col-sm-4">
<div class="col-xs-12 home_box_left">
<p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p>
</div>
</div>
<div class="col-sm-4">
<div class="col-xs-12 home_box_right"></div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</header>
CSS:
#home {
height: 1100px;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
width: 100%;
.home_boxes_row {
margin-top: 200px;
.home_box_left {
width: 300px;
height: 300px;
background-color: $green;
padding: 5px;
}
.home_box_right {
width: 300px;
height: 300px;
background-color: $blue;
padding: 5px;
}
}
}
Boostrap is built with responsiveness in mind. Thereby, setting the width of the two columns to a pixel width, will in most cases break the layout. The width should rather be left to be handled by bootstrap.
The following snippets should provide you what you seek.
Spacing is achieved by creating a div inside of the columns, and then setting margins. I have added separate classes for this (.spacing_right and .spacing_left).
I have used Bootstrap 4, but it should work with Bootstrap 3 as well.
Note: bootstrap 4 has replaced the col-xs-* with col-*.
#home {
overflow: auto;
height: 1100px;
width: 100%;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
}
.home_boxes_row {
margin-top: 200px;
}
.home_box_left {
background-color: orange;
margin-top: 5px;
}
.home_box_right {
background-color: red;
margin-top: 5px;
}
.spacing_right {
height: 100%;
margin-right: 25px;
background-color: green;
}
.spacing_left {
height: 100%;
margin-left: 25px;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header id="home">
<div class="container-fluid">
<div class="row home_boxes_row">
<div class="col-sm-6 col-6 home_box_left">
<div class="spacing_right">
<p>Test test teasdasdst</p>
</div>
</div>
<div class="col-sm-6 col-6 home_box_right">
<div class="spacing_left">
<p>Test test teasdasdst</p>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
I am trying to make my app responsive, but I have a problem because Footer is not responsive.
I read this link but this didn't worked for me.
<body>
<div id="wrap">
<div id="top">
#include('includes.top')
</div>
<div id="left">
#include('includes.left')
</div>
<div id="content">
#yield('content')
</div>
<div id="right">
</div>
<div id="footer">
#include('includes.footer')
</div>
</div>
</body>
styles.css
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
#footer {
display: table-row;
height: 1px;
}
#content { height: 100%; }
The code in the link you posted (in the comments) does not implement it the way you do ..
Your html should be (according to that article)
<body>
<div id="wrap">
<div id="top">
#include('includes.top')
</div>
<div id="left">
#include('includes.left')
</div>
<div id="content">
#yield('content')
</div>
<div id="right">
</div>
</div>
<div id="footer">
#include('includes.footer')
</div>
</body>
and your css
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
#footer {
display: table-row;
height: 1px;
}
#wrap{ display: table-row; height: 100%; }
And a demo of this code at http://jsfiddle.net/LFeYA/
I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.
I have put all my pages in a "holder"
#holder {
min-height: 100%;
position:relative;
}
And then used the following CSS for my footer
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
The html for my footer
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by Fishplate</li>
<li>Email:exampleemail#gmail.com</li>
</ul>
</div>
</div>
</div>
</div>
I would like to keep the footer fluid.
just add the class navbar-fixed-bottom to your footer.
<div class="footer navbar-fixed-bottom">
Update for Bootstrap 4 -
as mentioned by Sara Tibbetts - class is fixed-bottom
<div class="footer fixed-bottom">
As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807
One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:
html,body{
height: 100%
}
You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.
Most of the above mentioned solution didn't worked for me. However, below given solution works just fine:
<div class="fixed-bottom">...</div>
Source
http://bootstrapfooter.codeplex.com/
This should solve your problem.
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
Here is an example using css3:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
fiddle
Use the bootstrap classes to your advantage. navbar-static-bottom leaves it at the bottom.
<div class="navbar-static-bottom" id="footer"></div>
It could be easily achieved with CSS flex.
Having HTML markup as follows:
<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
Following CSS should be used:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}
Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ
I have found a simple solution for this.
For body tag add
<body class="d-flex flex-column min-vh-100">.
On footer tag add class
mt-auto
The entire code looks as follows
<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>
This is working for bootstrap 4+ and tested till 5 beta 1