I have a really stuburn layout, that I just can not resolve ..
- Left column - Fixed,Static (always in view)
- Right column - Fluid/liquid/scrollable
--- Header - fixed
--- left/main fluid/liquid
--- Right/sidebar - fixed width
--- footer
(if the above is not clear - header,left/main,right/sidebar,footer are INSIDE the right column)
now, this layout sort of working ,
<div id="left-col">left col</div>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="sidebar">sidebar</div>
main
</div>
<div id="footer">footer</div>
</div>
#left-col {
width: 50px;
position: fixed;
background: yellow;
left: 0;
top: 0;
}
#container {
margin-left: 50px;
background: black;
}
#header {
background: green;
}
#main {
background: blue;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 50px;
background: pink;
}
#footer {
background: red;
}
but still I have one annoying problem -
when the main content is not long enough - the sidebar and the footer are overlapping ..
That is because the sidebar is : absolute positioned - but then again, If i make it relative, and the page is being re-sized, the sidebar goes UNDER the main ... (not enough space for fluid ...)
so , my question is this ,
Anyone has an Idea how to keep the footer UNDER the sidebar ? (jQuery sticky tricks not working, and CSS tricks are quite tricky here..)
or any other ides to achieve this layout ?
JSFIDDLE: http://jsfiddle.net/VNU6Z/
You can use float:right instead of position absolute
sample
Kim is right. Make div id="sidebar" float:right, and make div id="main" overflow:hidden
div id="main" will then resize to your floated elements as though it had float:left
Related
I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
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/
___________div class=MAIN_________________
div id=LEFT div id=RIGHT
__________________________________________
How can I achive that all the bottoms of the MAIN + LEFT + RIGHT box are glued together?
Basically locking the bottoms, say if there is a lot of contents in the LEFT box -> the RIGHT box will grow along with the LEFT and MAIN box.
__ follow up __
I don't know how to correctly implement into my code :(
http://jsfiddle.net/v572V/
I have copied the whole CSS file so it looks very messy. But the boxes are as follow
<div class="content home">
<div id="main">
<div id="sidebar">
Do you mean something like this : http://jsfiddle.net/teresko/EkTVv/
This is a variation on so-called "holy grail layout". Should work on all browsers, including IE6. The layout will expand to fit the longest of parts. If content is shorter then browser's height, then layout will extend to the height of the browser.
http://jsfiddle.net/rlemon/DjQup/
you float the left and right columns in the container. then have an 'inner' content container with padding to offset the floats... see the example above.
<div class="container">
<div class="left">asd</div>
<div class="right">asd</div>
<div class="middle">
<div class="middle-inner">
asdf
</div>
</div>
</div>
.container {
height: 600px;
widht: 800px;
background-color: #aaa;
clear: both;
}
.left, .right {
width: 100px;
height: 100%;
background-color: blue;
}
.left { float: left; }
.right { float: right; }
.middle {
background-color: green;
float: none;
height: 100%;
width: 100%;
}
.middle-inner {
padding: 0 100px;
}
it's not perfect but at least you can see the technique in play. gl.
I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in.
I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it.
I've tried adding:
margin-bottom: 50px;
padding-bottom: 50px;
to the div containing the top page content, but it doesn't work.
Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/
#left, #right {
margin-bottom: 90px;
}
or
#top_section > div {
margin-bottom: 90px;
}
It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work
Simply add the following rule:
#top_section {
overflow: hidden;
padding-bottom: 90px;
}
This will make #top_section be as big as the floating content inside it.
http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, having no idea what your layout looks like (I am not going to assume the demonstration is yours... unless you revise and tell me it is) i'll show you how I would do this
HTML
<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
<div class="inner-content"> <!-- content inner, where your content goes! -->
content
</div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>
CSS
html,body,.container {
height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}
.content {
height: 100%; // see above... i need to cascade down.
background-color: green;
}
.content-inner {
padding-bottom: 100px; // offset for the footer.
}
.footer {
width: 100%;
position: absolute; // stick me to the bottom.
bottom: 0;
height: 100px;
background-color: red;
}
enjoy!
You need to use fixed position in CSS to achieve this.
HTML:
<div id="top-section">
Insert content here...
</div>
<div id="bottom-nav">
<div id="content">
Bottom content...
</div>
</div>
CSS:
#bottom-nav {
bottom: 0;
position: fixed;
width: 100%;
}
#content {
margin: 0 auto;
width: 960px;
}
I am having troubles to achieve quite an "exotic" layout which is some kind of a "nested" layout where the HEADER and Footer are actually part of the right column (or "frame"):
- Left column - Fixed,Static
- Right column - Fluid/liquid/scrollable
--- Header - fixed
--- left/main fluid/liquid
--- Right/sidebar - fixed
visually it should be something like that :
so basically the yellowish area is static, fixed and always in view.
The green frame is scrollable , and it contains the header, footer and sidebar.
I have searchd all major "css-layout-galleries" sites, but I did not encountered a solid solution yet . (most have the header at the top of the page)
My main problem is to achieve a bulletproof method that will work on ALL major OS & browsers (Firefox 3.6 - 6 , IE 6-9 , Opera , safari > Mac, Win, Linux)
Right now, (as usually expected) IE is always giving me a hard time, although in some layout experiments , also firefox is giving an unexpected different results (between Vr. 3.6 and 5 for example)
I hope someone can point me in the right direction.
This should get you close, with IE 6+ compatibility if you do something like this fiddle.
HTML:
<div class="outer">
<div class="side">
Side content. Fixed width. Floats left with a negative margin.
</div>
<div class="main">
Main content...fills the rest of the width (fluid)
</div>
</div>
CSS:
div.outer {
margin-left: 100px;
background: red;
}
div.outer div.side {
display: inline; /* for IE 6 */
float: left;
width: 90px;
margin-left: -100px;
background: yellow;
}
div.outer div.main {
min-height: 200px;
}
Have you tried something like this? (fiddle) I think that's pretty much what you need.
HTLM:
<div id="left-col">left col</div>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="sidebar">sidebar</div>
main
</div>
<div id="footer">footer</div>
</div>
CSS:
#left-col {
width: 50px;
position: fixed;
background: yellow;
left: 0;
top: 0;
}
#container {
margin-left: 50px;
background: black;
}
#header {
background: green;
}
#main {
background: blue;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 50px;
background: pink;
}
#footer {
background: red;
}
It's working in FF, Chrome and Opera in Mac. I can't test it in any Windows browser right now, so IE might be a problem here :P Anyway, in case this works, you'll still need to fix left-col's and sidebar's height to be 100% somehow. But before that, you can give this layout a try.