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
Related
I would like to know how can i set my footer width to 100%? I tried to set .footer-container and .footer width to 100% as well as absolute position.
Here's the website:
http://buysmartcardsonline.com/
If you moved your div.footer-container outside the div.page container, it should automatically cover the width of the page.
Before:
<div class="page">
...
<div class="footer-container">...</div>
</div>
After:
<div class="page">
...
</div>
<div class="footer-container">...</div>
As #Hubro mentioned in his answer moving the div.footer-container outside the div.page container would be ideal. But if you don't want to move the divs you could try using absolute positioning for the footer like below
.wrapper{
position: relative;
}
.footer-container{
width: 100%;
position: absolute;
left: 0;
bottom: -27px; (height of the footer container)
}
Remove class="footer-container" from class="page" and make it direct child of class="wrapper"
from
to
Try following code - I hope this is what you are looking for
.footer-container {
left: 0px;
width: 100%;
position: fixed;
bottom: 0px;
}
You should place the .footer-container outside the .page and then inside the add a div within the .footer-container with the class of .page to get content within the footer the same width.
<div class="page">Your page content</div>
<div class="footer-container">
<div class="page">
Footer Content
</div>
</div>
Pretty simple question, but can't seem to find the solution. I have 5 elements: 2 floating left, 2 floating right. The fifth element is supposed to be in the perfect center of the div (#infographic), no matter what the screen width is.
example:
1,2 -- 3 -- 4,5 OR 1,2 ----- 3 ----- 4,5
HTML code:
<div id="infographic">
<div class="icon-one"></div>
<p>me</p>
<div class="arrows"></div>
<p>customer</p>
<div class="icon-two"></div>
</div>
Any suggestions to get the element in the center?
I guess this is the output you are looking for :
DEMO
html, body,p{
margin:0;
padding:0;
}
#infographic * {
width:10%;
height:30px;
background:teal;
padding:0;
margin:0 1%;
}
#infographic .icon-one, #infographic .icon-one + p {
float:left;
}
#infographic .icon-two, #infographic .icon-two + p {
float:right;
}
#infographic .arrows{
margin:0 auto;
text-align:center;
}
<div id="infographic">
<div class="icon-one"></div>
<p>me</p>
<div class="icon-two"></div>
<p>customer</p>
<div class="arrows">arrows</div>
</div>
If 12 and 45 have fixed width you can not achieve this using css float, you must use something like absolute positionning instead.
For more information qive a link to your page in its current state, or some more code.
Try this:
If you have two floated divs, then you know the margins. The problem
is that the float:right div should be put before the middle div. So
basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right?
The problem is that right now you know the values of the margins:
floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work...
See: this answer
Add position: relative to the container to allow the .arrows to be positioned absolutely relative to the container. Position the .arrows at the center of the container by using top: 50% and left: 50% (the percentages are relative to the container) and then move the .arrows a bit to the top left by using transform: translate(-50%, -50%) (percentages are relative to the .arrows)
.arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See http://codepen.io/ckuijjer/pen/rhEgy for an example or http://css-tricks.com/centering-css-complete-guide/ for a complete tutorial on horizonal/vertical centering.
If it's only about horizontal centering you might even be able to use
.arrows {
margin: 0 auto;
}
as floating elements are taken outside of the normal document flow
First, it should be possible to group the left and right floated elements together. What we can then do is create a 'fake' wrapper that fills up the entire container. If we know the width of the element to be centered, this can then be centered using a margin.
<div id="infographic">
<div class='leftcol left'>
<div class="icon-one left">1</div>
<p class='left'>me</p>
<div class='clear'></div>
</div>
<div class='rightcol right'>
<p class='right'>customer</p>
<div class="icon-two right">2</div>
<div class='clear'></div>
</div>
<div class='center'>
<div class="arrows">A</div>
</div>
</div>
CSS:
.left {
float: left; }
.right {
float: right;}
.center {
overflow: hidden;
position: absolute;
width: 100%;
}
.arrows {
margin: 0 auto;
display: block;
width: 30px;
}
.clear {
clear: both;
}
#infographic {
position: relative;
}
If we do not know the width of the centered element, take a look at the question Centering a div block without the width and apply the solution there.
Note that the solution presented assumes that the center width is never so wide that it will become wider than the two columns on the left and the right. If you want to have safeguards for that you should set a maximum width percentage like so (the example restricts each column to one-third of the total width):
.leftcol .rightcol .arrows {
max-width: 33.3%
}
I am trying to create fixed position div inside relative container. I am using bootstrap css framework. I am trying to create a fixed position cart. So whenever user scroll page it will show cart contents. but now problem is, it ran outside that container div.
This has to work in responsive mode.
Here my try:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
top: 50px;
right: 0px;
border: 1px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Screenshot:
This is how position: fixed; behaves:
MDN link
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
Hence, to get what you want you have to use something more than fixed positioning:
Probably this:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
margin-left: 250px;
border: 0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Make the element's parent container have position: relative
Instead of using top or left use margin-top and/or margin-left
If you only use top that will position the element based on the window, but if you use margin-top that will position based on the parent element. Same goes for left or right
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
}
.child {
position: fixed;
margin-top: 30px;
margin-left: 30px;
}
I found the answer to that :
<div class="container">
<div class="inContainer">
<p> coucou </p>
</div>
<div>
<p> other thing</p>
</div>
</div>
You want that class="inContainer" are in class="Container" in fixed position but if you scroll with the navigator scroll you don't want that the class="inContainer" move outside the class="container"
So you can make something like that
.container{
height: 500px;
width: 500px;
overflow-y:scroll;
}
.inContainer {
position: absolute;
}
So class=inContainer will be always on the top of you're class=Container and move with you're class=container if you scroll with navigator scroll =)
(tested only with chrome)
No it's impossible because fixed property throws the element out of the flow so it doesn't depend to anything on the document and yes it is no more contained in your container : )
Yes, you can do it, just use margin-top property instead of top property.
When you use position: fixed and specify a top and or left position,
you'll find that the element will be fixed relative to the window, and
not to any other element of position: relative.
There is a way around this and that is not to specify top and left
positions but instead to use margin-left and margin-top on the
position: fixed element.
Source: https://www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/
The behavior of the positioning is mentioned in the AdityaSaxena's answer https://stackoverflow.com/a/18285591/5746301
For creating a fixed position cart, you can also do it with using the jquery.
If we apply the Left or right value or margin, we may face some issue while responsive.
In the below snippet, I have placed the fixed element at the right of the container.
Even if the width of the container increased the fixed element placed accordingly.
Here is the jsfiddle Demo URL
//Jquery
$(document).ready(function(){
var containerWidth = $(".container").outerWidth();
var elementWidth = $(".element").outerWidth();
var containerOffsetLeft = $(".container").offset().left;
var containerOffsetRight = containerOffsetLeft + containerWidth - elementWidth;
$(".element").css("left", containerOffsetRight);
});
//CSS
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:900px;
background:#ccc;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
top:50px;
border:1px solid #d6d6d6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Hope this may help you.
Thanks
If you are looking to show the cart even when the user scrolls that is fixed then you should use position:fixed for the cart (if .container is your cart), because it should be shown with respect to screen/viewport. Your current code will only show the element which is positioned absolutely inside the container. If you want it to be like that then give :
.container {
position:relative;
}
.element {
position:absolute;
top:50px;
right:0px;
}
<div style="position: fixed;bottom: 0;width: 100%;">
<div class="container" style="position: relative;">
<div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">
F
</div>
</div>
</div>
You can just add
.element {
left:368px;
}
Fiddle: http://jsfiddle.net/UUgG4/
I am trying to position a child DIV at the bottom of a parent DIV, but I would also like the contents of the child DIV to help dictate the dimensions of the parent DIV. As I have it right now, the child DIV doesn't affect the width/height of the parent DIV.
Here is a sample of my HTML/CSS code:
//HTML code:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child"></div>
</div>
//CSS code:
#parent {
background-color:#222;
position: relative;
height: 500px;
}
#child {
background-color:#444;
position: absolute;
bottom: 0px;
width: 100px;
height: 200px;
}
What do I need to do it achieve what I am trying to do? I could forgo the absolute/relative CSS rules and simply create a table within the parent DIV which would allow me to achieve both bottom alignment and content that dictates the parent's dimensions.
However, I'd like to know if there a way to do this in CSS and without having to set the width of the parent DIV.
thanks in advance!
The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.
Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.
As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.
With modern CSS, this is doable.
HTML:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child">
<p>CHILD ELEMENT</p>
</div>
</div>
CSS:
#parent {
background:red;
height: 500px;
position:relative;
}
#child {
background:green;
position: absolute;
top:100%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
width: 100px;
}
http://jsfiddle.net/Bushwazi/bpe5s6x3/
transform:translateY(-100%); is the trick. It's math is based on the element's box-model.
You could also combine top:50%; with transform:translateY(-50%); to center it.
You can swap top for left and translateY for translateX to position the element horizontally.
Here you go
HTML:
<main id="parent">
<div class="popup">Top Aligned Title
<div class="content">
Content
</div>
</div>
</main>
CSS:
#parent {
width: 120px;
}
.popup {
position: relative;
margin-top: 48px;
}
.content {
left: 0;
position: absolute;
background: green;
width: 100%;
}
http://jsfiddle.net/8L9votay/
You can play around with flex and zero-width/height.
I've recently come up with the following solution (for width):
#parent {
display: inline-flex;
flex-direction: column;
background: #518cff;
color: #fff;
}
#child-wrapper {
height: 0; /* This can also be max-height, but height is just enough */
}
#child {
transform: translateY(-100%); /* If you need to align child to the bottom */
background: #b40000;
color: #fff;
}
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child-wrapper"> <!-- This is the solution -->
<div id="child">
Child's content that is longer than parent's
</div>
</div>
</div>
I have divs like this:
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
now I use this style for my container and footer:
html, body {
height:100%;
}
div.container {
min-height: 100%;
position: relative;
}
div.footer {
width:100%;
height: 40px;
positioin: absolute;
bottom: 0px;
}
So, the footer stays at the bottom relative to the page, it is good, but I found out two problems:
if the body div's content is too long, it will overlap the footer!
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
Any idea of how to fix this?
My best tip is to use A CSS Sticky Footer, works like a charm.
place the footer div out of the container and give marin-top:-(height:px)px;.
<div class="footer"></div>
html, body {
height:100%;
}
div.container {
min-height: 100%;
}
div.footer {
width:100%;
height: 40px;
margin-top:-40px;
}
You might want to try bottom: -40px;.
The bottom property positions your element so that the bottom of your element is offset by the bottom of the containing element by this amount. So if you had bottom: 0; as in your example, the bottom of your element is aligned with the bottom of its containing element, hence it will overlap it.
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
This is because the width: 100%; is defined relative to the containing block of the element, which is the div.container (which is set to position: relative). You would have to take it out of this container, or not define the container as position: relative; to fix this.