I have an <article> element with three children: a header, a content div, and a footer. The article is absolutely positioned with height and width set, so that it fits nicely into a grid of articles. The header has some variable content, such as the article title, date, etc. and is allowed to expand as it needs. The footer is absolutely positioned within some space set aside in the article by padding the bottom of the article. The content div, however, refuses to play nicely.
What's happening is that the grid_content div just takes up however much space it needs to accommodate its content, overflowing the <article> element as it does so. I'd figure out some explicit height to set on it, but both the <article> height and the header height are variable, depending on how many spaces it takes up in the grid and what the article title is, respectively.
Is there some clean way to get the div to respect its containment, or will I need to do some ugly JS hacks to get it to stay put?
Thanks!
http://jsfiddle.net/j2fE4/
OK, so I did manage to solve this, but the solution was a two-part deal involving JavaScript.
First, I used some custom JavaScript to calculate the appropriate height for the .grid_content elements, pasted here for reference. The solution isn't general to other projects, but should illustrate the thought process.
function resizeContentElements() {
$('div.grid_content').each(function(i, element){
var $element = $(element);
var parentHeight = $element.parent().height();
var elementPadding = parseFloat($element.css('padding-top')) + parseFloat($element.css('padding-bottom'));
var siblingSpace = $element.prev().height() + parseFloat($element.prev().css('padding-top')) + parseFloat($element.prev().css('padding-bottom'));
$element.height(parentHeight - siblingSpace - elementPadding);
});
}
After that, I grabbed http://dotdotdot.frebsite.nl/ and applied it to the div.grid_element collection. Everything is getting ellipses just fine, though the point at which the content gets cut off with ellipses does not seem that even, yet. My best guess is that the irregular (and often invalid) markup in those containers is messing with it.
Related
The Context:
I'm building out a div roster to use with jQuery or PhP for my roleplaying Star Trek Fleet (nerdy, yes, I know). I need my divs to behave in certain ways to make it robust enough to pull from XML and generate the roster automatically and auto-size my divs to fit however many names are added.
It will help to take a look at my current build example with Firebug/the like to understand what I'm doing.
Requirements:
Each subsection (Outpost Personnel, Outpost Defense), needs to have a number of divs:
1) The background image & subsection container (div id= outpostPersonnel in this example)
2) Sub-sub section container for each side of the listing, left and right. (Think newspaper paragraph.)
3) The top n number of roster names needed to fill/align to that background image in requirement 1. (div id= initialCommandTags (left side listing) and initialPersonnelTags (right side listing))
4) Div that stretches with n number of additional roster names. (div id = overflowCommandTags, overflowPersonnelTags, )
5) A colour div stripe to make it look like LCARS is still encapsulating the n number of roster names from requirement 4. (div id = colorStretchLeft)
The Problem:
I cannot get the parent subsection- the div from 1 (outpostPersonnel) to adhere exactly to the height of ALL its child divs- all the way down to the height of the overflowCommandTags/overflowPersonnelTags div.
One way I've tried it, and the next subsection (Outpost Defense) overlaps the overflowCommandTags div. The other- which is the way I have my example now (and where I gave up)- puts a ~160 pixel high blank space between the end of the overflowTags div and the top of the next subsection (outpostDefense).
If you firebug my current build example, you'll see that the parent div (outpostPersonnel) extends way the heck down, even though none of its child divs are that tall.
Overflow:auto and Overflow:hidden are NOT viable solutions insofar as I have read, since I need the divs to expand fully, and WITHOUT a scrollbar.
I'm completely stumped. Watch it be a really simple solution, too. Is it something to do with the fact that the parent div is only a BG, while the child divs have actual content?
Thank you for bearing with me this far!
Cheers!
((Also the reason why my div style stuff is in-line is because I'm embedding this on an Enjin page and I can't call a *.css file.))
There are a few things to mention here but I'll start with the reason for the gap in between the two sections.
From what I can see from your inline styles you have used position: relative and varying top andleft values to achieve the desired layout. On the element with ID personnelContainer you have added top: -230px. This is what is causing the gap.
When you position an element relatively you have to imagine that the element is in its original position and that you've just visually moved it. In other words, moving the element does not change the flow of the page, so applying the negative top value as in your example will not change the height of the container. (good reference: http://reference.sitepoint.com/css/relativepositioning)
With this in mind, you could go the route of applying minus top values to each of the sections that follow in order to close the gap, however you are likely to find that this complicates matters further and leads to overlapping content.
The best advice I can give is to read the following articles on floated layouts:
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html
Relative positioning has its applications but in this case you should use the float property to achieve your layout. If you read the articles above it will give you a good grounding in floated layouts and how to ensure your sections contain everything correctly. As long as you don't set any fixed heights on any of the child elements you will find they expand to accommodate any amount of content.
I have an easy task: stick a footer to the bottom (sticky footer).
I searched several threads on stackoverflow and google.
It seems that there are two techniques:
http://ryanfait.com/sticky-footer/layout.css,http://www.cssstickyfooter.com/style.css
( resetting all elements padding and margin, stretching wrapper, clearing both or other additional mods)
Absolute positioning
The first looks for me like some hack (and didn't work either) so I wanted to stick to the absolute positioning (bottom: 0;) but here I mentioned that pages with large content (many paragraphs) the footer hangs in the middle when I scroll down...
However here is the fiddle, hope somebody finds my error:
http://jsfiddle.net/379gr/
Regards
This is FooterStick: http://jsfiddle.net/jAbw4/.
Back to your code. Set the #content_wrapper's property 'position' to relative. Otherwise, the containing block will be the initial containing block. The initial containing block covers the area of the viewport and as a result of that, your footer behaves as described in your question.
By the way: Cameron Adams writes about a more robust method of positioning a footer: FooterStickAlt. He prefers FooterStickAlt since a painting error in older versions of gecko browsers and IE's can be observed (when FooterStick is used): the footer is not positioned correctly when the height of the content varies a lot during the loading process. So therefore if for example pictures with no dimension information are included, the absolute positioned element remains at the position that is determined first time around and doesn't move with the growing content down. FooterStickAlt doesn't have this problem.
Check it out: http://jsfiddle.net/sTW6t/1/
This is what I made a while ago when using a sticky footer with a relative position. Let some jquery do the trick and voila ;-) What it does is calculating the height so the footer knows where he needs to stay, sticky.
$(function() {
function positionFooter() {
var windowHeight = $(window).height();
var documentHeight = $('#pagewrap').height();
if (windowHeight > ($('#content').height() + $('#header').height())) {
var pagewrapHeight = windowHeight - $('#footer').height();
$("#pagewrap").height(pagewrapHeight);
}
}
positionFooter();
$(window).resize(positionFooter)
});
Cheers!
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
Ok, so a quick site that I am throwing together for a friend has about 20 static pages. Each one with a small amount of content. the div Container contains, well, the div Content, and the div Content contains, obviously, the content that changes on each page.
Now, depending on the length of the content, I want a different margin at the top. The less content, then the larger the margin. Simply an aesthetic choice. For example, if the content almost fills the static sized container, there is less padding, but a 1 line page of content might be 1/3 of the way down the static container. Centering the content in the div wont do, as that creates too large of a margin.
Whats the best way to handle this? A new class for each content with a different margin? A new Id, so that it is in its own special div positioned or margined differently? Inline css on each page to override the standard css for div Content? A differnt spacer div inside Container before Content on each page? Some sort of scripting along the lines of margin of Content = (ContainerHeight - ContentHeight) / 3?
Whats the acceptable way of doing this? I don't want to get into bad habits.
If javascript is an option, you can calculate the height of your content box and set a top margin according to the formula you prefer.
In jquery it would be something like:
c_height = $("#Content").height();
c_margin = Math.floor( /* your formula */ );
$("#Content").css("margin-top", c_margin + "px");
(not sure about the "px" part...)
I would go the simple route, and define a single upper margin globally, with inline CSS to override it in pages that need it. Suppose you wind up editing one of the one-line pages to add more content - in that case you'd presumably would want to change the layout for that page and no other, so that change might as well be right there in the page itself.
On the other hand, the pages might feel more usable and consistent if you pick, say, three margin sizes and assign each page one of them based on how much content it has. Then, when you expanded a one-liner you might simply change its class from the small margin to the medium, so putting classes like div.smallVMargin into a central style sheet would make sense. What you want to avoid is an external CSS file with classes like div.page16 or div.margin25px.
Take a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ item 6. It says:
It is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.
What workaround do I need to use in order to insert dynamic text into a div with absolute position?
Any approach is welcome
regards,
If your primary goal is to keep the div in it's place, without changing it's height or width based on the amount of text, I'd go with:
div {
overflow: scroll;
}
The other option is to have the text size shrink to fit into the div, but that involves a certain amount of fuzzy math and you run the risk of the text being so tiny it's pointless.
If you want the div to change it's height based on the text, this also involves some fuzzy math, but basically, you would get the length of the text with:
var sometext = "Hey, I'm some text!";
var textlength = sometext.length();
And make the height change in relation to that length. You'd want to play with the numbers, but it would look something like:
var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");
See Visual Effect section from W3C site here
Maybe using "overflow: auto" for the dynamic-text-container div.So the height isn't a problem.
The problem isn't putting the dynamic text in the absolutely positioned div - the div will expand to fit whatever text is in there. There are no heights defined on the red and green divs in your example.
Absolutely positioned divs are taken out of the flow of the document so anything that appears after them in the html will act like they aren't even there.
Designs that use absolutely positioned divs need to have a height defined on the containing div so the absolutely positioned divs don't overlap other content. In your example <div id="div-1"> has a height of 250px defined. Change that to 100px and you will see <div id="div-after"> move under the red and green divs.
So if you have a absolutely positioned div in a sidebar with nothing after it you can add all the dynamic text you want. If you have one in your header, it is going to make your design very complicated to implement.