UPDATE: The problem has been solved using the code provided by Pradeep, specifically the "clearfix" code. I asked this question in search of a way of keeping my wrapper <div> behind all of my content, i.e. extend its height to the full height of all its children, and considered using a moving <div> where in reality my problem was fully discussed in "What is a clearfix?" and in CSS clearfix demystified.
Essentialy my container <div> had floating elements within that were expanding past the bottom of my wrapper. I wanted the wrapper to be behind all of my content so that users could read the text that was on top. Applying this new CSS class clearfix to my wrapper <div> the problem was solved but a new one created. I lost the ability to center the <div> on the page, which I did not state in my original question below. The solution to being able to center it again without losing the "clearfix" solution was to use a parent <div> that has margin-left: auto and margin-right: auto set. See CSS clearfix how to over come the inability to center an element using it
The Origional Question:
http://jsfiddle.net/L7TKx/
I want my <div> to move with the page as the user scrolls down the page.
I have seen answers on this site as well as others stating that you need to add the postion:fixed property but when I do this, my div which was centered on the page is now left aligned and the scroll bar disappears, so you cannot view the rest of the content. I'm looking for a fix that keeps the scroll bar and as the user scrolls, the <div> follows.
See http://www.rustdome.hfbsite.com/ I want that off white background to follow behind the text as the user scrolls.
I have the following and have experimented with position:fixed but that disables the scroll bar.
#wrapper {
min-width: 740px;
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: hsla(30,100%,97%,0.69);
height: 100%;
}
html {
min-height: 100%;
position: relative;
}
body {
height: 100%;
}
You can try below code:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
Above css add in your css file..and Add "clearfix" class in your main div(wrapper).
Good luck...
Instead of using position:fixed you'll probably want to use background-attachment:fixed. This will just make the background fixed while the text keeps being scrollable.
Regarding Pradeep's code you could also have used a simpler approach. You just needed to add this rule to your CSS:
#wrapper::after {
content: "";
display: block;
clear: both;
height: 0;
}
You will probably want it to be a separate div entirely from the one that houses your content. I am assuming the #wrapper is the off-white thing you want to move around, and I'd try something like bellow.
HTML:
<html>
<body>
<div id="wrapper"></div>
<div id="content">
Your Content
</div>
</body></html>
CSS:
#wrapper {
min-width: 740px;
max-width: 1000px;
width: 100%;
position: fixed;
left: 50%;
margin-left: 500;
background-color: hsla(30,100%,97%,0.69);
height: 100%;
z-index: -1;
}
#background {
z-index:-2;
}
Related
I have an img that I want to not cross over into the below section. It only crosses over when i drag the viewport out and makes the window bigger.
I would like the restrict the image movement.
That probably doesn't explain my issue very well so I have attached two images to explain:
Smaller window:
Larger window:
The first image (smaller window) is what I want the image to look like, however as the larger window shows once the window becomes bigger it moves down as the page is responsive and crosses over into the references section. I would like to be able to stop it from doing this?
General images CSS:
img {
display: block;
margin: auto;
height: auto;
margin: auto;
max-width: 80%;
padding-bottom: 1em;
}
.bassportrait CSS:
.bassport {
float: right;
overflow: hidden;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
height: 20%;
width: 20%;
}
Hope that makes sense and I have shown you the relevant code - I'm a beginner!
Since your .bassport is floated right, that float will need to be cleared on the element below to prevent the overlap. There are lots of ways to do this, but the most common is to add a clearfix to its parent element.
.parent-element:after {
content: "";
display: table;
clear: both;
}
Notional markup
<div class="parent-element"><!-- Clearfix applies to this element -->
<p>Ulrika's work...</p>
<p>Bass died...</p>
<img class="bassport" src="..."><!-- Floated element that needs to be cleared -->
</div>
Alternatively, if you're using a framework that has a clearfix utility class, you could just add that class to the parent div and it would have the same effect.
Reference: https://css-tricks.com/snippets/css/clear-fix/
I'm trying to create a sticky searchbox so that it's always at the top of the page when you scroll.
However, I'd like it to take up 100% of the container, not the window.
Here's an HTML markup example:
<div class="container">
<div class="searchbox">
Search Box
</div>
</div>
and the CSS:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
overflow-x: hidden;
}
.searchbox {
background-color: red;
position: fixed;
width: 100%;
}
Here's a fiddle with what's currently happening: http://jsfiddle.net/09ynr879/
I'd like it to be indented on the right side by the same amount it already is on the left. Any way to fix this? I'd like to be evenly in the center with the same margins on the left and on the right.
Thanks in advance.
Here's a screenshot of the actual site where we're having the problem:
http://s2.postimg.org/dlj47yqix/Screen_Shot_2014_10_06_at_11_08_24_AM.png
Notice how the searchbox starts at the right place but ends at the end of the page, not at the end of the container. We're using Bootstrap 3.2
Elements that are position: fixed have no relative parents. They are always going to be fixed relative to the page.
If it's no problem to you, remove position: fixed; from .searchbox and add it to .container
It's not possible, the fixed position get's out of the flow.
But an alternative solution:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
position: fixed;
}
.searchbox {
background-color: red;
width: 100%;
}
http://jsfiddle.net/09ynr879/4/
Position fixed is always of the entire window. If you want to do it for just a container, you need JavaScript.
I think what you are looking for is either:
StickyMojo or jQuery Stickem
Bootstrap has a similar thing, called Affix.
I've read almost every article on this forum about divs and growing height with its content. I don't understand what I'm doing wrong and can't figure it out. Probably it's an easy thing, but I just don't see it any more.
I tried the following CSS but can't get it working:
clear:both;
float: left;
overflow: auto;
overflow: hidden;
none of this all has the desired output.
I posted my code on jsfiddle: http://jsfiddle.net/eAVy3/
You will see that my footer (in red) is at the top in stead of on the bottom. The only way tho get something that looks like it is to give the id page_container a height. But that will be a fixed height and doesn't grow with the content. What to do to get this right?
Working fiddle here: http://jsfiddle.net/eAVy3/3/
Absolute positioning (absolute positioning takes the div out of the normal flow of the document, which means it can't effect other things on the page like the footer)..
You need to float your divs instead:
#kolom_links {
float: left;
margin-left: 100px;
}
#kolom_rechts {
float: left;
margin-left: 70px;
}
Now because both divs inside #page_container are floating, you need use clearfix css:
Add class clearfix: <div id="page_container" class="clearfix">
Then add this clearfix to your CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You should reconsider making the position absolute;
making the position absolute is puttinf the element out of flow so they don't occupy any height or width of the document.
change to posiion : relative ; and you will start to figure it out
Update 2
try this :
#kolom_links {
width: 400px;
height: auto;
padding-left: 10px;
}
It's a simple CSS issue: a container doesn't wrap around floated contents by default. The easiest way to make it do so it with,
.div_container {
overflow: hidden;
}
I am working on a the html/css of the landing page of a website/application and I don't want to make too many changes. The templates are rendered using Jinja2 and the homepage extends from a page_template.html. There are many page templates that extend the page_template.html so I would like to fiddle as little as possible with it. The designer would like to have the background-color of a div (or two) on the homepage extend out over the entire width of the browser no matter the browser/screen resolution. The page template has a page-container id wrapping around the entire content like so.
#page-container {
background-position: 0 85px;
max-width: 1200px;
position: relative;
margin: 0 auto;
}
If I want to extend a div to go outside this width of 1200px I decided to try something like this:
.overflow {
background-color: #fff;
margin-right: -200px;
margin-left: -200px;
padding-right: 200px;
padding-left: 200px;
}
And do something like this:
<div id="page-container">
<div class="overflow">
Content
</div>
</div>
And it seems to work. And it works well enough for this webapp ( I think ). However it breaks the responsiveness of the page in that the divs which have this .overflow class do not resize when the browser is made smaller. Is their a better way to do this? And is their a way to do this without affecting the responsiveness?
This can be done with the :before and :after pseudo-elements.
Assuming the markup you used in your question, this CSS should do the trick:
.overflow { position: relative; }
.overflow:before,
.overflow:after {
display: block;
content: " ";
position: absolute;
width: 9999px;
top: 0;
bottom: 0;
background: #c0ffee;
}
.overflow:before { left: 100%; }
.overflow:after { right: 100%; }
You may also want to consider adding overflow-x: hidden to your body and html elements to prevent horisontal scroll bars:
body, html { overflow-x: hidden; }
Browser support for this is essentially IE8+ so you can expect it to work on mostly every browser.
So I'm using a responsive framework called skeleton which works great, however, with a section such as the header and footer, I want the background to span 100% width of the page which is now a popular design choice.
Does anyone have a workaround for this just to make a div pop outside of the container?
Assuming the container has the default position property (static), you could give the header a position:absolute. Then set top:0, left:0 and right:0.
Make sure to set the top margin or padding of the container to the same height defined for the header.
This will not work if the container has been given a position value of relative, absolute, or fixed.
skeleton.css line 301:
.container:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
This declaration will make sure that any content displayed after the container is not visible, therefore not disrupting the grid in any way on the page.
The container is also set to 960px wide and position:relative (skeleton.css line 24)which means that you can't create anything inside the container div that can be set to page width without using javascript ( + jquery for simplicity ). On such a key design feature on most sites it wouldnt be such a great idea to rely on this.
I would try removing the :after declaration on .container and then add a new <div> underneath with width:100%; height:128px; and see how it affects your grid as a starting point.
Try this:
body {
font-family: 'Open Sans',sans-serif;
font-size: 0.875em;
overflow-x: hidden;
}
.header-container {
background-color: #CCCCCC;
float: left;
height: 100px;
margin-left: -400px;
overflow: hidden;
padding-right: 800px;
width: 100%;
}
#header {
margin-left: 409px;
margin-top: 10px;
text-align: center;
}