I just made a 100% height div on this page, but (at least in Chrome and Chromium), there are slight top and bottom margins. I want to have the div cover those, but I don't want to resort to using to a specified height, as I'll be using the same set-up across multiple pages.
Do your html, body and div elements all have border:0 and margin:0?
Set border, margin and padding to 0.
Related
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
I'm trying to use sticky footers on my page but I'm having a problem where the footer appears below the window, even if there is no content.
This page says that this is caused by using margin on some of the elements, thus the footer is being "pushed" down by the accumulated values of the margin's. The page suggests to replace margin with padding, but that breaks my design, since they aren't exactly the same thing.
What else can I do to "pull" the footer up?
Here's a link to show my problem: http://john2x.com/wordpress/?p=4
If your div has padding maybe you should also sum the top and bottom paddings to the negative margin you're giving to it...
So for example if your div has 10px top and bottom margin, I think you should add 20px to its negative margins.
If there are elements with margin inside the footer that are pushing it down, maybe you should also add those margins to the negative margin of the footer.
I believe this is being caused by your #page-wrap min-height being set to 100%.
I think the easiest solution would be to move your footer div within the #page-wrap div, then it will fall within the bounds of the page.
Hope this helps!
I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.
I want my whole html file to fit within the 1020 width resolution, with all elements at the center, but I want my footer to have a top and bottom border spanning the whole 100% of my page no matter what the resolution. So I made a wrapper div with a 1000px width to contain most of my body elements except the footer. The footer I set to 100% width.
I have reset all universal values at the start of my css file. However, I still get a padding at my left part and a scroll bar - the border doesn't go all the way through the left. I don't get it! What should I do?
Are you using a reset?
Meyer reset -
http://meyerweb.com/eric/tools/css/reset/
Yahoo reset -
http://developer.yahoo.com/yui/reset/
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.