These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
What a nasty bug!
Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.
Try with this
.slide {
float:left;
width:25px; /* width added here (same width of '.handle' ) */
}
Example : JSfiddle
If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.
Related
I have a header div above a scrolling div and I'd like to pad the header on the right the same width as the scrollbar. I know I can use JavaScript to calculate the scrollbar width, but I was wondering if there's a pure CSS method to do this?
Edit
To complicate this more, if there are few results that come back so the scrolling div doesn't produce a scrollbar, then I'd want the header to not be padded as well. I'm not sure if that's possible using only CSS, but thought it's worth asking.
What about "forcing" an overflow-y:scroll then making it non-visible?
#myDiv{
overflow-y:scroll;
}
#myDiv::-webkit-scrollbar {
opacity:0;
}
A CodePen
I have to mention that I just had this idea...
You'll have to test it for browser compatibility.
It seems that all major browsers have the same width, no calculation necessary:
http://www.textfixer.com/tutorials/browser-scrollbar-width.php
Would it be acceptable to just put that in the CSS?
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
I have given a small amount (-7px) negative margin to a div to align the text with an image next to it.
The divs have some different sizes according to a few media queries. Everything works fine except in the largest size which, for some reason, adds a small scrollbar and the negative margin is suddenly clipped.
I have no idea why this is happening?
Even adding height to the parent doesn't help and the scrollbar still appears for some reason?
For the life of me I can't recreate it in jsbin either, so I'm wondering if anyone had any tips on what could be causing the sudden appearance of a scrollbar/clipping?
EDIT
Apologies for the delay, took a while to strip out all the extraneous content but here is a working test that demonstrates the issue.
If you 'zoom out' or make the window very large, you can see the heading clipping suddenly. Forcing overflow: visible also does nothing. Definitely something odd is happening that is causing the scrollbar to suddenly appear too.
Here is a video that demonstrates the issue. My browser is zoomed out to 75% to simulate a larger screen. I am using Chrome 30.0.1599.22 on Mountain Lion.
To answer your question:
what could be causing the sudden appearance of a scrollbar/clipping?
It's caused by this CSS:
body.catalog-product-view .col-center {
overflow-x: hidden;
width: 1800px !important;
}
And to be exact, it's caused by overflow-x: hidden;
According to this answer, W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
Here are possible solutions: CSS overflow-x hidden and overflow-y visible
However, they didn't seem to work when I tried them with your code.
Some example html/css would help us answer your question, but if the scrollbar is causing the negative margin to be clipped, why not just hide the overflow on the div to prevent the scrollbar from rendering?
div
{
overflow-y:hidden;
}
waffl.
SO, here is the root of your bug =)
#media (min-width: 2088px)
body.catalog-product-view .col-center {
overflow-x: hidden; /* this makes scroll visible and the text being cutted */
}
Try this in CSS:
body { max-width: 200%;
}
div { width: 170%; }
If you define the width in percent values everything will be adjustable.
Please, look at this example. I intend making horizontal layout with pure html/css, don't bother of old browsers. I made it with display: table technique. But displaying main text containers (light-yellow) became a problem. Each of this has overflow: hidden to prevent vertical scroll. Later, I intend adding some shadow effect at the bottom. Now, I want to make in, for example, 80% height with 10% margin top and bottom. But what I get is container with larger text stretching all parents container (light-green), so 80% of it became too much.
Is there any way to avoid it without javascript?
Maybe I can get text container any height, but with some margin at the bottom. I will appreciate any solution.
Do not use table layouts, table cell divs have a problem setting their width/height and thus will not be able to follow overflow rules.
update the following css properties in your layout.css, this will get you started:
#content{
display:block;
height:90%;
overflow:hidden;
vertical-align:top;
}
#content-inner{
display:block;
height:100%;
vertical-align:top;
}
.article{
display:inline-block;
}
It's still not clear what you want; maybe post a quick sketch?
Anyway, I'd want to avoid the horizontal scrollbar. To do that set #content {
width: 61%;} (based on the rest of the CSS). Currently, in layout.css, #content width is set to 305%.
RE:
#Brock Adam, I mean I want to make div.article-content 80% of screen, not 80% of parent container. I believe this can be achieved by forcing parent div#content be exactly 100% of screen, not more. But I don't know how.
div.article-content currently appears 5 times in the page. Setting it to 80% of the screen will give a page that's at least 400% wider than what the user can see.
Questions:
The first div is ID'd as "header", but it's floated left and only 39% wide. Is this a header (bar at top of of page) or a left, side-bar?
Are the articles supposed to be in 5 tiny columns, on the same row, or are they supposed to be one after another, scrolling down the page?
Again, statements and the semantics of the example page are unclear. Posting a quick sketch of the desired layout will help us help you.
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant CSS:
.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}
.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}
I appreciate the help!
This is a classic IE problem, combined with a slightly impractical page layout.
You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.
Just remove width: 100%; from the peace-main style.
Posting the CSS code would be helpful. Try using "position".
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
#Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as #Guffa pointed out.
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg