I am trying to write clean code without wrappers.
So let me give an example
<head>
</head>
<body>
<header>Header and nav section (Leaving nav in header is good way?)</header>
<article>Main content. This part should stretch</article>
<aside>Not so important but desktop view still have place for it</aside>
<footer>Just footer but sticky</footer>
</body>
The first try was to give footer a
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
and for body
margin: 0 0 100px;
after this just set min-height: 100%; to html and it works fine.
Now I'm trying to pin aside just at the top of the footer and I can't because I need to stretch the article to cover the rest of the page.
And finally the question:
How can you achieve this if the size of the aside changes depending on the subsite, and I don't want to use wrappers because they are kind of ugly?
Additionally is it possible to use html5/css3 magic (I found advice to use flex but without example...) and still have compatibility with ie8. Usage of XP is still huge in my country sadly.
I spent a couple of days on SO and I found many examples using wrap for the whole page that includes footer or wrap for header and content that leaves footer as another box, but that's not what I want.
Update
I partially found the solution.
Link to snippet
But now I have another strange problem.
Here is example my page
I have an empty space below the footer and according to dev tool in chrome and IE this part belongs nowhere.
How is this possible?
1.footer should be position fixed
2.for body: dont use margin, use position:fixed; bottom:100px;
3.min-height:100%. Well, this is kinda nonsense. Simply use height:100%;
Related
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I have converted a Html Page to Responsive page. I was checking my page in iphone then I found that there is some white margin in right side of page.
I have used below code in my code, still I am not able to remove this issue
body{
margin:0%;
padding:0%;
overflow-x:hidden;
}
The best solution is of course using Bootstrap
Otherwise your css should be something like that:
html, body {
margin: 0;
position: absolute;
top: 0;
let: 0;
}
UPDATE: imho, usually is not a good idea to remove manually the overflow
You have some content that is overflowing the container, you should identify the source of this by removing sections of the page until it fits correctly. The easiest way of doing this is to open the dev-tools and start selecting main sections of the site and removing them.
You should be able to narrow down the cause of the overflow from here.
Instead of masking the problem (which overflow-x: hidden will), you should try and resolve it. You'll probably find that the fix will be simple.
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}
I know this has been asked here countless amount of times, I've looked around trying to implement the given solutions.
#footer
{
min-width: 900px;
text-align: center;
position: absolute;
}
Its the very last div on the page. I'm testing it out here blog.0arrays.com (a default theme for tumblr), but the footer just won't stick to the bottom. It appears in the middle of the page. I can provide the full code if anyone wants to look at it, as it's too long to paste here.
Thanks in advance.
EDIT:
I don't really care if its sticky or not (i.e right at the bottom), I just don't want it to appear in the middle of my text, as you can see on the site.
EDIT 2:
I've posted the full code here (via pastie), arrrr.... I bet the answer is really simple, this is doing my head in. For some reason, your suggestions are not working.
No one...?
In addition to the other attributes you've set for #footer, you should also add bottom:0 to set it's position to be the bottom of the page.
EDIT: You will also need position:fixed instead of absolute
If you don't care about keeping the footer at the bottom you just have to remove position: absolute; from #posts.
If you want to make the footer stick to the bottom of page, use fixed position.
#footer {
position: fixed;
bottom: 0px;
}
I just need to use
`display: table-row;'