I have searched various questions, which all seem to be able to extend absolute children beyond their relative parent. I am trying to avoid this.
I have a div with position: relative; that contains a div with position: absolute; that i want to always sit at the bottom of the div. When I set bottom:0px; the absolute child extends beyond the parent div with 4 px. It can be solved by setting bottom:4px; but when I begin making the site responsive such absolute numbers won't do the trick.
html:
<a href="her.html">
<div class="next_movie">
<img src="img/her_header.jpg" alt="Picture from the movie 'Her'">
<div class="movie_info">
<h2>Her (2013) March 6th in AUD1</h2>
</div>
</div>
</a>
css:
.movies {
width: 616.6px;
height:663px;
background-color: #e3e3e3;
margin-top: 75px;
position: absolute;
left:233.3px;;
}
.movie_info, .poster_info {
color:white;
}
.next_movie {
position:relative;
margin:16.6px;
}
.movie_info{
position:absolute;
left:0px;
bottom:0px;
width:582.5px;
height:56.6px;
background:rgba(0,0,0,0.5);
color:white;
font-size:25px;
line-height: 2.3;
}
.movie_info h2 {
margin-left:15.8px;
}
Test version of the site sits here:
http://jhalland.dk/test/
You should try removing height from your movie_info styles. Or you can change it to min-height. You have conflicting rules since you've defined line-height as 2.3
Related
I've been enjoying and having success mocking up webpages with CSS. But then I decided to play with a "fixed menu" and my understanding is now not so clear.
So my brief knowledge make a blank HTML doc and then create a "container" div and place all your further elements within the "parent" container. No problem with this and all has been well with floating elements and such.
But when placing a "fixed" element within my parent div I'm lost as to why the fixed element observes the parent's left margin and ignores it's right margin.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
So with the above the "fixed" block does align with the left margin of the parent container but runs completely to the right edge of the browser page. I have figured out that I can make the fixed block 90% and resolve the issue but I don't understand why. Why would the block not be 90% of the parent "container" block.
I look forward to you knowledge.
Thanks
Update your css like below to achieve your desired result. Inherit your width from the parent instead of using 100%.
.fixed-menu
{
position: fixed;
height: 50px;
width:inherit;
left:auto;
right:auto;
background-color: #00a087;
}
DEMO
as stated by #freestock.tk, a fixed element is "fixed" to the screen viewport.
the width (and height of set in %) is computed relative to the screen viewport.
it looks like it's aligned to left margin of the parent container because you did not positioned it with left or right css properties, it's not constrained by the parent container, it is just at the same horizontal position in this peculiar case.
if you set
left:0;
it will align to the left margin of the viewport and ignore the parent container, this should help you better understand his fixed positioning.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
left:0;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
You where almost there, just add to .fixed-menu few css rules more :
.fixed-menu {
left:0;
right:0;
margin:0 auto;
width: 95% // now you can change width and fixed element will be centered always
}
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I'm looking for a way to add a footer to my page which will always show up at the bottom. The problem is, a lot of the content on the page is set via position: absolute;, so at the moment, unless I manually give the footer a margin-top: 900px; value, its simply hidden by one of the absolute positioned content. But on some pages where the content is less than 900px, there is an unnecessary gap at the bottom between the end of the page, and the footer.
How can I resolve this in such a way that there's no gap between the end of content and footer?
In the new jquery, you can just use this:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
from http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
Put everything before the footer in a div with position relative. This div will flex vertically to the content in it and will provide the buffer to keep anything after it right below it. No margin needed.
You also can put indexes.
z-index: 1;
http://www.fiveminuteargument.com/fixed-position-z-index
In your case, put z-index in css for footer at 10 or more.
Let's suppose a <footer>, styled with display: block and height: 250px.
So all you have to do to achieve what you want is add:
position: fixed;
top: 100%;
margin-top: -250px;
That's it. It'll be permanently aligned at the bottom. :)
Sticky footer. No javascript required:
http://www.cssstickyfooter.com/
After doing some fiddling I was reminded that absolute positioning removes the element from the document flow. You cannot depend on an absolute positioned element to affect the other elements because it will not. Because you do not know the height of the content then using margin-top is clearly not option.
So I came up with this: basically do a normal layout with floats then use position relative to move the items where you want them. This way the elements still affect the document flow, however, now you have total control over the position. This is precisely what relative positioning is for: You want total control over the position of an element but you still want they element to affect the layout normally.
<html>
<head>
<style>
body {
text-align:center;
}
#container {
position:relative;
margin:0 auto;
width: 1000px;
text-align:left;
}
#header {
position:relative;
top:0px;
left:0px;
width:1000px;
height: 100px;
border:solid 1px #000;
}
#sidebar {
position:relative;
top:10px;
left:0px;
width:300px;
height: 500px; /* for demo */
float:left;
margin-bottom: 20px;
border:solid 1px #000;
}
#main {
position:relative;
top:10px;
left:310px;
width:690px;
height: 200px; /* for demo */
margin-bottom:20px;
border:solid 1px #000;
}
#footer {
margin:0 auto;
top:20px;
width: 1000px;
text-align:left;
height: 100px;
clear:both;
border:solid 1px #000;
}
</style>
</head>
<body>
<div id="container"> <!-- Holds all the content except the footer -->
<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>
</div>
<div id="footer">Footer content here</div>
</body>
</html>
ATTENTION! PROBLEM SOLVED, SOLUTION PASTED BELOW INITIAL QUESTION
on the very top of web page Im working I have on to the left corner a flag (to change language) which I have in a div. On the right I have another div for another image (shop cart) but since I floated the right div, I still go to the right divs address when clicking on the left, like the right overrides the let one. Why? How can I solve this?
Also, I am doing this by using my html/css-files and editing them to fit wordpress for a customer.
CSS
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
}
#cartmenu img {
position:relative;
margin-left: 542px;
}
header.php
<div id="container">
<div id="topmenu">
<img src="wp-content/themes/blank/images/icon_en_global.png" alt="English.png" width="42" height="30">
</div>
<div id="cartmenu">
<img src="wp-content/themes/blank/images/cart.png" alt="cart.png" height="" width="">
</div>
// SOLUTION Set width (in css) to both elements as well a float:left to both elements, then position with margins to get them where you want.
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
width: 42px;
height:45;
margin-top:15px;
margin-bottom:-10px;
}
#cartmenu img {
position:relative;
margin-left: 520px;
float left;
width:350px;
height:40px;
margin-top:-20px;
}
Try to define a width for #topmenu img and giving the cartmenu a float:left; as well.
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space