I've wasted numerous hours on this and cannot seem to get it to work, I've read many answers on here already but none seem to be helping.
I have a header DIV then then two DIV's underneath floated Left of eachother. the menu on the left and content on the right. the right i have set Overflow: hidden so it sits next to the menu div on left and against broswer on right.
Now i want the menu Div on the left to fill the height downwards to match the content div on the right but i cannot for the life of me seem to get the settings right.
The link to website is here http://www.mxbempire.com
Anyone shed some light on this?
im not 100% sure what you are asking.
however using static attributes on your header and menu would give it a 'wiki-feel'
adding this to your CSS will give an example
.menu{position:fixed; top:80px}
.headercontainer{position:fixed; top: 20px;}
.user{padding-left: 200px; float:none;}
.card{margin: 90px 25px 0 250px;}
use this in your css
.headercontainer {
width: 100%;
height: 60px;
margin: 0 auto;
background-color: #2C2E33;
position: fixed;
top: 0;
.two {
float: left;
width: 220px;
position: fixed;
top: 60px;
}
You can try adding this styles to your css:
.headercontainer {
position: fixed;
z-index: 10;
}
.menu {
height: 100vh;
margin-top: 60px;
position: fixed;
}
.three {
margin-left: 220px;
padding-top: 60px;
}
I'm not sure how it will behave on older browsers, soo just try it.
Related
My requirement is a page with a fixed position header and full border around the page.
Setting this up is simple, but I have a problem with the fixed position header overlapping the page border.
Visually, this shows the problem:
You can see the fixed position header overlaps the border on the right. My aim is to prevent this from happening.
This the relevant block of code I believe - testing this by setting position to relative, for example, will stop the header overlapping the right border, but I need the header to be fixed.
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: 10;
}
Here is a pen to demonstrate the issue in full:
http://codepen.io/juxprose/pen/vERQQr
Any ideas? I've tried some z-index experiments as that appears to be the issue, but no luck. The 100% width also seems related to the issue. Any pointers much appreciated, thanks.
Try changing your css to this:
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: -1;
}
.site-main {
position: relative;
margin: 100px 25px;
z-index:-2;
}
It's working on CodePen - hope it works for you too.
http://codepen.io/juxprose/pen/vERQQr
Please add left and right 10px then it will solve
replace width: 100% with right: 10px and left: 10px
.site-header {
min-height: 100px;
background: blue;
position: fixed;
right: 10px;
left: 10px;
z-index: 10;
}
Example: http://codepen.io/anon/pen/yyKGyJ
Result
I might be doing something wrong, but I want to cut off my picture on the right side.
#background
{
width: 100%;
height: 100%;
position: fixed;
right: 20em;
left: 20em;
top: 0em;
z-index: -1;
margin-right: 20em;
}
Background is a picture I want to cut off at the right side, 20em in so I tried right margin without luck.
But with the fixed position I can only use left or right and top. Anyone got a smart fix for this?
Image of website as it is
EDIT: So right now the side is cut off on the left side. I want it to be cutted off on the right side too.
I have styled margins to be 20em from left and 20 em from the right. This white transparent picture should only cover that area.
I also need me reputation to post a picture, sadly.
make a div with the good width, and then place the image in it, and apply css to the div:
div {
overflow: hidden;
}
try to comment width and right params. It may help, but I am not sure that this you want
#background {
/* widht: 100% */
height: 100%;
position: fixed;
/* right: 20em; */
left: 20em;
top: 0em;
z-index: -1;
margin-right: 20em;
}
http://cssdeck.com/labs/j7zbc2zs
Fiddle
http://jsfiddle.net/eqE9J/135/
<div id="wrapper">
<img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" alt=""/>
</div>
CSS
div{
max-width:750px;
}
img{
width:80%;
padding:1%;
border:1px solid red;
position: fixed;
right: 20em;
top: 0;
}
I am designing a web page with a little toggle menu icon for navigation purposes.
My problem is that whenever the window is resized under the width of the main container (.story, which only has max-width defined), the menu icon overlaps the content.
Instead, I would like the icon to block on the right border of my container.
currently, the code for positionning my nav icon:
nav {
position: fixed;
top: 100px;
right: 100px;
}
and the container:
.story {
padding-top: 50px;
margin: 0 auto;
height: 1000px;
max-width: 1000px;
text-align: justify;
}
Here is a jsfiddle to illustrate my problem.
and here is an example of a website where they made it work
Thanks for taking a look at it.
Per my understanding, position:fixed will overlap data.
A simple way can be reducing width of story div.
nav css
nav { position: fixed; top: 20px; right: 20px; }
story css
.story {
padding: 50px 0;
margin: 0 auto;
height: 1000px;
max-width: 400px;
text-align: justify;}
I am trying to build a page that has a header and a left-sidebar, and has an iframe in the content area. I wan't the Iframe area to fill the whole content area(the whitespace), but cant seem to get it to work. I am looking for the IFrame to fit perfectly, meaning that it begins where the header and left menu edges end. I can only seem to get it to span from one side of the page to the other, or get it in the middle of the whitespace.
Can anyone help?
Here is the JsFiddle: http://jsfiddle.net/P9CH9/2/
When removing the <div id="iframe-content"> it will span the iframe from one side of the page to the other.
I was able to achieve what I wanted by manually adding the margin top and left to the iframe container and also set the Top, left, right, bottom to 0 as such:
.abs-frame-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-left: 250px;
margin-top: 55px;
}
Here is the latest JFiddle, I added black to show where the iframe is since JsFiddle doesn't seem to allow Iframes. http://jsfiddle.net/P9CH9/4/
You set width 100% for wrappend and fixed the menu, so the wrapper does not consider at all the menu and gets the full width of the screen
Main Modification :
.menu {
background: none repeat scroll 0 0 #202020;
float: left;
margin-top: 55px;
position: fixed;
width: 25%;
height: 100%;
z-index: 2147483647;
}
.wrapper {
float: left;
margin-top: 55px;
width: 75%;
margin-left: 25%;
}
And this solution is responsive.
See : http://jsfiddle.net/joseapl/P9CH9/5/
How do I push a footer to the bottom of my page? Here is an example of what I currently have: hansmoolman.com
As you can see the footer is pushed underneath my 2 left and right containers. How can I fix this. I have used relative positioning for some elements as the red banner had to be pushed over the header bar and given a + z-index. I found some solutions online to stick the footer to the bottom but this does not solve my problem as the footer still appears aver my 2 columns if the content in them is not big enough to fill the whole page.
So what I want is for the footer to always follow BELOW all the rest of the content (the sticking to the bottom I can solve later).
There is a bit of CSS code so havent added it here, but can add it if needed
Your CSS Looks Like:
#footer {
background-color: #FFFEF0;
border: 1px solid #000000;
clear: both;
height: auto;
margin-top: -100px; /* >> Remove This*/
overflow: hidden;
position: relative;
top: -200px; /* >> Remove This*/
width: 100%;
z-index: -1;
}
Remove following css rules from #footer
top: -200px;
margin-top: -100px;
Try clear:both for your footer container tag, considering it has display:block; set
To align the contents right. You have to make some changes in your css.
First of all remove :
top: -200px;
width: 100%;
z-index: -1;
From your #footer .
And change your #mainContentContainer to :
#mainContentContainer
{
min-height: 400px;
overflow: auto;
position: relative;
width: 100%;
}