I'm new to stackoverflow, and coding in general really, so I apologise in advance if its a really stupid question or I've missed something obvious.
I'm having an issue when I set a fixed position for a div, and combine it with auto width.
The CSS i'm using:
.headwrapper{
height:100px;
width:auto;
margin-left:90px;
margin-right:90px;
position:fixed;
min-width:1020px;
}
When don't include the position:fixed; it all works fine and the width is calculated automatically with 90px margins. However when I include the position:fixed; the auto width doesn't work and the width goes back to the minimum 1020px.
Is there anyway to fix this so the div can change width while fixed in position?
Thanks in advance,
Tom.
Fix your left and right due to you are using position:fixed.
Add this lines to your class:
left:0;
right:0;
Try this code wrapperDiv
<div class="wrapper">
<div class="headwrapper"></div>
</div>
.headwrapper {
height:100px;
width:100%;
background:yellow;
position:absolute;
left:90px;
right:90px;
}
.wrapper {
margin:0 auto;
width:100%;
height:100px;
background:red;
position:fixed;
}
Related
I have a dashboard left, and need that dashboard to be in the same size of the page, everytime it needs to get bigger i want to apply the scroll, at the moment i am doing something like this:
style="overflow-y: scroll; height:450px;"
this is applied to all my section, the thing here is that i set the height a value, i tried with height auto and 100%, but without success, any help with this?
my page is getting bigger because of that dashboard if i cant mantain the page size and give it a scroll it would help a lot
Thanks
you can try to set the min-height:100%
Is something like this appropriate.
body{
padding:0;
margin:0;
}
.a{
display:block;
position:absolute;
top:0;
left:0;
width: 20%;
height:100vw;
overflow:auto;
background-color:purple;
padding:0;
margin:0}
.b{display:block;
width:80%;
background-color:pink;
padding:0;
margin-left:20%;
min-height:100vw}
<div class="a">
</div>
<div class="b">
content
</div>
Use height: 100vh; // viewport height
Check compatibility here
http://www.caniuse.com/#search=vh
And if you want to support old browsers calculate "$(window).height()" and assign it to this div
Hi I'm looking to create a 3 column responsive layout where one of the column (sidebar) is in fixed position.
Both sidebars have a width set in percents and also min & max-width properties in pixels.
And I want that the content in the middle to fill all the space between the two sidebars please.
I beleive I can calculate the width of the sidebars using JS but I'm looking for the best approach hopefully using only CSS please.
It needs to support only IE9 not below.
I'm attaching a drawing for better understanding and will appreciate your help.
Tried a JsFiddle. Please see if it's what are you looking for.
Here the html code:
<header>Fixed Header</header>
<div id='container'>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>
</div>
<aside>Fixed Aside</aside>
and here the css:
body
{
text-align:center;
padding:0;
margin:0;
}
header
{
height:50px;
background:rgb(200,200,0);
position:fixed;
top:0;
left:0;
width:100%;
}
aside
{
height:50px;
background:rgb(200,0,0);
position:fixed;
top:50px;
right:0;
width:20%;
height:700px;
}
#container
{
margin-top:50px;
}
nav
{
width:20%;
float:left;
height:700px;
background:rgb(200,100,100);
}
article
{
padding-right:20%;
}
footer
{
clear:both;
padding-right:20%;
width:80%;
background:gray;
height:50px;
}
You should try Bootstrap classes, they work perfectly
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
I'm sure this has been asked before but I couldn't find it.
Please see http://jsfiddle.net/Bw5j4/1/
I want to make #room div to fit 100% between #top and #commands even if there is no content in it.
And, if the content overlaps (as in current example) I want to fit it within borders of #room with scroll.
I need to keep #commands stuck to the bottom of page. I've tried height, max-height but it didn't work.
This should get you started to lock in the middle section
.room {
background-color:#fff;
border:1px solid #d8d8d8;
overflow:auto;
position:fixed;
top:80px;
bottom:150px;
left:0;
right:0;
}
You'll need to use JavaScript for this, unless the page is guaranteed to always be the same size and can't be resized. If that is the case, you can just explicitly set the height on .room. Otherwise:
function setRoomHeight() {
$(".room").height(
document.documentElement.clientHeight
- $(".top").height()
- $(".commands").height()
- 20);
}
$(setRoomHeight);
$(window).resize(setRoomHeight);
http://jsfiddle.net/gilly3/5TzFm/
(is jQuery ok, or would you prefer a non-jQuery example?)
This is what lazy* developers use tables for. It's very easy to get these fluid layouts like this. Without tables, it's more difficult.
I think perhaps this is something like what you want: http://jsfiddle.net/thomas4g/6u7ry/13/
<div id="wrapper">
<div id="top">Top Stuff</div>
<div id="content">
My Epic Content
</div>
<div id="bottom">Bottom Stuff</div>
</div>
#wrapper
{
height:700px;
background-color:teal;
position:relative;
padding-top:50px;
padding-bottom:50px;
}
#content {
height:700px;
background-color:red;
overflow:auto;
}
#top {
position:absolute;
top:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
#bottom {
position:absolute;
bottom:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
*granted, just because you use tables doesn't mean you're lazy. It's just often true. No offense intended.