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;
}
Related
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
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;
}
Basically I've got a wrapper to which I've added the (relevant) css properties:
height: 100%; float: left; margin: 10px 10px; position: relative;
with a nested div styled as
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
with display: block; taking effect on hover of the parent, targeting the nested div.
The issue is that when it's hovered, the nested div overlaps the parent by about 4-5px. I can completely eliminate this issue by stating a set height on the parent element, but I would rather keep the height at 100% if possible!
JSFiddle:
http://jsfiddle.net/Trblestrife/Y9ztq/1/
EDIT If you know what's wrong but can't be bothered answering give me a hint and I'll do more research. I'm asking here because I've run out of ideas as to where to look
Thanks very much
The issue is probably that images, because they are inline elements, can add trailing whitespace at the bottom. Generally a fix is to give their parent element a line-height of nothing:
.featured-projectwrap{
line-height:0;
}
But this would mean any text nested would not be visible, so compensate by re-promoting the line-height at the caption level:
.caption{
line-height:1;
}
Here's your fiddle with the changes...
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;
}
My header holds a logo image as well as my nav element. I would like my nav to sit at the bottom of the header, but without using absolute positioning or specific top/left pixels because I would like this to be responsive.
Here is my code so far
http://jsfiddle.net/Aiedail/86ZGd/
I had tried adding like a
nav{margin-top: 50%;}
but that used the full page height rather than the containing div height.
Any suggestions or help would be appreciated.
I do think the best way for you to solve this, is to set your parent container to
position: relative;
and in your nav, use
position: absolute;
bottom: 0;
right: 0;
this way, your nav is always in the rightbottom corner of your header, but your header is still relative, so you don't lose the responsiveness.
JSFiddle Here
Basically, I took your logo and the nav and made them both display: inline-block; Removed the float styles.
Then you can use the vertical-align: bottom; for the nav element.
I forked your jsfiddle here http://jsfiddle.net/tQg8d/1/
img{
#extend .layout;
padding: 10px;
width: 30%;
height: auto;
max-width: 300px;
display: inline-block;
}
nav{
position: relative;
margin: 0;
padding: 0;
width: 69%;
height: auto;
border: 5px solid $red;
bottom: 0px;
display: inline-block;
vertical-align: bottom;
I also had to make the width of the nav a little smaller so changed it to 69% so that it shows up to the right of the logo. Might be because of the border.
Hope this is will help, if like to increase header height and and nav width may fine for you
nav { width :100% }
and
header { max-height : 200px; }
I would honestly suggest you follow the position:absolute model that Jamie detailed, but if you want a different way, you can use some negative margins.
For this, though, you need to be able to specify the height of the nav element (use ems, as they work better with responsive designs).
So you would just clear the float after the image--then you can set the top margin to -xxx (whatever the height of the element is).
Here is an example:
http://cdpn.io/bfoyj
Not as pretty as using the absolute positioning, but also works.