Edit 1
Have updated with a jsfiddle link. http://jsfiddle.net/DrFSV/
See the wavy image in the last row? I'm trying to get that move outside of #outer_middle.
Advice?
This pertains to the original link. Have removed site's link.
I have a div container named #outer_middle, and inside that, I have two other containers named #middle and #sidebar.
I am trying to have a div inside #middle go a bit outside the container ...
So, I put position:relative to #outer_middle, and position:absolute to #diy (the one with black border) coupled with left:-90px;
(as per my understanding that if you're trying to get an inside container move outside of its outside container, you need to put relative and absolute positioning like this).
It affects the sidebar (pink column) and that goes underneath #middle and the diy image goes to the left inside the container, not outside.
Why?
How can I get the #diy move to the left outside of the container?
And is it possible to do this so #diy remains in the flow as well?
Advice, please? Please let me know if my question is unclear. Thanks.
Change your #outer_top and #top to the code below. See if that's what you are trying to achieve:
#outer_top {
background-color: red;
width: 1000px;
margin: 0 auto;
}
#top {
margin: 0 0 0 -90px;
width: 500px;
background-color: pink;
height: 100px;
}
If I understand your question correctly, it seems like your #diy element is already to the left of the container, it's just not "outside", as you put it.
Try adjusting the z-index CSS property of the #diy element. Elements with greater z-index are placed "higher up" on the page than elements with a lower z-index. To be sure #diy is going to be on top, add a z-index of 99:
z-index: 99;
To the CSS.
It seems as if if you set the overflow for the #outer_middle to visible (or, just remove it) you would get the result you want.
Related
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
I have a site with absolute positioned elements on it, for example the top Navigation of the site:
#topNav
{
position: absolute;
top: 100px;
left: 50%;
height: 40px;
width: 1000px;
margin-left: -500px;
}
Now I created a sticky footer like on the following site:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Now, the problem is that the footer will "overlap" the topNav,
because the topNav is positioned absolute, which means it's "outside of the normal float of elements". The relative position will not "notice" that there is the topNav before.
Before I start creating additional "pusher divs" for each absolute positioned element I would better ask if there are better practices than "pusher divs" or should I even not use position absolute on my elements?
EDIT:
JsFiddle here: http://jsfiddle.net/dkxUX/15/
When you scale down your browserwindow you'll find #footer overlapping all elements before it.
You could just apply a 140px top margin/padding to the body or other container element which would make the topNav's height and offset accounted for.
Better yet, don't set position to absolute in this case - it appears to me that all you're doing is horizontally centering a 1000px wide div.
/*top-margin of 100px + center the element*/
#topNav {width:1000px; height:40px; margin:100px auto 0;}
Update: I see your jsfiddle now. You could account for all absolutely positioned elements when setting the margin/padding as suggested in the first paragraph You are using absolutely positioned elements when normal document flow could be relied on.
a little bit too late to give an answer but it may help someone in the future, I came up with that problem not too long ago so here was my shot at it, using jquery since I couldn't came up with a CSS solution that wasn't removing the DOCTYPE tag (which isn't something you should do, anyways).
So here it is.
$("#CONTAINERDIV").prepend("<div id='relativefix' style='position:relative;margin-top:"+($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px'></div>");
$(window).resize(function(){
$("#relativefix").css("margin-top",($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px");
});
So yeah, that's all there is to it, you just dynamically add another div at the start of the container hard-placed under the absolute div, that will force all subsequent relative divs to me placed after it, it is like a clear fix for someone who ran out of ideas.
I currently have two side-by-side divs, each set to the width of the page so that I can scroll sideways. The right-hand div needs to peek exactly 40px over into the left side so it's visible on page-load. I've managed (with a lot of help) to get that part fine - the issue now is that there is a 40px gap between the edge of the right-hand div and the edge of the page - illustrated below:
jsFiddle
Any ideas on how to get rid of it? Thanks a lot for any help. The 'peek' area has to stay exactly 40px, so using percentages seems to be an issue. Oh, and for an example of how this would look in vertical form, here's an example.
Cheers.
You're container has 200% width and is causing the expanding problem.
You need to reduce its size. It's a bit difficult because your width are in % and your negative offset is in px.
What you could do is change the offset to percentage and take that out of the container.
You will also need to use margin-left rather than left.
This works for me in chrome inspector:
#wrapper {
width: 199%; /* change here */
position: relative;
}
#right {
float: right;
width: 50%;
background-color:cyan;
position: relative;
margin-left: -1%; /* and here */
}
Fiddle: http://jsfiddle.net/hUyBq/
*Edit: * 1% is an example, you might want more. update the wrapper accordingly
*Edit: * Solution using JS: http://jsfiddle.net/bendog/wP4zb/
Could you fake it like this jsFiddle example?
I moved the scroll right block (<p>scroll right --></p>) outside of the wrapper (you didn't mention if that needed to be there). Then I applied the same color to the wrapper and added overflow:auto; to it.
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
I am not sure what to do on this one, I'm not a programmer, but trying to learn CSS as this is how the theme I am using was coded in.
I've gotten quite far on my own, but this one stumps me Its two column Theme... As far as I have been able to get, I can use the following:
#left {
width: 235px;
padding: 10px;
margin-left: 20px;
position: fixed;
line-height: 15px;
If I change the position to Absolute, The whole page scrolls, If I leave it at Fixed, and add lets say, a Twitter feed, or other type of text that takes me past its reading where you would normally scroll, Its just cut off, cannot get to it, hightlight or scroll..
I've also toyed with the idea, of changing the theme to a 3 column theme, but Again, not a programmer, and i'd be really confused. any help would be great...
My Website is at 99lessoxygen.tumblr.com, code was found from http://nigredotheme.tumblr.com
I should note, that If its on Fixed, only the right side of page can be scrolled, and left side is locked..
I believe what your looking for is overflow:auto;
You will need to remove position:fixed.
#box1 {
height:100px;
width:200px;
float:left;
overflow:auto;
}
#box2 {
height:100px;
width:200px;
float:left;
overflow:auto;
}
JSFiddle
A position of absolute will inherit an absolute position from the relative parent div.
So for instance if you have a div set to 1000 pixels and a position of relative
and then insert another div inside of that div with a position of absolute and lets say right:100px it will display on the right side of the parent div 100 pixels out from the right.
try giving both columns a height and adding this:
overflow:auto;
This makes scrollbars appear on its container if the content overflows.