I want to place a div fixed on the left and near I want to place other div.
Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.
Now I have the following code:
<div id="container">
<div id=fixed-menu>
</div>
<div id="content">
</div>
</div>
#fixed-menu {
position:fixed;
background: #fff;
padding: 10px;
top:60px;
left: 10px;
width:300px;
max-width: 300px;
}
#content {
background: #fff;
padding-top: 10px;
}
In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.
If I use margin-left in #content the error is solved, but I don't want use that, any other solution?
Thanks.
One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.
Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.
If you look at this fiddle: http://jsfiddle.net/f38aj/
css:
#container {
position: relative;
height: 700px;
padding: 0 0 0 320px;
}
#fixed-menu {
position: fixed;
background: red;
padding: 10px;
top:8px;
left: 8px;
width: 300px;
max-width: 300px;
}
#content {
background: blue;
padding-top: 10px;
}
If you notice we create padding in the container, where we end up overlaying the div#container object.
we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.
A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.
hope that helps.
Related
I have a very teasing issue. I have a div positioned absolutely to a point. But when i resize the window, it is moved to other place and not pointed towards where i set it before. How can i resolve this problem?
Here is my HTML -
<div style="position:relative;">
<div id="intro_message">
content
</div>
</div>
And the CSS for "intro_message" div -
#intro_message
{
position: absolute;
left: 322px;
top: 0;
padding: 20px;
width: 505px;
}
You can clearly see even i used relative position to its parent it still doesn't work for me.
EDIT -
Here from 'clearly see..." means if i would have not tell that i used relative positioning then everyone here would suggest me to use it. Therefore i told you all in advance.
EDIT 2 -
#David - After reading you solution, i understood it, actually i had to do one little but crucial change in my css. Now, i have following css for my main container div -
margin: auto;
position: relative;
width: 505px;
and for the inner div #intro_message i have changed some values to position it fine -
#intro_message
{
position: absolute;
left: -137px;
top: -4px;
padding: 20px;
width: 505px;
}
Now it is placed nicely pointing towards a link where i wanted it to be. On resize it still well, but when i go on resizing it is moved again -
on full window by default -
on resize - issue arises again -
So how to solve it?
I assume that you do not actually want the div to be fixed to a coordinate point, because that is what absolute positioning relative to the window does: resizing the page will move everything but the div. So you must want it to be fixed relative to the document.
Though you mentioned you tried relative positioning and it didn't work for you, that is actually the answer to this problem. You used it incorrectly.
Let me explain:
Divs naturally fill the entire width of their parent containers, so placing your absolutely positioned element inside a plain div essentially did nothing. In order for it to matter, you need to have the parent container be in the right spot. I would assume that your parent container would probably be centered inside your page and be a fixed width.
To do this, you can create your div and assign a width and automatic margins to center it:
div[c]{
width: 400px;
margin: auto;
}
As you can see in the following fiddle, both the div positioned relative to the window and the div positioned relative to the yellow div end up in the same place because the div has the full width of the page, but the div positioned relative to the blue div is moved where it should be and will stay there if you resize the page.
JSFiddle
Just use this css:
<style type="text/css">
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 4%;
width: 505px;
}
</style>
In CSS
.contains{
position:relative;
margin:0 auto;
width:900px;//or whatever you want
}
Html:
<div class="contains">
<div id="intro_message">
you are not clearly define your problem so i assume that you have problem in left postion.
I think when you are resize the window inner div will be plot left will be change according to you.
There is no problem regarding to position but your logic was not cleared.
if you want left inner div perfectly than use "percentage" rather than "pixel"
example:
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 20px;
width: 505px;
}
I'm running into a minor issue with one of the elements on my page. I have a sidebar which I am attempting to have span the height of the page by using the following CSS:
#sidebar {
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
float: left;
background: #eee;
color: #666;
}
The corresponding CSS is pretty much what you'd expect:
<div id="header">
The header which takes up 50px in height
</div>
<div id="main-container">
<div id="sidebar">
The sidebar in question
</div>
<div id="main-content">
The rest of my page
</div>
</div>
The code works as expected for the most part. When the page renders it spans 100% of the height (minus the 50px from the top). The problem is that it essentially assigns the box to the exact height of the window so as I scroll down the box scrolls away instead of staying locked to the bottom of the window. Any ideas how to resolve this?
You have to use position:fixed if you want for the sidebar to be fixed on some position:
#sidebar {
width: 180px;
padding: 10px;
position: fixed;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Another way would be to give to the parent container position:relative, and on his child position:absolute - but then the parent must have some height so the child element takes its height.
html,body{
position:relative;
height:100%; /* some height */
}
#sidebar{
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Check learnlayout to read more about positioning.
use css position:fixed to make the sidebar fixed.
in order to lock the height according to screen height i would use javascript/jquery:
$(function(){
// assign to resize
$(window).resize(set_height);
});
function set_height() {
$('#sidebar_id').height($(window).height());
}
hope that helps
First of all, I don't understand how it's spanning 100% of the height when no height has been defined.
Secondly use position: fixed instead of absolute.
On a second note, I'd like to recommend what seems a more proper way of going about positioning this. At the end of the main-container div, before it's closing tag, put this
<div style="clear: both;"></div>
and make the main container also float left, or float right if that doesnt give you what you want. It's suprising how such a common layout can feel tricky to do properly. (at least for newbies like us). I might be wrong, this might not be a better way, but it's the way I'd do it. The extra div you add is so that floated divs take up space, apart from that if it doesn't work, give the sidebar a height of 100%, or if you think it will overflow, tell me I'll add to my answer.
I am playing around to make an HTML/CSS carousel.
HTML:
<body>
<div id="container">
<div id="wrapper">
<div id="d1" class="box"><p>DIV#1</p></div>
<div id="d2" class="box"><p>DIV#2</p></div>
<div id="d3" class="box"><p>DIV#3</p></div>
<div id="d4" class="box"><p>DIV#4</p></div>
</div>
</div>
</body>
CSS:
.box {
height: 100px;
width: 100px;
margin: 15px;
border: 2px solid black;
color: black;
float: left;
}
#container {
width: 150px;
height: 144px;
overflow: hidden;
border: 2px solid black;
}
#wrapper {
height: 140px;
width: 555px;
border: 2px solid green;
position: relative;
left: 0px;
}
#d1 {
background-color: blue;
}
#d2 {
background-color: red;
}
#d3 {
background-color: green;
}
#d4 {
background-color: yellow;
}
Here's the fiddle: http://jsfiddle.net/97jhB/.
I intend to add javascript controls and provisions for left/right buttons later.
First, I just want to learn conceptually how it works.
I am trying to get the carousel 'effect' by playing with the wrapper's left.
If I go on decreasing the wrapper's left, I will be able to see the boxes successively.
I have a couple of questions:
If I don't set the wrapper's position to relative, changes made to it's left do not take effect. Why is that so? Isn't the wrapper supposed to be relative by default?
If I play around with the wrapper's margin-left instead of left, it seems to work as desired.
What is better between these two approaches: playing with left or playing with margin-left?
Because only relative, absolute and fixed positioning use left, right, top, and bottom to define their locations relative to the current context they are in.
Fixed is relative to the viewport, absolute is taken out of the normal page flow and relative to the first parent with a CSS position set on it, and relative is just relative to the nearest block-level ancestor.
static is the default position and uses margin-left, margin-right, etc to position the element relative to other elements in the page flow, within the nearest block-level ancestor.
Also, be aware that position:fixed does not work as expected on older mobile devices.
MDN has great documentation on this subject.
When you assign the position:relative CSS declaration to a div, you're not actually moving the space it takes up on the page, just where it is displayed.
However the default position is static for any html element if not specified explicitly.
position: static;
Check out this link on SO for a very complete explanation of the margin-left v/s left difference
Difference between margin-left and left
Static is the default, and the best thing to do is to have the wrapper relative and the items absolute, this way overflowing items won't go to the bottom (~ won't create new lines)... You'll have to remove float:left if you want to follow this path.
It's probably better to use left (or right if RTL), what if you want some margin between that your carousel slides, think of the scenario where you have more than one visible item.
Now after several hours, I am still stuck at this problem; I am trying to make this box relatively positioned so that the results do not overlap my footer. I tried to achieve this via javascript and that did not work and now I am not sure how to make this relatively aligned.
Here is the jsfiddle: http://jsfiddle.net/Lp2kV/1/
I am sure the problem can be solved if I change content from absolute to relative but after that I am not able to align it the same way as now.
This is the part, where I think I need to edit positioning.
.content {
position: absolute;
top: 28px;
left: 0;
background: #eee;
right: 81px;
min-height: 200px;
padding: 20px;
border: 1px solid #ccc;
height:auto;
}
If you only want the result contents to be contained inside the DIV area and have a scrollbar at the right side, you can add the following property inside your .content selector. This is if you want the height to stay the same.
overflow: auto;
But if you want the height to be flexible, then you should implement this approach..
First, remove the height property.
<div id="results_1">
<div style="clear: left; height: 0; margin: 0; padding: 0;">
will become
<div id="results_1">
<div style="clear: left; margin: 0; padding: 0;">
Before the closing tag of <div class="content">, you should add <div style="clear: both;"></div>. This will automatically expand the gray container height depending on content.
Maybe what you'll have to do next is have a javascript code to compute height of the contents box then adjust the top margin of your footer via javascript so they won't overlap.
I highly suggest just use a jquery plugin instead to create a tabbed box and disregard my solutions. This will solve your positioning problems. The only way you were able to overlap .content boxes is because they are absolutely positioned.. and absolute positioned elements do not add up to the size of their parents. So the moment you change absolute to relative, the tabs will scatter because each tab will expand to the size of their child elements. You can't achieve tabbed boxes and not overlap the footer with your current approach, unless you use javascript, or apply overflow: auto; on the .content selector.
Hope this helps.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */