I managed to overflow a parent div which is a content wrapper with the following CSS, however now this div hides content behind it. How can I do this right?
jsfiddle: http://jsfiddle.net/YMSvU/
My HTML File
<div class="contentwrapper">
<div class="promotional_outer">
<div class="promotional">
...
</div>
</div>
<div class="footer">
... this footer is overflown by the promotional div ...
</div>
</div>
My CSS File
.contentwrapper {
width: 1150px;
text-align: left;
margin: 0px auto;
}
.promotional_outer{
background-color: #8fcbe5;
position:absolute;
left: 0;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
.promotional {
background-color: #30a3da;
padding: 75px;
color: #fff;
width: 1000px;
margin: 0px auto;
clear: both;
}
I had exactly the same problem on a site I'm working on at the moment.
Turns out the only solution is to do it like this:
<div class="wrapper">
<div class="header">
...
</div>
</div>
<div class="promotion_outer">
<div class="wrapper">
<div class="promotion_inner">
...
</div>
</div>
</div>
I think it would be best to adjust your html to do something like this:
<div class="inner">
<p>Content</p>
</div>
<div class="promo">
<div class="promo--inner">
<p>Content</p>
</div>
<div class="promo--callout">
<p>Promo callout</p>
</div>
</div>
<div class="inner footer">
<p>Footer content</p>
</div>
Check out this fiddle: http://jsfiddle.net/kFShb/2/
You can bypass the element's flow by using z-index.
.footer {
position: relative;
z-index: 10;
}
Fiddle
Remove position: absolute from .promotional_outer.
Absolute positioning removes an element from the normal document flow.
Just delete position: absolute; and left: 0; in your CSS
.promotional_outer{
background-color: #8fcbe5;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
This should solve your problem.
Related
I have a header that I would like to be sticky both during vertical and horizontal scroll. I would like it to be sticky due to the height of the header being dynamic(otherwise I could use fixed if I'm not mistaken).
I have played around with a fiddle with no success :(
https://jsfiddle.net/Viktor/39v0gzjh/22/
CSS:
html, body{
width:100%;
background-color:red;
opacity:0.9;
padding:0;
margin:0;
}
.header{
position:sticky;
top:0;
left:0;
background-color:gray;
height: 100px;
padding:0;
}
.container{
display: flex;
}
.child{
width: 120px;
min-width: 120px;
max-width: 120px;
border: 1px solid #D8D8D8;
background-color: white;
font-weight: bold;
word-wrap: break-word;
}
.bigdiv{
width:1000px;
height:1000px;
}
HTML:
<div class="header">
This is my sticky header
</div>
<div class="container">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
<div class="child">
child3
</div>
<div class="child">
child4
</div>
<div class="child">
child5
</div>
<div class="child">
child6
</div>
<div class="child">
child7
</div>
<div class="child">
child8
</div>
<div class="child">
child9
</div>
<div class="child">
child
</div>
</div>
<div class="bigdiv">
Very long div
</div>
If you are using bootstrap, just add fixed-top class to your header:
<div class="header fixed-top">
This is my sticky header
</div>
Otherwise, with css, header position should be "position:fixed;" and its width "width: 100%;" and then place other page content below like this fiddle:
https://jsfiddle.net/s071hnxL/
A better approach would be set overflow-x: scroll; on your html.
This will solve the issue.
Note that sticky, by specification, will not work inside element with overflow.
This is a known issue
Hence, try using javascript in combination with position:fixed
$(window).scroll(function() {
if( $(this).scrollTop() > 0 ) {
$('.header').addClass('sticky');
} else {
$('.header').removeClass('sticky');
}
});
html,
body {
width: 100%;
background-color: red;
opacity: 0.9;
padding: 0;
margin: 0;
overflow-x: scroll;
}
.header {
width: 100%;
background-color: gray;
height: 100px;
padding: 0;
}
.sticky {
position:fixed;
top:0;
width: 100%;
left:0;
}
.pt-100{
padding-top: 100px;
}
.container {
display: flex;
}
.child {
width: 120px;
min-width: 120px;
max-width: 120px;
border: 1px solid #D8D8D8;
background-color: white;
font-weight: bold;
word-wrap: break-word;
}
.bigdiv {
width: 1000px;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
This is my sticky header
</div>
<div class="container">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
<div class="child">
child3
</div>
<div class="child">
child4
</div>
<div class="child">
child5
</div>
<div class="child">
child6
</div>
<div class="child">
child7
</div>
<div class="child">
child8
</div>
<div class="child">
child9
</div>
<div class="child">
child
</div>
</div>
<div class="bigdiv">
Very long div
</div>
position: sticky is working fine. The reason that you're unable to see it's effect is because of the position applied on div(not the visible text) and the width of the div, which is taking up 100% of its parent's div, which in this case is body. So when you're scrolling horizontally, you're still inside the div, which is taking up the complete width space available.
Now if you want to view the content inside div.header irrespective of the scroll, modify its width as width: 100vw and it should work fine.
You can verify by setting the width of body to 140% and .header to be 100vw
All the best. Cheers!
Hello I am just making a base template to help me make a website a lot better, I have just recently started using bootstrap and have noticed that when I resize my browser (for example to a mobile size) it is overlapping on my footer?
Does anyone know why this is happening?
Here are some images of when I add more text or resize:
Like I say I am fairly new to bootstrap and am most likely doing something really stupid which is easy to fix :)
Here is my css:
html, body { height:100% }
nav {
margin: 0;
padding: 0;
}
div {
display: block;
}
.col-centered {
float: none;
margin: 0 auto;
}
.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.container {
width: 100%;
margin: 0;
padding: 0;
height:100%;
background:red;
}
.content {
padding: 5rem 1.5rem;
text-align: left;
height:90%;
width:75%;
margin:0 auto;
background: green;
}
footer {
background: grey;
height:10%;
width:75%;
margin:0 auto;
}
Here is my main HTML:
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>
EDIT: I forgot to include the footer, if you think that I need to add this for you then please let me know.
Thank you very much for even looking at this post!
EDIT 2:
Here is the code for my footer:
<footer>
<div class="row">
<div class="col-md-auto">
<p class="float-right">Back to top</p>
<p>© 2017 Company, Inc. · Privacy · Terms</p>
</div>
</div>
</footer>
Here is the link to the website:
http://81.131.193.35/
Remove the height of .content
.content {
padding: 5rem 1.5rem;
text-align: left;
width: 75%;
margin: 0 auto;
background: green;
}
and also remove the height of .container
.container {
width: 100%;
margin: 0;
padding: 0;
background: red;
}
I would wrap the footer.php in a pair of divs and apply a row and col-md-auto class to it. It looks like the footer is maybe styled with an absolute or even a static display. This is making the footer not play along with the other divs
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
<?php include "footer.php" ?>
</div>
</div>
</div>
I have a specific layout that is causing me HUGE headaches. Here is an image:
My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.
Current Markup
<body>
<div id="container" class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<div class="panel-logo">
"Logo here text"
</div>
</div>
</div>
</div>
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<nav class="panel">
</nav>
</div>
</div>
</div>
</div>
<div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
<div class="inner-panel">
<header class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 header-logo">
LOGO Would go here, of course.
</div>
<div class="pure-u-md-3-4 pure-u-1 header-title">
<h1>Consumers Energy</h1>
<h1><strong>CARE 3.0 Program</strong></h1>
<h1>Enrollment Application</h1>
</div>
</header>
<div id="content">
"Enrollment application text..."
</div>
</div>
</div>
</div>
</body>
Current CSS
.panel {
box-sizing: border-box;
height: 100%;
display: table-cell;
}
.panel.p {
padding: 3px;
}
.panel .panel-row {
display: table-row;
}
.panel .inner-panel {
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: red;
}
Here is an alternative fiddle to play with: http://jsfiddle.net/3c3tqo3e/ but I really don't want to use a table...
Q How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.
NOTE I would really prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer just css/html. Thanks!
I have created a demo for you, but it will work on all modern browsers only. and you might have to read flexbox and its demos in details to make your work more meaningful in terms of performance and maintenance.
Also read on calc() here
HTML:
<main>
<aside>
<div class="logo">Logo</div>
<div class="aside-content">Other Content</div>
</aside>
<section>Section</section>
</main>
CSS:
html, body{ height: 100%; }
main{
height: 100%; background: teal; padding: 2em; box-sizing: border-box;
display: flex; flex-direction: row;
}
aside{
height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
background: #fff; height: 140px;
}
aside .aside-content{
background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}
main section{
height: inherit; background: #fff; flex-grow: 2;
}
Demo Fiddle: http://jsfiddle.net/vpqqyo9L/1/
Edit:
Here's one for IE9: http://jsfiddle.net/vpqqyo9L/3/
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
If any of the nested divs below have a length longer then an adjacent div, the divs don't wrap to the next line "properly".
Without dividing each row in it's own div, is there a way to force div #5 (in the example below) to fall underneath div #1 even if div #1 is taller than the rest?
<style type="text/css">
.video-item {
margin: 10px 29px 20px 0px;
width: 208px;
float: left;
overflow: hidden;
}
</style>
<div style="width: 948px;">
<div class="video-item">1<br>This is what happens when Description is too long... </div>
<div class="video-item">2<br>Description</div>
<div class="video-item">3<br>Description</div>
<div class="video-item">4<br>Description</div>
<div class="video-item">5<br>Description</div>
<div class="video-item">6<br>Description</div>
<div class="video-item">7<br>Description</div>
<div class="video-item">8<br>Description</div>
<div class="video-item">9<br>Description</div>
<div class="video-item">10<br>Description</div>
</div>
Example with even Description:
Example with uneven Description:
You need to set the clear CSS style on the div, to bring it back into normal flow:
<style type="text/css">
.video-item {
margin: 10px 29px 20px 0px;
width: 208px;
float: left;
overflow: hidden;
}
.clear {
clear: left;
}
</style>
<div style="width: 948px;">
<div class="video-item">1<br>This is what happens when Description is too long... </div>
<div class="video-item">2<br>Description</div>
<div class="video-item">3<br>Description</div>
<div class="video-item">4<br>Description</div>
<div class="video-item clear">5<br>Description</div>
<div class="video-item">6<br>Description</div>
<div class="video-item">7<br>Description</div>
<div class="video-item">8<br>Description</div>
<div class="video-item clear">9<br>Description</div>
<div class="video-item">10<br>Description</div>
</div>
With CSS3, you could use :nth-child to achieve this more dynamically:
.video-item:nth-child(4n+1) {
clear: left;
}
Another solution would be to force the height of your elements like this: (but #Pete solution is more elegant)
.video-item {
margin: 10px 29px 20px 0px;
width: 208px;
float: left;
overflow: hidden;
height: 70px;
}
jsFiddle here