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.
Related
I have a bunch of html that is absolutely positioned and then html snippet that is supposed to show after that. But they over lap.
http://jsbin.com/okamot/1/edit
Everything under .drag-drop is supposed to be absolutely placed so the height and width of .drag-drop become zero. The exhibit button and the exhibit text are supposed to show after the bolded This is Drag and Drop Item. But because the height of .drag-drop is zero it shows right over the contents of .drag-drop`.
I have had this issue before, but fortunately it was easy to calculate the height of the children of .drag-drop and then I would set the height of the .drag-drop to be that using javascript. This time it is harder as it contains more children and they are not constant. How would I change my css so that the Exhibit shows below the drag drop ?
Absolute positioning removes the element from the layout, therefore the children are no longer part of the calculation of the parent's sizing. You'll need to use JS to solve this.
The best way is not to make the content absolute positioned at all. Could you make them relative positioned, or float them? You can still manipulate their position, height, width, etc., and they'd have layout so the containing div would have the correct height.
Note if you float them, you may need to add a "float breaker" at the bottom of the containing div to get it to calculate the height correctly:
....
<div>some floated content</div>
<br style="float: none;"/> // float-breaker right before containing div closes
</div>
Otherwise the previous answerer is correct, you'll need some js hackery.
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
I really hope that you can help me.
I created this fiddle to show what I'm trying to do.
My question is: How do I stretch two div-elements to fill available horizontal space?
As you can see there are 5 div-elements strung together, wrapped by a div-element where I set the background-color and width with 100%.
There are three div-elements with a width of 50px.
The width of the other two div-elements should fill up to the rest availiable space, they should have the same width, too ->50% for each of both divs.
My problem is that the 50% for those both div-elements amount to a 100% total-width. And not to a availiable space width.
I'm trying not to use tables, etc.
Let me know if there is something unclear.
EDIT:
I'd like to hear your comments about this way.
One way to solve this is to treat your divs like the cells of a table. A unique property of tables is that the cells will fill the width of the table no matter what widths you give them. By giving some cells a width the other cells will fill the remaining space. By using display:table and display:table-cell you can take advantage of this without changing your html. Have a look at this example:
http://jsfiddle.net/GyxWm/
I've not tested this but it should work in all "current" browsers. It should work in IE8+ but probably doesn't work in IE7 and certainly won't work in IE6.
You can do it with help of javascript. Change div tags like this:
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>
And add this javascript somehwere after those tags:
var elem1 = document.getElementById("part1");
elem1.style.width = (screen.width - 150)/2;
var elem2 = document.getElementById("part2");
elem2.style.width = (screen.width - 150)/2;
And remove width:50%; from sectionFillUp in css
Afraid I dont think you can.
The float:left; removes your code from the containing div and all the elements end up next to each other, once an element leaves the screen to the right, it wraps underneath leaving a space (a bit like relative positioning does).
Also, you are attempting to compare a fixed width with a variable width, which is close to impossible.
If you take a look here: http://jsfiddle.net/P5Kjh/5/
First I reduced your code back to 2 divs and got that working.
I've added overflow:hidden to the backgroundG class to make sure there is a grey background and floated both divs left.
Then I set the widths, the cumulative total has to be around 100%, if you add a border to each element you need to work to a smaller percentage.
Then I added back the other 3 in a new backgroundG element and created a separte class for the fillup element so it would be 80% (without a border).
Probably doesnt help you a lot. sorry if not.
Cheers
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.