I am having a problem determining which CSS class definition is stopping the left sidebar (the one with the pinkish background) from growing in height on this page.
I should have mentioned previously that I have tried everything I can think of and researched many questions on here, including adding height:auto; and overflow:auto; to col-left, sidebar, col-main and all others already.
Can someone help me identify it?
At a glance, I think the main problem is the use of position:absolute for .col-left. position:absolute causes that element to be outside of the flow of the rest of the page. The height of it has no effect on the resulting height of its parent (as if it were not inside the parent).
You have a lot of height values set to 100%, it took me going all the way to the page div class before I was able to increase the vertical real estate of your content.
I recommend evaluating whether you should be using that particular height property in so many elements, you may be constraining yourself with no reason.
Looking at the page source, the height of the element is not specified via CSS. If you would like the sidebar to grow, you would need to specify a height and/or min/max-height properties.
Related
I'm trying to get more efficient with building responsive websites and since I'm using Bootstrap (not particularly important for this case - I believe), I was looking into Bootsnipp. I decided to view the site's source and noticed one thing I've never seen before: they did not set a height for any of their containers except for the whole page wrapper and the footer. This baffles me because everything falls into place with the website and it's super repsonsive. I understand the elements where they use Bootstrap's classes like "col-sm-4" and whatnot but does anyone understand the art of making the header, a content container, etc calculate heights without specifying in css? Can anyone explain this concept? I tried Googling but not sure of the correct keywords to find answers.
Also, if you need to see yourself, here is the link to their CSS.
Thanks
Understanding the Box Model is important. As an (overly simplified) rule of thumb, you can think of it like this; there are 2 primary types of elements: inline (span, b, strong, ...) and block (div, p, ...).
Block tags by default are width: 100%. That is to say they will naturally stretch to fill their horizontal area.
Inline tags you can think of as being constricting. They shrik to fit the size of their inner elements. This makes sense when you think of a bold tag: it is not unlike highlighting the text you want to be bold. It stays small to fit the content.
In both cases, though, unless you specify a height, both block and inline tags will shrink their height to fit their inner elements. Because of this, you can think of a website as being a bunch of elements stacked on top of each other, where the top of the page is the bottom of the "stack".
Here is an example of divs without specified heights having their heights changed by the size of the interior content. http://jsfiddle.net/S3q2C/ Notice all the divs have a border to easily see its relative size.
If you don't set an explicit height, containers will automatically grow to fit the content (respectively). Sometimes this is desirable, other times not (think overflow hidden). A possible reason why people use explicit heights in containers could be because of absolute positioning, or if they want to align a nested element that is 50px tall, with another that is 200px tall. An explicit height could also be used to maintain perspective say for a picture or other element (maybe a series of elements). While this answer is the end all be all you might be looking for, the key thing I'm trying to pass along is that an explicit height is used when needed, not all the time.
Here's a quick demo showing you two <div> containers, one with a height set, and another with no height.
http://jsfiddle.net/xrZ73/1/
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
I'm trying to use a sticky footer, but it seems to having a conflict with my css, I'm following this tutorial, but I want to know why the footer is in the middle of the page, what do I have to do to fix it.
My code:
jsfiddle.net/q2Vuq/
The reason why you're seeing this strange behaviour with the sticky footer is because of your usage of position:absolute; on a number of your elements. Namely, the ones wrapped within the #navigation div.
Take a look at this (this JSFiddle just illustrates the problem more clearly):
I've given the offending elements all a background colour (as well as the body), so you can see that these elements are actually causing the scroll bar to extend beyond the height of the body. Absolute positioning actually takes them outside of the layout - meaning they don't cause their parent #navigation to expand, which in turn does not cause its parent .page-wrap to expand, which ultimately results in the footer not getting moved down. The footer gets put to the bottom of the body (as a result of the sticky footer CSS), which isn't quite low enough since the absolute-positioned elements extend even further below (as they are ignored by the body).
So, with that in mind, how do you fix this behaviour? Unfortunately, your sticky footer relies largely on the assumption that all content will be figured into the layout above it, or at least that the wrapper element above it will be tall enough to account for all its contents. This makes your use of absolute positioning hard to keep.
The best solution is probably to remove your current usage of absolute-positioned elements in your document, and rework how you're going to place your elements. Since I don't know what design you're actually aiming for, I can't provide an example of this. An alternative is to place an internal wrapper element inside of .page-wrap, with a min-height set such that it goes below even the lowest absolute-positioned element. However, this second method isn't too flexible, and I wouldn't recommend it.
If this isn't what you were looking for, or need more assistance in this particular matter, let me know and I'll be happy to help further. Good luck!
I have a structure that I want to repeat with different content each time. Here's the code (for a Web version of a script):
<div id="1_0" class="lineblock"><div class="whosays"><span>CHARACTER:</span></div><div class="whatsaid"><span>Line...</span></div></div>
The content of the <span> in the whatsaid div changes. Sometimes it fill fit on one line; sometimes not.Using static heights, it looks like this.
So, I want to change the height of the lineblock div and the whosays div based on how tall the whatsaid div needs to be.
Is there a way to do this? Any kind of scripting isn't really an option in this case.
I've tried various combinations of height:auto and height:100%, but nothing's worked.
Thanks in advance!
Graham's links are probably more interesting than what I used here. However, that's works. You can see a demo here : http://jsfiddle.net/uwf8U/1/
The lineblock div will expand to the height of whatever content is inside it. That leaves setting the height of the whatsaid div as the main challenge.
Essentially what you have here is the classic "CSS Equal height column" problem, which as been discussed in several places. Check out the following links:
http://www.alistapart.com/articles/holygrail/
http://www.alistapart.com/articles/fauxcolumns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This seems like it should be the easiest thing in the world, but I'm having difficulties. I'm started to think I didn't know as much about CSS as I thought, or CSS was designed more poorly than I thought.
I have a page. At the top, there's an arbitrary amount of markup. Then there's a block element. All I want to do is make this block element extend its height to the bottom of the window.
See http://jsfiddle.net/vHVeC/4/. It's close, but the last block element extends beyond the visible area of the browser, creating scrollbars. No content should extend beyond the dimensions of the viewport (ie there should be no scrollbars).
How can I do this with having to use JavaScript?
Apparently, CSS has massive troubles finding heights. Widths, no worries.
Using Javascript, you'd go:
//Grab div element
var obj = document.getElementById('theDiv');
//Enable sizing
obj.style.position = 'relative';
//Force to window
obj.style.height = document.documentElement.clientHeight+'px';
Incidentally, in your Fiddle, the plaintext node above the div is offsetting the div below. It's finding 100% of the body height, but then being bumped down, causing the scrollbar. The way to fix this in CSS is position:absolute;left:0;top:0 which locks it in place.
Also note that in any of these cases, if you do end up scrolling (e.g. to 150%), you'll see the bottom edge of your div down there at 100%.
You've hit the css box model problem. A quick and dirty solution is to set the overflow: hidden property to prevent the scrollbars but you should be very careful doing this. You will need to make sure your content fits on screen as any content extending beyond the block element will be inaccessible to users.
This is how you can do it using a table (It's pure CSS):
http://vidasp.net/tinydemos/table-layout.html