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>
Related
I'm trying to make iframe responsive inside div, there are plenty of resources on the web on how to do this, but the common solution is not working for my case for YouTube video embeds.
I'm using Skeleton CSS Boilerplate. I have a nested div structure like so:
<div class="container">
<div class="row item">
<div class="six columns">
<iframe> </iframe>
</div>
<div class="six columns">
<iframe> </iframe>
</div>
</div>
</div>
The iframe were protruding outside the right edge of the containing div (class .six.columns) so I tried the following two css strategies (below).
However, with each of these strategies, <iframe> have become huge, and seem to have taken on the width of the .container div (or perhaps the .row div), instead of the immediate parent, the .six.columns div.
div > iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
and
div.six.columns iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I just want the <iframe> to responsively fit inside the .six.columns div. How can I achieve this?
Set the container to position:relative in order to have the absolute to work.
To maintain the video aspect ratio, wrap the iframe into another div, and use the padding trick. Let's say the video is 16:9, the padding-bottom value would be 9/16=56.25%. Simple demo follows.
https://jsfiddle.net/dfkhkLhp/
.youtube {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="youtube">
<iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
I am building a website and I am using 2000px wide images. I want the images to be visible on wide screens (like mine - im using TV as monitor) but the smaller screens will only see the images size adequate to their size. (rest will be cropped). The problem is that the image must be centered no matter what size the viewport is. I have used text-align:center; to make the text responsive. I did read the similar topics but no matter what I do the image stays static and not centered. Please help.
HTML:
<body>
<div id="wrapper">
<div class="header">
<img src="images/design/header.png">
</div>
<div class="nav-bar">
Home
About
Portfolio
Gallery
Service
Contact
</div>
<div class="side-bar">
<h1>This is my side bar</h1>
</div>
<div class="content">
<h1>This is my content</h1>
</div>
<div class="footer">
<h1>This is my footer</h1>
</div>
</div>
</body>
CSS:
#wrapper {
max-width: 2000px;
margin: -8px;
overflow: hidden;
text-align: center;
}
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this: Get the screen size using mediacheck and then set up thresholds using #media.
Use the following css to make the image center. max-width:100% will fit the image if the container is smaller than the image width. the image width and height will be reduced to fit.
#wrapper > .header img
{
display: block;
height: auto;
max-width: 100%;
margin:0 auto; /* to make the image center of its container, if container is larger than image size */
}
Update
If you know the exact height of the image, then please see this fiddle. Resize fullscreen to see the image cropping.
HTML:
<div class="position-img-outer">
<div class="position-img-inner">
<img src="http://placehold.it/1000x300" class="position-img" alt="img" style=" height: 300px; " />
</div>
</div>
CSS:
.position-img-outer
{
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.position-img-outer .position-img-inner
{
display: inline-block;
position: relative;
right: -50%;
}
.position-img-outer .position-img-inner .position-img
{
position: relative;
left: -50%;
}
If you know the width of the images, you can use the following:
#wrapper .header img{
position:relative;
width:2000px;
left:50%;
margin-left:-1000px;
}
UPDATE:
To avoid a horizontal Scrollbar, you can set the container element to width:100% and overflow:hidden
#wrapper .header {
position:relative;
width:100%;
overflow:hidden;
}
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
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/
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