my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
Related
I am trying to build a horizontal scrolling layout, composed of image blocks:
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
I used display:inline-block and white-space: nowrap; properties to achieve this, and it does work but browsers don't seem to recompute block widths on resize?
Check here: https://jsfiddle.net/g597w3Lr/2/ and try resizing the browser..
Here is a screen grab to better understand what is my problem:
https://youtu.be/VxKo4gysc1o
At first all images are well positioned and i can scroll horizontally: perfect.
I then resize the browser
images are resizing, not the .item wrappers. White gaps appear :(
Basically i was expecting same feature as with vertical scrolling, i.e. adapting width depending on content size.
I actually dont even understand the logic here..
Is there any way to get over this?
Thanks!
Original answer
EDIT 2: Looking at your video I think the new approach is what you are looking for.
You have to display your divs with .item class as inline and remove your white-space: normal property.
.item {
display: inline;
height:100%;
}
Updated JSFiddle.
Explanation:
I am not an expert of CSS so if someone see some mistake please correct me.
When you display an element as inline-block as the official documentation says:
inline-block
Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
which means that the element that you display as inline-block acts like a block but you can set it inline (in the same line). This means that you can set a div (which is display: block as default) in a single line. You can also see it here:
The div element, short for division, is the block level generic container.
Also, inline elements cannot get height/width properties so this is the reason why when you display your divs with .item class as inline, they wrap the content but not get the height/width that they should correspond to take (from their parents in your case, as you put them with %).
If you display them as inline-block it does not changes anything about their default height/width properties. Just allows you to display them in a single line.
JSFiddle to see the three divs (inline/ inline-block / block, as default).
You will have to modify slightly your css
HTML
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
CSS
html,body {
height:auto;
}
.container {
display: inline-block;
white-space: nowrap;
height:auto;
}
.item {
display: inline-block;
white-space: normal;
}
.item img {
width:100%;
height:100%;
}
Fiddle
check it see that's what you want ?
I manage your classes with border:solid 1px red;
and use width:100% in some classes.
also in class item:
width:100%;
https://jsfiddle.net/g597w3Lr/6/
<div class="internal-wrapper row-fluid">
<div class="Header span12">
<div class="HeaderTitle span6"></div>
<div class="span6"></div>
</div>
</div>
Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)
.internal-wrapper {
padding-left: 30px;
padding-right: 30px;
}
The blue bar below represents Header class. The green box, represents padding! So, Its happening on left but not right
.row-fluid is 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.
How to fix it - add an inner element with the padding.
<div class="row-fluid">
<div style="padding-left: 30px; padding-right: 30px;">
...
</div>
</div>
I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.
If this doesn't help, please create a demo: http://jsfiddle.net/
Ok here's what I have:
<div id='wrap' style='width:100%; height:100%;'>
<div id='parent'style='width:100%; height:100%;'>
</div>
<div>
Now I want a <div id='downleft'> which would be left: 0; bottom: 0;.
The ideal would have been if I just included id='downleft' inside the id='parent' which is responsive, like:
<div id='wrap' >
<div id='parent'>
<div id='downleft'></div>
</div>
<div>
Unfortunately parent is handled by a script and everything inside it is not generated in final website (there are some other divs generated inside it).
Question:
Is there any way that id='downleft' can always have a responsive position based on id='parent''s responsive height, on the bottom left of the page?
ps: Unfortunately jsfiddle doesn't support height:100% for an example
You can insert the content that is generated before downleft, so that the downleft would alwyas be the last element inside the parent.
eg `$("#downleft").before(javascript generated content)
`
I am trying to overlay a div over my entire page to show a pop-up. The problem is, it won't overlay over the entire page. Here is an approximation of the code:
<div style="z-index:902;">
<div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
Overlay
</div>
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
The overlay div appears on top of container 1, but the contents of container 2 and 3 appear on top of the overlay.
I cannot move my overlay div outside of the container 1, as I am using a CMS (DotNetNuke if that helps).
I have tried setting the z-index of my overlay higher than the containers, but nothing is working.
Can anyone help?
Working Fiddle Example!
If you limit the scope of this problem to the code that you've presented, it is working just fine! e.g., On the Fiddle you can see that I placed a background color to the position:fixed div as to illustrate that the solution is working.
However, if you are using z-index, is safe to assume that your elements with z-index have some position applied.
Taking this into consideration, this part:
<div style="z-index:902;">
<div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
Overlay
</div>
Contents of container 1
</div>
cannot work as an "entire page" overlay since the inner div with position:fixed is inside a stacked element that has other stacked elements on the side (siblings), on the same stack position with z-index:902;.
See this Fiddle to illustrate!
If you move the siblings elements to a lower stack position, you can make it work. See this Fiddle Example!
Edited
This first part of my answer was edited as advised by My Head Hurts (see comments), to better explain that the first Fiddle works because the OP placed the question leaving place to guesses! No changes were made to the two solutions presented and approved at this answer!
A solution would be placing the overlay outside all other divs, but this depends on your goal:
<div style="z-index:902;">
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
<div style="position:fixed; z-index:10000; left:0; top:0; right:0; bottom:0; background:#ccc;">
Overlay
</div>
See this Fiddle Example!
EDITED
because of this comment:
Yes this would be the ideal answer, and I will accept it as it answers my question as written, but the problem I was facing was from some JavaScript that was dynamically changing the z-index of the other containers that I couldn't control making it impossible to place my div on top of them all.
Assuming that you can place whatever you wish inside container 1, and assuming that you are using or can use jQuery, you can do this to solve the problem:
<div style="z-index:902;">
<div class="placeOutside" style="position:fixed; z-index:903; right:0; bottom:0; left:0; top:0; background:#ccc;">
Overlay
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.placeOutside').appendTo('body');
});
</script>
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
See this working Fiddle example!
z-index only works with positioned elements (e.g. position:absolute;, position:relative;, and position:fixed;).
An element is said to be positioned if its position property has a value other than static.
~ Visual Formatting Model of CSS 2.1 Specification
You have given your overlay a width and height of 100%, and since it is a direct descendant of container 1, its width will be calculated to be 100% of the width and height of container 1, thus explaining your problem.
As for a solution, you should probably set the width and height of the overlay to an absolute pixel value for the size of the browser window in JavaScript, prior to showing it.
This code worked for me in firefox:
<div style="z-index:1;">
<div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index:901;">
Overlay
</div>
Contents of container 1
</div>
<div style="z-index:1;">
Contents of container 2
</div>
<div style="z-index:1;">
Contents of container 3
</div>
So try it out and see if it works for you.
Here is my solution... Imagine two sibling divs. #in-front needs to rest on top of #behind.
<div id="behind"></div>
<div id="in-front"></div>
Instead of having them be siblings, wrap the first div inside a wrapper and set it's positioning to fixed.
<div id="wrapper" style="position:fixed; width:100%; top:0; left:0;">
<div id="behind"></div>
</div>
<div id="in-front"></div>
The #behind div can now position or center itself however it wants. Look at this jsfiddle for an example. Notice how they work together with no negative margins!
if i mix position relative and absolute width z-index this make no sense:
<div style=" Position: fixed ; z-index:902; width:100%; heigth:100%;background:#F00;">
Contents of container 2
</div>
<div style="z-index:1; position:relative">
<div style=" z-index:903; Position: fixed ; left: 0; top: 0;background:#ccc;">
Overlay
</div>
</div>
http://jsfiddle.net/vLp0am43/
I am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0
HTML: (note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="sticky">
<div id="s_content">
Hello
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
jsFiddle: http://jsfiddle.net/ZqaDe/
Preview: http://jsfiddle.net/ZqaDe/show
EDIT:
I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.
EDIT 2:
I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/
You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.
So your JQuery string would become:
$(this).parent().parent().appendTo("#footer")
.css('position','relative')
.css('float','left')
.css('height','45')
.css('top','0')
.css('left','0')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/2/
Edit
Or better still, change the position to static, that way you do not need to reset the top and left values:
$(this).parent().parent().appendTo("#footer")
.css('position','static')
.css('float','left')
.css('height','45')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/3/
Edit 2
Or even better, just append classes that do not overwrite your inline CSS:
.tabMe {
float: left;
height: 45px;
position: static;
}
.tabMe #s_head{
border: 0;
}
.tabMe #s_content{
display: none;
}
And your JQuery to show / hide could become:
$('#s_head button').on('click', function(){
var check = $(this).parent().parent();
if( !check.hasClass("tabMe"))
check.appendTo("#footer").addClass("tabMe")
else
check.appendTo("body").removeClass("tabMe")
});
JSFiddle: http://jsfiddle.net/u2nda/4/
You just need to move the second div to the right: #s7243 { left: 200px; }. If you had a third div, you'd need to move it over even more: #third-one { left: 400px; }.
I would place the divs in a main container that had my position absolute and then float your blocks.
Example http://jsfiddle.net/ZqaDe/3/
I think that best option would be to wrap your "sticky" divs. See my demo on jsfiddle
<div class="sticky">
<div id="s6234" class="left">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="left">
<div id="s_content">
Hello
</div>
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}