I can't work out how to stop an absolutely positioned element at a particular point.
On this page you will see the words "Get me on your team" these words and the robot are absolutely positioned so they are always hard right on the screen. What I am trying to do is when the screen is re-sized to become more narrow I want to stop it overlapping the mac image. I have tried adding margin-left: 900px; but it has no effect when making the screen smaller. Does anybody know how to stop the words and robot at a particular point when making the browser more narrow?
I think you want to set a min-width on the containing element.
body {
min-width: 1024px;
position: relative;
}
also set position relative so that the robot is positioned absolute to the body in stead of to the window.
Related
This is the page I'm working on: http://www.vqinteractive.net/temp/index.html
I need the nav side bar and the main content area to evenly stretch to the bottom of the browser (or beyond, with content), whether they be empty or one has more content that the other. I put a border on the surrounding container and that is not stretching either. I'm pretty new to fluid grids and I'm finding all the old tricks, like position: absolute with height: 100%; are blowing out the grid system and height: 100%; alone does nothing.
I've been hunting through threads for the answer but haven't been able to find anything that pertains to responsive design. Also keeping in mind it is set up so the when the content is longer than the browser, the pic on the right stays fixed while the left side scrolls. Any help would be greatly appreciated.
Thanks in advance!
Visually, this is what I'm trying to do, with or without content, scrolling with:
http://www.vqinteractive.net/temp/images/example.gif
I fiddled around with the Google Chrome object inspector, and found this to work pretty well:
#media screen and (min-width: 1241px)
#main {
min-height: 85%; // <---- REMOVE
min-height: 600px; // <---- INSERT
}
The image does not count as content for the box you have set to a min-height=85%, and that box will therefore not expand without a definite min-height. Setting 'min-height: 600px', the box will always be at least the size of the image, and then expand if you add additional content in the box.
I am trying to position an element on my page but would like it to be positioned both relatively and absolutely (stay with me, I know that doesn't make sense).
What I really want is a way of positioning this element that takes a hybrid of functionality from both the relative and absolute positioning.
So in my case I want this element to be positioned say 10px higher than its initial position, for this relative works fine, but we get a nasty white space where it should have been. So as-well as moving it up 10px relatively I would also like it to come off the page like an element that has been absolutely positioned.
Now before you say "just use absolute and position it there" I have quite a large page and by positioning something like this I would use huge number that would be thrown way out if the screen size changes.
So, to summarize I want to place this relative to its original position but also pull it off the page like absolute positioning, is this possible?
Perhaps this'll help?
#myElem {
position: relative;
top: -10px;
margin-bottom: -10px;
}
This'll move the element 10px up, and also move its lower border 10px up, eliminating the space below it.
I am building a responsive login page where everything has % widths. When I add a margin:0 auto, my main div is perfectly centered (as it should be), however when I shrink the browser size horizontally, I always lose the right margin or padding, regardless if it's set with a % or not. Padding on right is cut off at smaller screen size Here is a screenshot demonstrating the padding on the right getting cut off.
How can I force the margin or padding to always be honored regardless of the screen size?
==== UPDATE ====
I apologize for using the word "responsive" in this question. I do, in fact have media queries at different browser sizes for adaptive behavior, but my question is more simplistic than that. Before any media queries kick in, the right margin disappears when the browser shrinks. Something in my containing element must be throwing off the liquidity of the page. I cannot seem to figure out what this is. Any help is appreciated.
Here's a link to the code
I think this will do based on the code you have right now:
.am-body {
background: url("../img/body-bg.png") repeat-x left top #ededed;/*is being overwritten*/
text-align: center;
position: relative;
margin: 0 auto;
}
For a live demo, visit my website # http://hello-world.cu.cc .
Make sure to check out the homepage, the projects page and the comments page. Each of these pages has the same sidebar with different styles applied to it. This is to show you what I have tried and the problems it causes.
I am making a website which has a sidebar to the left and the main content to the right. The problem i'm having is to do with the sidebar. I have it floating to the left and this is fine untill i zoom in on the webpage and all of a sudden the sidebar moves position which wrecks up the whole layout. I've tried to fix this by setting the position of the sidebar to absolute and the position of the container to relative. Now this solves the zooming problem because when I zoom in now it stays in the same position. However, since the position is now absolute, the page doesn't automatically get longer to accomodate the sidebar. The temporary solution I am using at the moment is to position the sidebar absolutely to fix the zooming problem and then adding a max height as well as overflow:auto to provide scroll bars that can be used to scroll the sidebar.
You have two things that seem to be causing problems.
#header has min-width:100%
#main has width:1100px
Fix those and you'll be on your way.
Like Randy Hunt pointed out above, the biggest issue is being caused by your #header. I would apply these to your header: position: absolute; left: 0px; top: 0px;, then you'll need to adjust all the elements where you're currently using a negative margin by applying a positive margin as well. Take the 150px height of your header and add the negative margins to find the new positive margin value (so a -138px top margin would become 12px).
Also, instead of min-width: 100%; I would do something like width: 100%; min-width: 1100px; or whatever the width is.
Hope that helps.
I'm looking for a way to force floated or absolutely positioned elements to stay in the flow in css. I'm pretty much thinking css is stupid for not having something like flow:on flow:off to keep it in the flow or take it out.
The issue is that I want to have a div element with a variable height, I have a floated image on the left in the div, and I want the div to be at least the height of the picture. I also want it to be at least big enough to hold all the text that IS in the flow (this obviously isn't a problem).
I need the picture to be able to vary in size. I am currently using a jQuery solution, but its acting up. Since I don't feel like debugging, and I feel like there should be some kind of CSS solution, i'm asking.
Anyone know how I can do this?
I usually go with overflow: hidden or overflow: auto.
Instead of using a new element to clear the div at the end, you can add this onto the absolute div css;
overflow: auto;
Obviously IE likes to play differently so you need to supply a width to it too. I am assuming the absolute div has a set width... so you can just set it to that width.
.abs-div {
position: absolute;
overflow: auto;
width: 160px; /* Replace with your width */
}
A hack that may work in your situation is to add another element inside your div after the rest of the content that has the CSS clear property set to "both" (or left, since your image is on the left). eg:
<br style="clear: both" />
This will force the element below the floated elements, which will stretch the containing div.