i have 2 divs and a dl:
<div id="wrap">
<div id="header">
<dl id="site_nav_global_primary">
and this is my style:
#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}
#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}
#site_nav_global_primary {
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}
Now i want to change site_nav_global_primary to have a full screen width without
changing the wrap and the header. but when i try:
#site_nav_global_primary {
position: absolute;
width:100%;
top:0px;
left:0px;
}
The navigation gets the 100% of the wrapper which is max 1003px width. i want it to
stretch to the maximum without changing the wrap and header divs.
Is this possible?
You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)
#site_nav_global_primary {
position: absolute;
top: 0;
left: 0;
right: 0;
}
Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header
You need to add position:relative to #wrap element.
When you add this, all child elements will be positioned in this element, not browser window.
I have similar situation. In my case, it doesn't have a parent with position:relative. Just paste my solution here for those that might need.
position: fixed;
left: 0;
right: 0;
Adding the following CSS to parent div worked for me
position: relative;
max-width: 100%
Make #site_nav_global_primary positioned as fixed and set width to 100 % and desired height.
This one also works. With this method, there is no need to interfere with positioning of parent divs. I have checked
#site_nav_global_primary {
position: absolute;
width: 100vw;
}
I don't know if this what you want but try to remove overflow: hidden from #wrap
Related
I have here plunkr which shows the issue I am facing.Basically I am trying to do create a scroll bar for middle div element, have all three div's fit inside the page.
This approach works fine if I use it as html page, but when I use it inside ui-view, the content inside '#content-scroll' does not show up, if I remove position:absolute from CSS, it displays, but doesn't display scroll bars.
Basically I just want to know how can I have the content display?
How can this be resolved?
http://plnkr.co/edit/ZkGafJ8cS6VG6lfS9SJY?p=preview
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;}
Here is the example of same page that works inside html
http://jsfiddle.net/sA5fD/8/
absolute positioned elements behave according to it's parents.
If we give bottom:0; top:0; to an absolutely positioned element it will select the bottom and top of it's parent. So:
Your previous example it is working since the parent have 100% height.
Inside ui-view it will not work it doesn't have an explicit height to it.
There's more than one solution to this problem. For example I applied a min-height to the parent #content and changed it's display property. I suppose you have #content only used for this scrollbar content. Othewise you have to apply special class to the element.
#content {
display:block;
height:100%;
background:#8f8;
min-height: 90vh;
}
Here's a plunker: http://plnkr.co/edit/5vl0AN3WwtUJmDiNtNdL?p=preview
I guess This would solve your problem.
html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
}
#main {
display:table;
height:100%;
width:100%;
}
#header, #footer {
display:table-row;
background:#88f;
left:0;
right:0;
}
#content {
display:table-cell;
height:100vh;
background:#8f8;
}
#content-scroll-wrap {
position: relative;
height: 100%;
}
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
I have a parent-child div relationship with the child intended as a horizontal scrollbar attached to the bottom edge of the parent.
The parent is a vertically growable/shrinkable container for rectangular strips that are added/deleted by the user interactively.
How do I force the scrollbar to adhere to the parent's bottom edge?
Here is my current css situation:
.parent-div {
position: absolute;
left: 0;
top:80px;
right: 0;
}
.horizontal-scrollbar-div {
position: absolute;
top: 0;
left: 0;
bottom:-50px;
height:50px;
width: 100%;
z-index: 500;
}
This is not working correctly. At runtime strips get added the scrollbar remains at the top edge of the parent (initially there are no horizontal strips so the parent has 0 height).
What are the css changes I need to make here?
Thanks,
Doug
Marc's answer is right, but in order for it to work you need to add "position: relative;" on the ".parent-div". Otherwise the ".horizontal-scrollbar-div" would position itself according to the body element instead of ".parent-div".
Here is how I would do it. You can change the height of parent and the scrollbar will always stay at bottom of the parent-div.
.parent-div {
position: relative;
height:200px;
background-color:#aaa;
}
.horizontal-scrollbar-div {
position: absolute;
bottom: 0;
height:50px;
width: 100%;
background-color:yellow;
}
<div class="parent-div">
<div class="horizontal-scrollbar-div"></div>
</div>
I would try the following:
.horizontal-scrollbar-div {
position: absolute;
left: 0;
bottom: 0;
height:50px;
width: 100%;
z-index: 500;
}
You want the bottom edge of .horizontal-scrollbar-div to be pinned to the bottom edge
of the parent container.
Note: You may not need the z-index property.
Also: You may need a minimum height to .parent-div.
Hoping there's a simple solution to this. Basically what I'm trying to do is place a div (#hello) in the vertical center of the browser and use fixed positioning so it doesn't budge on scroll. Here's my HTML so far:
<section id="home">
<div id="home-container">
<div id="hello"></div>
</div>
</section>
And the CSS:
#home {
display: table;
overflow: hidden;
margin: 0px auto;
}
*:first-child+html #home {
position: relative;
}
* html #home {
position: relative;
}
#home-container {
display: table-cell;
vertical-align: middle;
}
*:first-child+html #home-container {
position: absolute;
top: 50%;
}
* html #home-container {
position: absolute;top:50%;
}
*:first-child+html #hello {
position: relative;
top: -50%;
}
* html #hello {
position: relative;
top: -50%;
}
#home {
height: 100%;
}
Right now the div is vertically centered within the "home" section but moves on scroll. I've tried changing the #home and #home-container to fixed positioning but it doesn't work.
I've searched around quite a bit and apologize if a similar thread already exists. Hope someone can point me in the right direction. Thanks in advance!
The concept for vertically aligning a div to the vertical center with a fixed position would be to add the position:fixed property (specifying the offsets), and then placing a negative margin top of half the div height. Let's say that #hello is 100px tall for example:
#hello {
position:fixed;
top:50%;
margin-top:-50px;
}
With position:fixed; the div will be relative to your document window.
You can add this style. Also you have to add some content in the middle so that you can check properly, or, give some height(in px) to the parent div. An empty parent div with no height will not reflect the change.
#hello{
position: fixed;
top: 50%;
}
You can check this fiddle:
http://jsfiddle.net/76a4j/6/
Replace your css with this one
*{margin:0; padding:0;}
html, body{height:100%;}
#home{display:table; margin:auto; height:100%; width:100%; position:fixed; top:0px; left:0px;}
#home-container{display:table-cell; vertical-align:middle; text-align:center;}
#hello{display:inline-block;}
I made a fiddle for you. Check it out http://jsfiddle.net/fQwFL/
Hope it will fix your problem.
I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%).
Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.
HTML
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS
body {
height: 20000px
}
#wrapper {
padding: 10%;
}
#wrap {
float: left;
position: relative;
width: 40%;
background: #ccc;
}
#fixed {
position: fixed;
width: inherit;
padding: 0px;
height: 10px;
background-color: #333;
}
Here is the obligatory fiddle: http://jsfiddle.net/C93mk/489/
Does anyone know of a way to accomplish this?
I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion:
http://jsfiddle.net/EVYRE/4/
You can use margin for .wrap container instead of padding for .wrapper:
body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{
float: left;
position: relative;
margin: 10%;
width: 40%;
background:#ccc;
}
#fixed{
position:fixed;
width:inherit;
padding:0px;
height:10px;
background-color:#333;
}
jsfiddle
Try adding a transform to the parent (doesn't have to do anything, could be a zero translation) and set the fixed child's width to 100%
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
position: relative;
width: 40%;
background:#ccc;
transform: translate(0, 0);
}
#fixed{
position:fixed;
width:100%;
padding:0px;
height:10px;
background-color:#333;
}
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
How about this?
$( document ).ready(function() {
$('#fixed').width($('#wrap').width());
});
By using jquery you can set any kind of width :)
EDIT: As stated by dream in the comments, using JQuery just for this effect is pointless and even counter productive. I made this example for people who use JQuery for other stuff on their pages and consider using it for this part also. I apologize for any inconvenience my answer caused.
man your container is 40% of the width of the parent element
but when you use position:fixed, the width is based on viewport(document) width...
thinking about, i realized your parent element have 10% padding(left and right), it means your element have 80% of the total page width. so your fixed element must have 40% based on 80% of total width
so you just need to change your #fixed class to
#fixed{
position:fixed;
width: calc(80% * 0.4);
height:10px;
background-color:#333;
}
if you use sass, postcss or another css compiler, you can use variables to avoid breaking the layout when you change the padding value of parent element.
here is the updated fiddle http://jsfiddle.net/C93mk/2343/
i hope it helps, regards
You could use absolute positioning to pin the footer to the base of the parent div. I have also added 10px padding-bottom to the wrap (match the height of the footer). The absolute positioning is relative to the parent div rather than outside of the flow since you have already given it the position relative attribute.
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
padding-bottom: 10px;
position: relative;
width: 40%;
background:#ccc;
}
#fixed{
position:absolute;
width:100%;
left: 0;
bottom: 0;
padding:0px;
height:10px;
background-color:#333;
}
http://jsfiddle.net/C93mk/497/
On top of your lastest jsfiddle, you just missed one thing:
#sidebar_wrap {
width:40%;
height:200px;
background:green;
float:right;
}
#sidebar {
width:inherit;
margin-top:10px;
background-color:limegreen;
position:fixed;
max-width: 240px; /*This is you missed*/
}
But, how this will solve your problem? Simple, lets explain why is bigger than expect first.
Fixed element #sidebar will use window width size as base to get its own size, like every other fixed element, once in this element is defined width:inherit and #sidebar_wrap has 40% as value in width, then will calculate window.width * 40%, then when if your window width is bigger than your .container width, #sidebar will be bigger than #sidebar_wrap.
This is way, you must set a max-width in your #sidebar_wrap, to prevent to be bigger than #sidebar_wrap.
Check this jsfiddle that shows a working code and explain better how this works.
Remove Padding: 10%; or use px instead of percent for .wrap
see the example :
http://jsfiddle.net/C93mk/493/
HTML :
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS:
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
position: relative;
width: 200px;
background:#ccc;
}
#fixed{
position:fixed;
width:inherit;
padding:0px;
height:10px;
background-color:#333;
}
Just check this fiddle:
http://jsfiddle.net/9EJpu/25/
How can I stretch the blue div 100% horizontally so it docks to the purple right div?
If I set width:100% its just doing what a div is used for to "line-break" down the purple div.
I also tried display:inline(-block) nothing helped to make the purple div stay on the same
line as the blue div.
The solution must work on IE9. Please no CSS3 hacks.
If I interpret your question correctly you need to change a couple of things...
#wrap {
width:100%;
height:100%;
background-color:green;
position: relative;
}
#left_col {
overflow:auto;
float:left;
height:100%;
margin-right: 100px;
background-color:blue;
}
#right_col {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width:100px;
background-color:purple;
}
You could add position: fixed to #right_col, but it would cover your footer.
Here is a demo:
http://jsfiddle.net/xuBfe/
Using CSS3's relatively safe calc property. -> http://jsfiddle.net/joplomacedo/9EJpu/27/
You can use safer properties though, that just seemed the quickest way to do it with your existing markup.
Example:
http://jsfiddle.net/hunter/9EJpu/37/
To get the content of the main panel to have the proper width you can add a wrapping element within left-col
#left_col
{
overflow:auto;
float:left;
height:100%;
width:100%;
background-color:blue;
}
#left_col > *
{
margin-right: 100px;
}
#right_col
{
right: 0;
top: 0;
position:fixed;
z-index: 1000;
height:100%;
float:right;
width:100px;
background-color:purple;
}
#footer
{
width: 100%;
bottom: 0;
left: 0;
position: fixed;
background-color:yellow;
z-index: 2000;
}
Another possible solution that makes use of the safer box-sizing property.
http://tinkerbin.com/Vi1Rtt1T
make blue width 100% and pad the right side with the width of the purple, purple should have fixed on the right
Edit:
yes I forgot, ok then just float a div to the right side with the width of the purple (inside of the blue). Just need a space holder so things don't run underneathe