How does the line-height property in CSS works? If i set the line-height equal or less than the font size, it creates the problem with layout width. Please check this jsFiddle to see the problem.
I'm using font-size 14px, and line height 14px. If you change the line-height to 15px or more, the problem will be solved. Shouldn't the line-height only change the height, not disturb the width?
Please see the image below, as you see the #wrap has width of 300px, now because of line height the two div's of width 150px are not fitting into it.
I have checked with firefox and chrome, latest versions.
Line height is an inherited property but its inheritance works in a complicated way as compared to other inherited properties.
There is an excellent slideshow to Illustrate how line-height works depending on the units you specify the line height.
http://www.slideshare.net/maxdesign/line-height.
Slide 28 onwards explains your issue.
It has nothing to do with line height... not directly atleast. The two boxes will remain 150px wide regardless of whether you specify a line height or not. The overflow: auto causes a vertical scroll bar to appear (for reasons unknown to me) which reduces the available width of your container from 300px to ~280px hence the two colored boxes cannot appear side by side anymore. If you remove overflow: auto the result will appear as expected.
Edit
Revised demo here. To counter the vertical scrollbar, I added 1px padding on the container which seemed to counter the problem. For larger font sizes, use a padding of 2px.
In Chrome, if I increase the line height to 18px, the divs will be side by side, but the width doesn't change. Apparently this has something to do with the calculation of the height of #wrap. The browser cannot decide wether to show the scrollbar in #wrap or not. But since #wrap is exactly 300 wide, and thus can hold the two divs side by side only when the scrollbar isn't displayed, you'll have to force to hide it. Change #wrap overflow to hidden, or remove this property altogether.
Related
If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.
But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?
The problem I found on many pages, including StackOverflow:
So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?
I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?
You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.
The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.
To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.
The "cut-off" div has a width of 100% of the visible area, so everything is ok.
The Problem is, that the content is overflowing and you are now able to scroll to the 120% width.
To fix this behavior und stretch your "cut-off" div always over the full width of the page, you can apply some css:
position: absolute;
left: 0;
right: 0;
Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)
This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.
Playing with css border, margin, padding and width I came across an extra pixel...
I know that the total width and height of an element is the sum of its width, border, margin and padding.
If you look at this http://jsfiddle.net/Fs8HQ/ , everything seems to work. When you click the button, moving some pixels from the border to the margin create a pseudo-animation.
Now let's set a fixed width and height in http://jsfiddle.net/Fs8HQ/1/ (remove width and height from :active): in Firefox and Chrome there is one extra-height and one extra-width pixels that move all the adjacent elements. in Opera there is one extra-width and two extra-height pixels. Where they come from?
But here http://jsfiddle.net/hJTpY/ moving the pixel from the border to the padding seems to fix everything, but the pseudo-animation is not the same.
In the first two fiddles the borders are reduced approaching to content; in the last one the borders are reduced by the contents that expands.
Why does that happen? I'm missing something?
This is a problem I noticed lately:
The default boxmodel introduced by the W3C is content-box if a proper doctype is declared (in contradiction to the Microsoft boxmodel which can be triggered by using quirks-mode in IEs).
However, lately I noticed that the browsers have UA-styles which declare box-sizing:border-box (for input-elements only?). That is why your trick does not work, because the border is accounted into the width. To fix this, you have to declare box-sizing:content-box. See this question dealing with the same problem.
You problem occurs because when you fixed the width, for instance at 100px, the box with its border will have a width of 100px (due to the box-sizing property), so your increase of margin is not compensated by a shrinking of the box, which occurs when you do not set its width.
With a fixed width, and box-sizing set as border-box, you should not modify the margin property at all to avoid the other box moving.
The easy fix is of course to set back box-sizing at content-box : http://jsfiddle.net/Fs8HQ/7/
For more information about the css box-sizing property, go there.
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 have been trawling the web trying to find an answer to my css nightmare question.
The main problem seems to be getting a min-height:580px and a height:100% at the same time in all the browsers.
The thing I need to achieve is:
Site to have a min height of 580px including footer so total height before scroll bars appear is 580px.
Also, a min width is needed of 930px including right and left margin of 15px each side.
left menu of 216px wide and 100% high minus the footer height of 30px.
Main part of the screen should fill all the space available. Unless the screen height is less than 580px or width less than 930px. In this case you get scroll bars.
Compatiblity ie6,7,8, Firefox and Safari.
Can it be done with no Javascript?
There may be cleaner ways, but an idea that comes to mind about the min-height (min-height isn't interpreted by IE<8 anyway):
Place an absolutely positioned, 1 pixel wide, invisible DIV in the left hand corner of the screen. Give it 580 Pixels height.
That should make the height at least 580 Pixels.
The same should be possible with the horizontal width.
You should then be able to work the menu part in the usual way.
Don't forget your HTML element needs height: 100% for height: 100% to work within the body.
First, there's no support for min-height in IE6 or IE7 without javascript, period. So the answer to your question is no.
In general, though (and I'll admit I'm not sure since I haven't tested it thoroughly) but I seem to recall that height:100% overrides the min-height property set in pixels in browsers that do support it.
You could try using a second div either inside or outside your 100% height div that's the 580px you need...
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.