Here is the example.
http://www.poste-ton-look.com/OneMuze/index.html
I try to keep the header as the footer display in this example. Full width with a fixed top position.
The problem is that i making this website responsive with horizontal navigation : if i horizontaly scroll, the header ends. If i try to display the header in a fixed/absolute top position it will kill it.
The goal is to keep the header responsive adjustments, in a full width top-center position.
Thank you for your help,
Sorry for my english.
Seb.
This is how I would proceed to get you aim :
FIDDLE
HTML:
<header></header>
<section>
<span>bla</span>
<span>bli</span>
<span>blu</span>
...
</section>
<footer></footer>
CSS:
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
header,footer{
position:fixed;
left:0;
width:100%;
height:50px
}
header{
top:0;
background:red;
}
section{
height:100%;
width:4000px;
background:green;
}
span{
position:relative;
top:100px;
margin:100px;
}
footer{
bottom:0;
background:yellow;
}
Related
How to make a cross browser solution where an element is vertical aligned?
http://jsfiddle.net/e2yuqtdt/3/
This works in both Firefox and Chrome, but not in IE11
<div class="page_login">
<div>vertical-align:center; text-align:center</div>
</div>
html, body {
height:100%;
}
.page_login {
display:flex;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
}
update
When the centered element is higher than the viewport height the background is only 100% and not 100% scroll height
http://jsfiddle.net/e2yuqtdt/8/
html, body {
min-height:100%;
height:100%;
}
.page_login {
display:flex;
min-height:100%;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
How to make a cross browser solution where an element is vertical
aligned?
Take a look at this fiddle: http://jsfiddle.net/5ry8vqkL/
The technique applied there is using the "display: table". Here is an article for an in-depth view of the approach http://css-tricks.com/centering-in-the-unknown/
Supported browsers can be seen here: http://caniuse.com/#search=table-cell
HTML:
<div class="container">
<div id="page-login">
<div class="panel">Some content</div>
</div>
</div>
CSS:
html, body {
min-height:100%;
height:100%;
}
.container {
display: table;
height:100%;
width:100%;
background:#303030;
}
#page-login {
display: table-cell;
vertical-align: middle
}
.panel {
height: 100px;
background-color: #fff;
}
You need to add a height to the div. As you have only specified a minimum height, IE automatically expands it to the max possible. So add a height, like this:
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
height:200px;
}
http://jsfiddle.net/e2yuqtdt/6/
As this is a flex box, and therefore meant to flex, a good idea could be to make the height a percentage. So the div height would be - for example - 50% of the page height, unless the page was less than 200px high - then it would be 100px high.
Update: Unfortunatly it is not possible to make the div fill the whole page with only CSS. However it seems it is possible with Javascript, see here Make a div fill the height of the remaining screen space
Actually - have achived it using tables divs
http://jsfiddle.net/e2yuqtdt/14/
<div>
<div id="div1">
<div id="div2">vertical-align:center; text-align:center</div>
</div>
</div>
#div1 {
display:flex;
height:100%;
width:100%;
background:#303030;
}
#div2 {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
I know this update is coming after the one by elad.chen - but had already done this and posted it in the comment below - just hadn't got round to updating the question.
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I was trying to make a header fill the screen using this CSS:
position:relative;
margin:0;
padding:0;
width:100%;
height:100%;
min-height:100%;
background-image:{image:topbar};
z-index:1;
But when scrolling, there's more of the image to be shown and I have no idea what's wrong, please help?
You may want to add background-repeat:no-repeat;
I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.
<div class="content-wraper">
<div class="side-nav"></div>
</div>
<div class="footer"></div>
.content-wraper {
background-color:blue;
min-height:100px;
position:relative;
width:500px;
}
.side-nav {
background-color:red;
height:3000px;
position:absolute;
top:0px;
left:0px;
width:200px;
}
.footer {
background-color:black;
position:absolute;
bottom:0px;
width:200px;
height:50px;
}
Change position: absolute; in .footer to position: fixed;
Updated fiddle
UPDATE
To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:
$(".footer").css("top", $(".side-nav").height());
Example Fiddle
absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.
Try different approach:
sticky footer
I hope this is not a repost! I have looked everywhere and so I am sorry if it is.
I have a header div that is position:fixed and it has some image links and a login div. Since the position:fixed is relative to the window, whenever I resize the windows to test liquidity, the content in the header div gets jammed and starts to drop down the page.
Is there anyway to get a horizontal scroll bar to appear and remove the space? I have min-width set on the body and the header div but no luck. I am not coding for IE at the moment and only using latest Chrome and Firefox for testing now.
Thank you for any help!
CSS:
body {
min-width:1000px;
padding-top:0;
padding-bottom:0;
margin:0;
background-color:#022F00;
}
.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
margin-top:160px;
}
.header {
width:inherit;
padding:5px;
position:fixed;
left:20px;
right:20px;
top:15px;;
min-width:850px;
}
.login {
float:right;
padding:0;
margin:0;
border:0;
position:relative;
}
img {
margin:0;
border:0;
padding:0;
}
a {
margin:0;
border:0;
padding:0;
}
HTML:
<body>
<div class="container">
<div class="header" id="titlebar"><img src="title.jpg" /><img src="newaccount.jpg"><img src="newarticle.jpg">
<div class="login" id="logindiv">content</div>
</div>
</div>
</body>
i found this solution, it may help you
Set a min-width to your container:
#container { min-width: 1000px;}
you may want to check this link
Two divs floating left and right: How can I keep them on the same level when a page resizes?
it was an answer to
"Two divs floating left and right: How can I keep them on the same level when a page resizes? "follow this link