I'm in difficulty: I have a parent element that has a size that doesn't know. And I have an item that it must place permanently at the top of the body, then position: fixed, but I cann't because giving it width: 100%, is 100% of the body, but I want 100% of the parent element. How can I do?
Example: http://codepen.io/michele96/pen/jWbYQb
set .fixed's width as width: inherit; don't use 100%
body {
padding: 0;
margin: 0 auto;
}
.container {
position: relative;
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: fixed;
width: inherit; /*change here*/
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
The problem is that, unlike absolutely positioned elements, the containing block of a fixedly positioned element is usually the viewport, not its nearest positioned element. Then, width: 100% is resolved with respect to the viewport width.
There are ways to change this behavior, e.g. elements with transform establish a containing block for their fixedly positioned descendants. But then your element won't be fixed at the top of the viewport.
Instead, you should use sticky positioning:
.fixed {
position: sticky;
top: 0;
}
body {
padding: 0;
margin: 0 auto;
}
.container {
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: sticky;
top: 0;
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
Note it's not widely supported yet.
Set transform: translate3d(0, 0, 0); to the parent.
Related
I am trying to make element position with negative margin - one element should cover a bit the previous one. But it's bit complicated - negative margin should have only child div of #content. See example below. I need to have red element, than yellow element and gray element inside the red one should have negative margin and cover bottom of red one.
I have already tried relative and absolute position, change z-index, but none of these worked for me.
#sectionTitle {
height: 150px;
text-align: center;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
background: red;
}
#content {
background: yellow;
position: relative;
width: 100%;
height: auto;
min-height: 300px;
overflow: auto;
z-index: 20;
}
#content .block {
position: relative;
background: #eee;
width: 90%;
top: -50px;
margin: 0 auto 0 auto;
box-sizing: border-box;
height: auto;
min-height: 400px;
z-index: 30;
}
<div id="sectionTitle">
...some text...
</div>
<div id="content">
<div class="block">
...element which should cover bottom of #sectionTitle element
</div>
</div>
Now when I inspect the element, .block goes 50px to #sectionTitle, but it's not visible, because sectionTitle element covers it.
Simply remove z-index (to avoid the creation of a stacking context1) and overlow:auto (to avoid the creation of a block formatting context2) from the #content div:
#sectionTitle {
height: 150px;
text-align: center;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
background: red;
}
#content {
background: yellow;
width: 100%;
height: auto;
min-height: 300px;
}
#content .block {
position: relative;
background: #eee;
width: 90%;
top: -50px;
margin: 0 auto 0 auto;
box-sizing: border-box;
height: auto;
min-height: 400px;
z-index: 30;
}
<div id="sectionTitle">
...some text...
</div>
<div id="content">
<div class="block">
...element which should cover bottom of #sectionTitle element
</div>
</div>
1Why can't an element with a z-index value cover its child?
2What formatting context applies to elements that don't create their own?
I have seen some web design lessons that always start with a css like this:
body,html {
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
I'm trying to figure out what's the point of declaring attributes like width, height or display for body and html that are, if I'm not wrong, by default in browsers.
I thought it would be to prevent and undefined return or similar when accessing the css with js, but the result is the same when the attributes are defined in the css than when left to default:
console.log($("BODY").css('width')); // Always returns the width of the body
I also thought it could be to start the inheritance in cascade elements, but a div inside the body inherits the value just the same.
Anybody knows a solid reason for this approach? any browser / device issue I have missed? future compatibility? plain pedantry?
I'm kind of curious about it.
I found a good reason to define the html and body width and height to 100%. Say you want to vertically align a relative positioned div, you need to put it into an absolute positioned container:
html,
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="container">
<div id="main">
<h1>MY DIV</h1>
</div>
</div>
But, setting the body width and height to 100% you get an absolute positioned container that covers the whole window:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="main">
<h1>MY DIV</h1>
</div>
You get the same result, but it saves you a div element.
I'm trying to layout a screen using div's and CSS. It's a simple layout at this point but I can't seem to get the div's to line up. I want one wrapper div with two div's within it: one aligned to the left and one aligned to the right. However, they end up on top of each other.
I know this question is simple. What am I missing here?
If I reduce the width of the right div to 60% it lines up right but shouldn't I be able to use 100% of the width of the parent div?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Float left your children elements:
jsBin demo
#product_wrapper > *{float:left;}
Note that inline-block causes the inner elements to actually act like inline elements
where white spaces count!
SO another way would be to modify your HTML removing the NewLine separator:
jsBin demo
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
The third way (the worst one) is to set font-size to 0 for the parent (will remove logically the child's white-space gap since is now '0'); >> and than reset the font-size for children elements to px (cause em will not work since parent has 0).
But that's a good way to loose track of dynamic and responsive font sizes expecially if you use em and size inheritances.
The problem is the whitespace in the html, which occupies some space between the elements.
One way of fixing it is
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Use float:left instead of display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
I am having a problem with my CSS code. I want the div .top & .header equal to the width of the
body but it limits to the width of the container. I want it remain inside the container class.
Thanks,
body {
margin: 0;
padding: 0;
background: #000;
position: relative;
}
.container {
position: relative;
width: 910px;
height: 800px;
border: 1px solid #fff;
background: url(images/bg_home.jpg) no-repeat right;
margin: 0 auto;
z-index: 0;
}
.top {
background: #00112b;
width: 100%;
position: relative;
height: 49px;
z-index: 2;
opacity: 0.50;
filter: alpha(opacity=50);
}
.header {
position: relative;
left: 0;
opacity: 0.50;
filter: alpha(opacity=50);
background: #012e46;
width: 100%;
height: 99px;
z-index: 2;
}
.header .login {
background: red;
opacity: 100;
filter: alpha(opacity=100);
float: right;
}
.logo {
position: absolute;
top: 15px;
left: 0;
z-index: 3;
}
html
<body>
<div class="container">
<div class="top"> </div>
<div class="header">
<table class="login">
<tr>
<td>-- Schedule an appointment --</td>
</tr>
</table>
</div>
<div class="logo"><img src="images/logo.gif" width="204" height="120"/></div>
</div>
</body>
Your question also contains the answer.
I want the div .top & .header equal to the width of the body
This could be achieved by having an attribute / property of width: 100%;
but it limits to the width of the container
This is because the container is the parent of the child element. Which means the max width of the child element is the width of the parent.
I want it remain inside the container class.
Which means, you'll have to give the container the property of width: 100%.
You can also solve this by using the overflow property, but I assume that is not what you'd like.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Which ofcourse means:
.container {
position: relative;
width: 100%;
height: 800px;
border: 1px solid #fff;
background: url(images/bg_home.jpg) no-repeat right;
margin: 0 auto;
z-index: 0;
}
Also, not related to your question but to your CSS, you have a property of background which loads an image and not repeat.
Is this what you want or is it a pattern? In the last case, consider it making a small picture to repeat over the entire page, this reduces the load time of the webpage.
If the question was regarding your background not meeting the bodys width, consider adding it to the body tag instead of the container tag.
Although you have given .top and .header a width of 100% - they sit inside the container div which has a width of 910px. Therefore by saying .top width 100% you are basically saying .top width 910px because it is a child of container therefore it will take on those styles.
Why do the .top and .header need to sit inside the container? If you would them to be 100% i.e. fill the whole browser window, then you should take them outside the container div.
Good luck
Like this
please remove width:100%; for below selector:
css
.top {
background: #00112b;
position: relative;
height: 49px;
z-index: 2;
opacity: 0.50;
filter: alpha(opacity=50);
}
.header {
position: relative;
left: 0;
opacity: 0.50;
filter: alpha(opacity=50);
background: #012e46;
height: 99px;
z-index: 2;
}
Very basic question here, but it has been puzzling me for hours:
How do I make a relatively positioned div span its absolutely positioned content?
http://jsfiddle.net/X6ay2/10/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 50px;
height: 50px;
background: red;
}
You can't directly really, as absolute positioned elements are out of the document flow and so don't really 'belong' to their parents anymore. A kind of workaround though is to set the absolute positioned div to 100% width and left:0, which will force it to extend to the width of the parent.
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 100%;
left: 0;
height: 50px;
background: red;
}
http://jsfiddle.net/X6ay2/14/
A caveat to this is if the inner div has padding, it will extend beyond 100%. To stop this, make the inner div use the border-box box-sizing property.
.inner {
padding: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
http://jsfiddle.net/X6ay2/15/
set width of the outer to suit your needs. The example has
width:50px
http://jsfiddle.net/X6ay2/12/