example
I know this will be really simple but I'm stuck sorry.
I have a centered page with a width (the grey area in my example) and I want to have block behind it that is full width (the red area in my example).
The page needs to have a slight margin at the top to show the block behind it.
How can I have a full with block and have a page positioned on top.
I have it looking something like I want but thats with negative margin on the page area
You can use position absolute. But dont work with pixels. It is bad idea for mobile devices.
These code aligns div to center.
left:50%;
transform:translate(-50%,0);
.top{
width:100%;
height:100px;
background:red;
}
.inline-class{
height:200px;
width:90%;
background:grey;
position:absolute;
top:50px;
left:50%;
transform:translate(-50%,0);
}
<div class="top">
</div>
<div class="inline-class">İnline Class</div>
You could use position: absolute to position one element over another.
.page {
position: absolute;
left: 5%;
top: 50px;
}
position: absolute positions your element relative to it's first ancestor, so it basically ignores the position of it's siblings.
Related
I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.
The whole css:
#content{
width:100%;
height:100%;
background:grey;
}
#left-panel{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
overflow-y:auto;
}
Can somebody help me fixing this with pure CSS?
Fiddle: http://jsfiddle.net/a2wn8x5z/1/
Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).
So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:
Scrollbar Fixer
perhaps your problem is in this code here
<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>
remove the width:110%; and it should be good to go.
Here's the Updated Fiddle
Edit
I think I misunderstand what's the problem before.
Because on your case, you use position: fixed; for #wrapper and #left-panel, and both use stlye left: 0, their position will overlap each other in left from the viewport, you basically need to position the left of #wrapper not to be in the same position as #left-panel, so you need to add this to #wrapper
left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;
and remove
width:100%;
here's the Updated Fiddle
to make sure it's what you want, try change the style of the div inside #content to width:200%; and add margin:20px;
Edit Two
the cause for the scrollbar to overlap each other is because in the fiddle you use position: fixed for the #wrapper, thus will not create a scrollbar in the body, then you add overflow:auto in the #wrapper, causing the scrollbar to be created for the #wrapper and not the body, so you need to change the CSS for #wrapper to this
#wrapper{
background:gray;
}
I don't include the height because for the div, the height is based on the child inside it, so you couldn't see the gray background, except you add some padding to it.
here's the Working Fiddle
First of all, you don't have to add "position: static;" style into your div, because it's static by default. There are two ways to solve your problem:
Add "position: relative;" into #content selector and declare #content after #left-panel in your HTML.
<div id="left-panel"></div>
<div id="content"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
}
Codepen: http://codepen.io/anon/pen/yoHxl
Or add "position: relative; z-index: 1" (z-index of #content should be higher of #left-panel's) into #content selector.
<div id="content"></div>
<div id="left-panel"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
z-index: 1;
}
Codepen: http://codepen.io/anon/pen/HgwDx
Best,
Marek
All:
Thanks for help.
The html structure is like:
<div id="container" style="position:relative; top:100px; left:100px; width:200px; height:300px; overflow: auto;">
<div id="absoluteinner" style="position:absolute; top:10px; left:10px; width:100px; height:100px; background-color:red;">
</div>
<div id="staticinner" style="width:100px; height:800px; background-color:purple;">
</div>
</div>
I thought that absoluteinner can keep a fixed position relative to its container, but when I scroll the container, the absoluteinner moves as the staticinner. How can I make it position fixed?
Look at the jsfiddle I created for you. Just give it position fixed, if you don't set top and left explicit, it will inherit for the parent, making it fixed for the parent and not for the window. So look at the css I wrote.
Remember if you set explicit top and left offset it will be referenced to the window, but if you make this trick, inherit from the parent and instead of using top and left you use margin-top and margin-left you will have your element fixed to the parent element and the offset given by the margin.
http://jsfiddle.net/carloscalla/q6ffnm09/
body{
margin: 0;
}
#absoluteinner{
position: fixed;
margin-top: 10px;
margin-left: 10px;
top: inherit;
left: inherit;
}
NOTE: margin: 0; of body is just to correct the margin given by the jsfiddle.
UPDATE: What you want to achieve can not be done with the html structure you have right now. You will have to wrap up your container in another div and inside this div put your #absoluteinner so #absoluteinner and #container are siblings. Then you give the parent position: relative; , and your #absoluteinner position: absolute; , but #absoluteinner does not get into the #container scroll, they are separated but you simulate that they are one inside of the other one.
I created an extra #outter-container so you see another scroll and you see that #absoluteinner is "fixed" to #container.
If you use position fixed you will not be able to achieve this since position fixed takes the element out of flow, you can get that working for the basic scenario as the first answer I gave you but not for what you want to do if you want to insert this piece of html inside another containers.
Take a look at this jsfiddle I created for you: http://jsfiddle.net/carloscalla/gwphpfgy/4/
See the
<div id="container-wrapper" ...
this wraps up your container so you simulate a position fixed but this works inside other containers as well, as this sticks to the wrapper. Note the z-index: 1; just because it was going behind the purple box, you can avoid this by reordering the html structure but this is not a big deal.
I'm not quite sure wether i understood your question correctly, but I think, you can make its position:fixed and use margin to push it into the container.
Place absoluteinner inside of another position:absolute div and change absoluteinner'sposition to fixed. Then style the outer div with the position you want, relative to the parent, not the page. Do not put any position on the fixed element.
<div id="container" style="position:relative; width:200px; height:300px; overflow: auto;">
<div style="position:absolute; top:10px; left:10px; width: 100px;">
<div id="absoluteinner" style="position:fixed; width:100px; height:100px; background-color:red;"></div>
</div>
<div id="staticinner" style="width:100px; height:800px; background-color:purple;"></div>
</div>
JSFiddle
I have two floated div in a wrapper. They are left and right. I wanted to make the right div to appear at the top of first div(left). Right should come first and left should come at second.
Here is the code
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
CSS
#left{
float:right;
}
#right{
float:left;
width:100%;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I'm looking to have the same 100% as width for right div. Is this possible without changing markup and doing changes in CSS alone?
JSFIDDLE
EDITED
I want the right div to be in top and left should in bottom after that. When i use position absolute for the right div then left div is hidden. JSFIDDLE.
Should look like this
Use the following css :
#left{
float:right;
border: 1px solid black;
}
#right{
float:left;
position: absolute;
top: 0px;
}
#wrapper{
width:100px;
background-color: #000fff;
}
If you want place the right div before left, just remove the float:left property from #right.
Fiddle
If you want the right DIV above the left, you need to use absolute position
First of all clear the float, then set position:relative to the parent "wrapper" and position:absolute; to the right div.
Check out this fiddle
If you want to do this with just css you have to use absolute positioning. But only if you know height of each element and exact number of elements like this. Check this fiddle.
Let's assume each element has 20px height, then you can place one at top: 0px and second at top:20px. And to use remaning space like usual relative way, you must add padding equals to total height of your elements that has absolute positioning to wrapper.
Alternatively you can use JavaScript to change order in html.
I'm not too convinced by the answers so far. I would recommend avoiding 'absolute' and even javascript. Also if you want to make it friendly to all browsers you should really be specifying things such as height. It's a common misconception that a design can't be worked on every modern browser without huge hacks (i was doing it years ago for IE5.5 and firefox etc), its usually due to the CSS not being properly formed and valid. Now try the following:
#left, #right {position:relative; float:left; height:30px; color:white; width:inherit; }
#left{
background-color:blue;
margin-top:30px;
}
#right{
background-color:green;
margin-left:-100%;
margin-top:0;
}
#wrapper{
width:100px;
background-color: #000fff;
}
How should children with position: relative behave inside of a parent that has position: absolute?
For example (JSFiddle):
<div style="position:relative; float:left; min-width:900px; max-width: 1400px; height:100%;">
<div style="position:absolute; top:0; right:0; width:200px; height:300px;">
<div style="position:relative; top:0; left:0; width:500px; height:100%;"></div>
</div>
</div>
When I shrink the browser window below the max-width the inner div moves outside of its parent element. Is that normal behavior?
Try changing a few things. First, give your first div an actual height rather than just 100%. Second, try making the child element fit within its parent. Right now it's a 500px div inside a 200px div. It might be better positioned outside the parent for this specific task.
Taken from : http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Relative [...] What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. [...]
This is a snippet of the code
<div id="container">
<article>
<p>contents</p>
<img ... />
<footer>meta data</footer>
</article
</div>
#container{
width:960px;
}
article{
width:640px;
}
footer, img{
width:960px; /*well I may want it 640px but float right all the way back to the edge of #container*/
}
The footer and image do not take that width; I tried the position:absolute and it works, but they go to the top, even when I add position: relative to the container.
Normally I would close the article tag, add the image, and then start with the article. This is not an ideal solution.
First thing is that they need to be block or inline-block to accept a width. Floats could cause weird wrapping. You could try overflow: visible to see if it helps.
You are on the right track with positioning. You want to set the container to relative and then the inner element set to absolute, pinned to the top right corner:
#container{ width:960px; position: relative; }
img, footer{ width:960px; position: absolute; right: 0px; top: 0px;}
An absolute positioned element is relative to its first positioned ancestor, so the inner element is positioned based on #container.