i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.
Related
I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.
So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.
It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/
I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.
I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?
Try adding other elements to this HTML and enjoy the horror :D
There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).
You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/
So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.
position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.
If you have content below a collapsed div, it will flow up and over/under that content like this.
You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.
DEMO
Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.
body {
padding: 0;
margin: 0;
}
#main_content {
//remove position: absolute;
margin-top:70px; //top: 70px won't work unless you specify position
}
It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.
I'm developing a mobile website that integrates horizontal swiping. Unfortunately this has created a headache when trying to get the rest of my website layout to work.
http://jsfiddle.net/N7eWS/4/ - try resizing your browser window fairly small and you'll see the #footer (red) halfway down the content inside #wrapper (green). This appears to be todo with setting height:100% on most of the elements and then the absolute positioning applied to the horizontal swiping div (swipeview-masterpage-1).
I want it so that #wrapper expands to the height of the content, the #footer sits underneath #wrapper and is always off the bottom of the screen (you should have to scroll to see it).
Is there anyway I can make this work without touching (or perhaps making minor changes to) the swipeview divs? Any ideas would be appreciated!
One of the problems is the position: absolute on #swipeview-masterpage-1 and then another absolute on the parent. Parent absolute elements will not expand to the height of any absolutely positioned children (example).
You also have a random <span> in the mix, which is an inline element and will have a height of 0 anyway. Remove that to make things clearer.
Now to why your footer is appearing in a strange way. Your #wrapper will always be 100% of the parent height, your footer will always exist at 100px (header) + 100%. Disable the min-height property and you will see the wrapper collapse, and the footer sit at 100px. That's why the #wrapper content overlaps the footer.
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.