I have this code: http://jsfiddle.net/5RbrL/
As you can see, the text doesn't go over the .box div. I would like to achieve the same, but the .box div should be attached to the bottom of the container.
First thing I tried was setting the container's positioning context to relative and making .box absolute, but this takes it out of the document's flow and text is placed underneath .box, which is exactly what I don't want to happen.
I do not know the height of the container, as it will depend on the amount of text inside it.
Is there any way to make the text fill the entire container, but leave the bottom right square empty (for a background graphic)?
[EDIT]
I apologise for not phrasing my question clearly: I would like the text to wrap around the .box.
Unfortunately what you ask can't be done with pure CSS.
You need a specific height to be able to float/position elements in this manner.
You could get around it be adding more elements, but this isn't preferable as then you'd have to invent some way to spread the last parts of text over to the empty element.
Well you could fake it by adding another element and somehow injecting the last lines of text into it.
Other than that, without a specific height I am not sure there is a real way to do it. HTML should come up with some kind of pathing system :D
__
After some thinking and experimentation I have an easier solution, just include the element within the text (inside the <p>.)
Have you tried moving the image div to the bottom of the container (underneath your text) and then clearing the container with either a clear div or overflow:hidden? http://jsfiddle.net/5RbrL/14/
What exactly do you want to do?
if do you want the box in the bottom, you can put an overflow hidden in the container, and then move the .box to the bottom > something like this >
http://jsfiddle.net/3v2mr/
or the structure can't changes?
Related
I've looked around for answers and I've tried plugging in everything I can think of, but I can't seem to figure this one out. I feel like I'm probably overlooking something really simple and obvious, but any help you can give would be really appreciated!
Basically I'm trying to customize this page so that the little character boxes are horizontally centered within their .wrapper div.
While the div itself is centered horizontally in the middle of the page (I've used padding: 0 15% for that), the content inside it is not.
Here is a pastebin of the entire code if anyone would like it. The relevant section is line 140. Thanks in advance for any help you can give!
The problem is the div containing the individual character boxes are using absolute positioning so any style you try to use on the wrapper div that contains them to center them will be overwritten by the absolute positioning. You could probably change the javascript that is writing the absolute positions to center the boxes in the wrapper div or you could possibly pad the wrapper. I was playing around with the numbers and had a couple boxes centered within the wrapper div but when it's resized the javascript rewrites the positions. I would've used bootstrap to make this page instead of using javascript to reposition things on resize.
Another alternative is
1) Remove padding on your wrapper div and set text-align center
2) For each of the character box, I am not sure what you are using the javascript for. If the javascript have no other use other than making those boxes horizontally center, you can remove it.
.chara remove the float center, remove height, add display inline-block, add padding 25px 0
3) .charaimg remove position relative, remove top, remove left
4) .charatitle remove height, remove position absolute, remove bottom 0
5) In your HTML switch the .charaimg and .charatitle
That should do.
And also for future question, it helps a lot if you can put your code in codepen or jsfiddle. It makes life easier for people who are helping you.
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
I want to have a region of my page that is reserved for context sensitive help text. It is blank, except when hovering over certain particular elements. But, of course, there are several independent pieces of text from which the visible selection might be chosen. This is in a page flow, with more stuff below it. I tried using a div "positioned", and putting help divs inside that. Each of the help divs is position: absolute; top: 0px; visibility: hidden; with the intention that JS would make one of them visible at a time, yet the space would have been reserved for the biggest piece of text in any of the help divs. Well, as most of you have guessed, because the help divs are position: absolute, their heights don't affect the height of the enclosing div, which ends up at a height of zero.
how can I achieve this? I don't want to use pixel sizing to force a height, because it's almost always wrong on some browser/font combination, and would be a bear to keep tweaking every time the help text were changed, or a new, longer help segment gets added to this.
Did I make sense, or do I need to try to draw pictures?
Yep, you're making sense. As you indicate correctly the containing element is collapsing to zero height since it doesn't contain any flow children with size. There is no simple solution to this without resorting to Javascript as obvious alternatives mean making all of them part of the flow layout, meaning the container would grow to accomodate all of the texts.
Solutions that would work:
Apply display:inline-block to all of the help texts to put them next to eachother, put them in a container element that has a width of 10000px or more as required, and encapsulate that element in a container with overflow:hidden. This way the container will actually assume the height of the largest child. Activating a text would then require moving the element in the DOM to the front so it is drawn first, or scrolling to bring it to the right position, which could be complex.
After loading the page use Javascript to measure the actual heights of the elements, set the largest one as the height of the container, and then apply display:none to the children instead of visibility:hidden.
The second option is easiest, and would be my preferred choice. It all depends a bit on your specific case though whether there's a better alternative.
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
Up to now I have two choices (maybe there are more outside):
Set the width of body tag to a fixed length and set the horizontal margin of the body tag to auto. It makes all contents get horizontally centered.
Create a wrapping div inside the body. Set the width of the wrapping div to a fixed length and set the horizontal margin of it to auto. It also makes any contents inside the wrapping div get centered horizontally.
I don't know, which one is better. Or if you have another alternative that you consider the best one, let me know.
A wrapper div is more flexible, because you never know when you're going to want an element to not be centered. A couple months down the line if the site requires changes you'll be happy you had a wrapper div, ends up being less work because you can have siblings of the wrapper div and do what you want with them.
With that said, if it's a fairly simplistic trivial example/site, sure go ahead and 0 auto the body element.