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.
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 have created a page that has a min-height of 100% with a footer, as outlined http://peterned.home.xs4all.nl/examples/csslayout1.html
It works for the page-filling div, but I would like to have elements inside it which also take up all the height available to them.
Attempts:
Adding height: 100% to them does not work. They will use the parent's height but there are other elements and padding etc so that's the wrong height.
Making them absolute and set top: 0px; bottom: 0px;. This will make the div fill up the entire height, but if content is added the div doesn't get higher.
If this explanation is unclear, I have an example here: http://markv.nl/stack/quine.php
So the parent dictates a minimum height, as does the content. The highest of them should be selected. I've found this a formidable challenge; is it possible without javascript?
Thanks in advance!
It is possible without javascript. But you should not use absolute positioning with this problem. Use this solution to have footer stick to the bottom of the page. And make content div min-height: 100%. With more content it expand and push the footer down and with little content footer will be at the bottom of the page and content div will be pushed up to the footer.
After a lot of fiddling, I am quite confident that what I want to do is impossible. Correct me if I'm wrong.
In my case, it turned out a fix was possible. I used the position: absolute to create the background pattern. Above that, I added the content in a width:100% div to make the page scale.
It'll only work for some applications, but I think a general solution is not possible.
I have a page where the content is floated in the center so that in any browser size, the content div will always be smack bang in the middle.
Now, I've gone ahead and added a sticky footer to the page, however when the browser window is smaller than expected, the footer displays in front of the floated content.
I am not exactly up to speed with how clearing floats works or exactly how absolute positioning affects relative positioning. I am aware that once I make the footer absolute, it becomes independent of all the other divs, which is naturally not what I want, but this is where I am getting stuck.
My question is, how can I make the sticky footer display at the bottom of the page, but stay under (by under I mean below) the floated content if the height of the browser screen is smaller.
Here is an example of my current code: http://jsfiddle.net/ySru9/1/
I have taken the sticky footer code from here: http://www.cssstickyfooter.com/style.css and here http://ryanfait.com/sticky-footer/layout.css
I’m sorry if this is a repeat of another question on SO, but I have trawled through and couldn’t exactly find anything the same. I assume that there is some yucky jquery stuff that I need to delve into?
If you make the footer positioned absolute in your body, but make sure the body has some minimal height greater than your yellow container, this could work:
http://jsfiddle.net/willemvb/PZHvH/
try using:
#container
{
margin: 0 0 0 -100px;
position: relative;
}
Check this fiddle:
http://jsfiddle.net/ySru9/39/
I have experienced a frustrating and interesting problem.
The design I am working on is based around a 100% height layout.
A site page always has an image.
Which can only ever be 800px in height.
A max-height of 100% is set on this image.
The results in a site that works nicely on large monitors, but on smaller screens the images will adjust meaning the site always fits nicely.
-
Because the site uses a horizontal scroll, I am making use of a position: fixed, on the #footer nav, to position the navigation in the bottom right.
However, when the screen has a height greater than 800px, this footer #nav remains in the bottom right corner.
I am trying to find a solution that would allow this fixed element, to be fixed, relative to the height of the container div. Meaning the navigation is always 1em above the bottom of the site layout.
-
You can see the site here - http://eastat1003.dev.voodoobytes.net/artists/bukanova/art-direction/idol-magazine-the-selected-ones/
-
Edited 17th May 2012 - Site now live! http://www.eastatheart.com/
Ok, got what you are after, took me a few mins!
I haven't got time to check this now, but it should (hopefully) work.
Create a container element, set to position fixed. Position that to the top right of the screen. Set the width to 0 and height to 100%. Also set a min-height of 800px.
Now, put your nav in there set to position absolute. Then set that to bottom 1em right 0.
That should work, I think...
Hope that helps :)
I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.
I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.
Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/
In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.
I've tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.
Any help is much appreciated!
P.S. Stackoverflow's tag helper seems to be down at the moment, so I'm placing this under css for now since I can't think of any others.
One method is to wrap everything in a new div:
#container {
overflow-x: hidden;
min-width: 400px
}
See: http://jsfiddle.net/thirtydot/rxje6/1/