Ok so I have a website and the entire thing is wrapped in a container. This container is centered with margin:auto. I would like to float a piece of content to the right of this centered container and have it sort of stick to the side of it no matter if the user resizes the browser window, etc. I'm wondering if there's a real simple way to do this rather than adding another huge div, giving it width and floating the centered portion to the left and the piece of content to the right. Thanks!
Piggybacking on #NickAllen, you want to use absolute positioning so that the width of the sidebar isn't included in the centering on the primary container.
#container {
position: relative;
width: 500px;
border: 1px solid #f00;
margin: 0px auto;
}
#sidebar {
position: absolute;
width: 200px;
right: -200px;
border: 1px solid #0f0;
}
<div id="container">
<div id="sidebar">
[ sidebar content ]<br>
[ sidebar content ]<br>
</div>
[content]<br>
[content]<br>
[content]<br>
</div>
Maybe I'm misunderstanding your question, but isn't this what you want:
#container {
width: 960px;
margin: 0px auto;
}
#sidebar {
float: right;
}
<div id="container">
<div id="sidebar">
some content
</div>
</div>
Give the container div the property position: relative; place your floating div as the first child of the container div and give it
#floatingDiv
{
position: absolute;
top: 0;
right: -{widthOfFloatedDiv};
}
I think that will work, but untested
Okay so tested it and it works
<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
<div style="position: absolute; top: 0; right: -200px; width: 200px;">
<p>Floated DIV</p>
</div>
<p>container div</p>
</div>
Old question, but contributing since other answers were kinda lacking that "something" and it's still on top of Google. The simplest, cleanest way to achieve this is with two wrappers.
<div class="bigWrapper">
<div class="sidebar">Hello, I'm your sidebar</div>
<div class="smallWrapper">
Put the thing you want to center here.
</div>
</div>
With the following css:
.bigWrapper {
width: 1000px;
height: auto;
margin: auto;
}
.smallWrapper {
width: 500px;
height: auto;
margin: auto;
}
.sidebar {
width: 250px;
float: left;
height: auto;
}
Floating is the way to go for this. They will always stick together, unless the container is smaller than the sum of their widths.
Tip: make sure your container is wide enough to hold both inner divs; if not, and the user has a narrower window, they will show one below the other.
Related
I have a series of divs with z-index:20 (this is a must be for visual styling reasons), but inside one of them, I have a datepicker which stands as position:absolute floating above everything. I've assigned z-index: 1000 as a great value in order to achieve this.
I discovered the inner z-index this doesn't work because of the parent container. Is there such a hack to workaround this ?
The parent container must have such z-index in order to be above a sibling div, but the datepicker, which is inside one of the boxes, must be on top of everything, and now it is hiding under the next box.
This is the codepen with an actual example: http://codepen.io/anon/pen/jWZMPw
The problem is that .box creates a stacking context because it's a positioned element with non-auto z-index.
Don't do that. Remove
.box {
z-index: 20;
}
.banner {
padding: 10px;
background: #454545;
position: fixed;
width: 100%;
}
.box {
position: relative;
float: left;
margin-left: 20px;
min-width: 100px;
min-height: 100px;
border: 1px solid #999;
padding: 20px;
background: #45e;
}
.box:first-child {
margin-left: 0;
}
.dtpicker {
background-color: #34ed22;
padding: 20px;
min-width: 100px;
min-height: 100px;
position: absolute;
left: 50px;
z-index: 50;
}
<div class="banner">
Something behind
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
<div class="dtpicker">
Dt picker
</div>
</div>
<div class="box" >
Box
</div>
I recommend reading What No One Told You About Z-Index.
To keep it short here's the example of the problem.
http://jsfiddle.net/2KTFG/1101/
see the first paragraph dissappears behind the header
html
<div id='header'>
<div id="div_1">
<p>hello</p>
</div>
<div id= "div_2">
<p>hello</p>
</div>
</div>
<div id='body'><p>why this goes behing previous div?</p>
<p>why this goes behing previous div?</p>
<p>why this goes behing previous div?</p>
</div>
css:
#header {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background: green;
}
#div_1 {
margin: 0 auto;
}
#div_2 {
margin: 0 auto;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }
thanks in advance
Because you set the margin of your body to 30 and the height of the header to 50px.
Because the #body (margin-top:30px) is not enough to clear the header. Increase the margin value to push the first paragraph down.
I hope this helps
Giving something position:fixed; will cause that element to be fixed to wherever you place it in the browser. Since your paragraph div doesn't have any position styles, the header will be placed on top of it.
If you give each element position: relative; they will stack on top of each other.
#header {
position: relative;
top: 0px;
height: 50px;
width: 100%;
background: green;}
#body{ height: 3000px; overflow: auto;position:relative; }
Example in fiddle.
I have two divs, both are floating left. "Left" div would be left column of the page. "Right" div would be the main content.
HTML:
<div id="wrapper">
<div id="content">
<div id="left">
</div>
<div id="right">
</div>
<div id="docked_div">
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 250px;
background: red;
}
#right {
float: left;
background: blue;
}
This works fine. Now I have the third div named docked_div. This div should be outside the wrapper and on the right side of right div (about 20px from top of right div).
So, the black div now is on the left side, but it should be on the right side and outside the wrapper.
I have tried to set position to relative or absolute in different ways, but I cannot get
the result I want. I do not have much CSS knowledge on creating layout, so, I would appreciate any suggestions and guidance.
Here is the full example:
http://jsfiddle.net/TA7Rh/
I think this will work
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
position: relative;
}
#docked_div {
/*background: url(../images/mazais_fons.png);*/
background-size: 100%;
width: 53px;
height: 212px;
position: absolute;
right:-60px;
}
jsFiddle Link
change the right position as per your requirement.
Try this.
#docked_div {
background-size: 100% auto;
height: 212px;
position: absolute;
right: 0;
width: 53px;
}
This will take the div to be on the right of the main div. Hope this helps.
Hello
please have a look at my jsfiddle.
The content of the inner div-element is scrollable.
Each grey symbol has a margin-left. When I scroll the content the symbols shouldn't be fixed to the background.
It should be scrollable with the position.
Have you got an idea how I achieve that effect?
Keep in mind that positioning is relative to the closest positioned parent.
When you are assigning an absolute position to the "symb" class you are positioning them relative to the document rather than their parent.
Simply adding "position: relative;" to your div.tl element will set the parent div as positioned without moving it and the "symb" elements will act the way I think you expect them to.
Your new .tl definition should be:
.tl {
width: 500x;
height: 80px;
background-color:grey;
position: relative;
}
Furthermore, I'm assuming that you have some need to position these absolutely. You could achieve similar results by simply removing the "position: absolute" portion of your .symb definition.
You are setting a margin, not a position, so you don't need to bother with positioning at all in your example case.
I am not sure what do you need. You had an error in your last "symb" - you missed 'p' in 'px'. Try this?
<div class ="outer">
<div class="inner">
<div class="tl">
<div class="box" style="width: 315px;">
<div class="symb" style="margin-left: 0px;"></div>
<div class="symb" style="margin-left: 15px;"></div>
<div class="symb" style="margin-left: 20px;"></div>
</div>
</div>
</div>
</div>
.outer {
width:50%;
}
.inner {
overflow-x:scroll;
}
.tl {
width: 500x;
height: 80px;
background-color:grey;
}
.box {
float: left;
height: 61px;
}
.box .symb {
float:left;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}
Use
position: relative;
Not
position: absolute;
Just try with the following CSS:
.box .symb {
position: relative;
float: left;
position: inline-block;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}
There is parent-block:
#content
{
position: relative;
width: 92%;
margin: 0 auto;
height: 100%;
min-height: 500px;
border: 1px solid red;
}
And I need 2 blocks in it:
#news
{
position: relative;
float: left;
min-height: 400px;
width: 290px;
height: 100%;
}
#text
{
position: relative;
float: left;
margin-left: 20px;
min-height: 400px;
width: 625px;
height: 100%;
}
<div id="content">
<div id="news">
...
</div>
<div id="text">
...
</div>
</div>
But 2nd text block isn't in one line with news. And, after resizing news and text block, content block should resize too, but it doesn't... Why?
It's because both the divs inside #content are floated, taking them out of the normal document flow. On #content, change height: 100%; to overflow: hidden; - this should make it accomodate the floated elements inside it.
You may need to add:
display:inline;
to the divs.
Also, double check that there is enough space in the parent div. Each browser calculates this differently. That is, for the two divs to appear side by side there must be enough space to account for their widths and margins etc.