I have a fixed width container.
In which i have a footer which is stuck in the fixed width wrapper. i want to expand the footer width 100%.
I cannot modify the html code. I need a guidance how can i make the footer 100% keeping it in fixed wrapper.
I tried to make it work through position relative / absolute.
This is my code.
<style>
.wrapper{ width:980px; margin:0 auto}
.body{background:red}
.footer{ width:100%; background:green}
</style>
<div class="wrapper">
<div class="body">Main body contain</div>
<div class="footer">Footer</div>
</div>
position absolute will work for you
.footer {
position: absolute;
background:green;
left: 0;
right: 0;
}
You can do this by absolute positioning .footer. Change what you have to the following.
.footer {
background:green;
position: absolute;
left: 0;
right: 0;
}
If you add position: relative; to .wrapper this will not work and your footer will be contained within .wrapper.
jsFiddle: http://jsfiddle.net/8qkes6ba/
Try width: 100vw; which means 100 viewport width. and is not relative to container, like percentages.
You will still need to position it to the left.
Try adding this:
.wrapper{ width:980px; margin:0 auto}
.body{background:red}
.footer{ position:absolute; left:0; width:100%; background:green}
jsFiddle
The issue is that the wrapper class is set to have a width of 980px which causes the width of the footer class when set to 100% only be as big as 980px.
<style>
.wrapper{ width:980px; margin:0 auto}
.body{background:red}
.footer{ width:100%; background:green}
</style>
<div class="wrapper">
<div class="body">Main body contain</div>
</div>
<div class="footer">Footer</div>
Related
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
This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 6 years ago.
I'm trying to center a div horizontally and vertically inside another div. My problem is that on window resize the width and height of parent div changes. For that, I have problems to center the div in the center of the parent div.
Here is a case where I the width and height of the parent div is defined:
<div id="parent" style="">
<div id="child">Foo foo</div>
</div>
And the ccs:
#child {
display: table;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:red;
width:50px;
height:50px
}
#parent{
background-color:blue;
width:400px;
height:400px;
}
I don't know why it's so difficult to achieve it? JSFIDDLE
here's one way to achieve it :)
https://jsfiddle.net/e4xhrvcf/
.parent{
width:500px;
height: 500px;
background-color:red;
display: flex;
align-items: center;
}
If I understood what you want, I think you just need to add relative position to the parent in order to get absolute in the child to work:
#parent{
background-color:blue;
width:400px;
height:400px;
position : relative;
}
http://codepen.io/anon/pen/rrdVbO
#parent{
position: relative;
background-color:blue;
width:400px;
height:400px;
}
#child {
position: absolute;
top: 50%;
left: 50%;
background-color:red;
width:50px;
height:50px;
transform: translate(-50%, -50%);
}
The parent needs to have a position definition for the child's absolute to work. Use top and left 50% to center the left top corner of the child and transform: translate(-50%, -50%) to move it back up and left by half of its own height and width.
try this,
HTML
<div id="grandParent">
<div id="parent">
<div id="child">
foo foo
</div>
</div>
</div>
CSS
html, body{
height:100%;
}
#grandParent{
display: table;
min-height:100%;
width:100%;
}
#parent{
background-color:red;
display:table-cell;
text-align: center;
vertical-align:middle;
}
#child {
background-color:blue;
display:table;
margin:0 auto;
}
Fiddle
https://jsfiddle.net/guruling/7o764szj/2/
Use CSS-Flexboxes by setting display: flex; for the parent div, and setting margin: auto for the child div.
remove the top,bottom,right,left from the css.
I have a banner. In that banner is an image. When you resize the viewport/browsers width the image is scaled to a smaller size to fit the window.
Notice how when you resize the browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Heres my JS FIDDLE
HTML
<div class="wrapper">
<center>
<div class="imgWrapper">
<img src="http://lorempixel.com/500/300/">
</div>
</center>
</div>
CSS
.wrapper {
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
display:inline-block;
margin-top:100px;
}
.imgWrapper img {
width:100%;
}
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Add position: relative to the parent element and position: absolute; to the child element (along with bottom and left values).
DEMO
This will do it for you https://jsfiddle.net/eaxe2sww/4/
.wrapper {
position: relative;
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
position: absolute;
bottom: 0;
left: 50%;
transform:translateX(-50%);
}
I am trying to make a light box style Jquery function. Unfortunately, the .container div that contains the image div (.lightboxbackground) I want to make pop out and enlarge has position:absolute and z-index: 10 so my pop up box and background fader only take up the width and height of that parent (.container) div eg:
Would anyone know a way around this so that my .lightboxbackground and .lightbox divs can cover the whole screen?
<div class='container'>
<div class='lightboxbackground'>
<div class='lightbox'>
<img src='image.jpg'/>
</div>
</div>
</div>
.container {
position: absolute;
z-index:10;
width: 200px;
height: 200px;
}
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:absolute;
z-index: 11;
}
.lightbox {
width: 500px;
height: 500px;
position:absolute;
z-index: 12;
}
if you want to cover the whole screen:
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:fixed;
left:0;
top:0;
z-index: 11; //I would advise to change this to z-index:1000 (Note: .lightbox must also adjust to this)
}
fid: http://jsfiddle.net/uH4MF/1/
.container is their "frame of reference", so to speak. 100% width and height of the descendants of .container means 200px for them.
Also, there is a way to attain 100% height. One of them is to to explicitly define height on html and body so you can have this reference.
And so:
Place .container as a child of body
<body>
<div class="container">...
Remove .container's width and height
Add the following style:
html, body, .container {height:100%};
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.