I am trying to put text on top and img in bottom in the container.
align bottom isnt working
<th id="ship_method" colspan="1" rowspan="1">
<div style="vertical-align:top;">Ship Method</div>
<div style="vertical-align:bottom;">
<img src="unsortImg.png">
</div>
</th>
The vertical-align style only applies to the container element (in this case the <th>), not the element you're trying to align. So you can't use vertical-align to align two elements differently in the same container.
Instead, you can use absolute positioning to place your two elements in the top and bottom. Be sure to make your container position:relative. Check out the demo here: http://jsfiddle.net/8qUeD/
Additionally to #tb11's answer: There is a good change you don't need to actually align your texts like this, but just have them look like they are.
Considering the "lower" content is an image, you could include it as a background image instead and add padding, to that the text doesn't overlap it.
Alternatively, tell us, what is the bigger picture here? What is your overall design? What are the contents/images you want to display here? Is this actually a data table or are you using the table for layout? If you give more details like this, we can give better suggestions.
Related
I have a slider in a <div>. The slider takes an array of slides and each element has a text where there is no word-limit on the text. When I slide left or right, and the different texts are of different lengths, the height of the <div> varies, making it look ugly. I tried using a min-height or a fixed height, but those don't solve the problem, since there will either be too much empty space underneath the text, or, a text once in a while will be longer than the min-height and the size of the <div> will vary again.
What could I do now? Is there a way for me to find out what maximum height the div should have (based on what's the longest text in my array of slides) and then give my div this height? This way there would still be some empty space with the shorter texts, but at least it wouldn't be arbitrary.
Does this sound like an ok solution? I am wondering how I can measure this beforehand though? So I'm thankful for any clues!
If I understand your situation, you have a <div> element that wraps multiple "slide elements" where;
each slide element varies in height based on their text content and,
you'd like the wraping div to natually expand to fit around all slides regardless of the arbitrary height of their content
One solution to this would be to use flex-box which would allow your slides to be arranged horizontally within the wrapper div, while also ensuring that the wrapper naturally expands to fit around it's children (of arbitrary height).
To illustrate this approach, consider the following example where flex box is used to ensure the pink div correctly wraps green slides (of differing height):
#wrapper {
display:flex;
flex-direction:row;
overflow-x:scroll;
background:pink;
}
#wrapper > div {
min-width:30rem;
margin:1rem;
background:green;
}
<div id="wrapper">
<div><p>Short</p></div>
<div><p>Tallest<br>Tallest<br>Tallest<br>Tallest<br>Tallest</p></div>
<div><p>Tall<br>Tall<br>Tall</p></div>
</div>
You could try to use flex display to achieve this. Not sure if it will work with your slider tho, since tho have not posted your code.
You can find an example here
I would like to float a set of divs to make a fluid layout. And I would love to do it with pure CSS and no js if possible for performance/complexity reasons.
Currently, we have 3 divs per row and the surrounding element stretches vertically to accommodate the the tallest div. But of course when I make the page narrower or wider, I always have 3 divs per row.
With floated divs that don't have row containers, it looks great as long as all the divs have the same height. But if the 2nd div in a 2-div row is shorter than the first, then the next row's 1st div gets 'stuck' to the right of that 1st taller div, leaving the first spot in the 2nd row empty.
A solution might be to bring back row divs and use javascript to shuffle item divs between them, but that might be complicated and error-prone. But maybe that's the only possibility.
The one thing I can't do is use fixed height for the item divs, because that would require setting the fixed height large enough for the largest possible item div, which would leave a bunch of empty space for every other div.
I guess another possibility might be using fixed height, then use js to adjust those heights to eliminate extra space.
Make the display:inline-block and remove the float. Height will become optional as well, they'd just align to the tallest one.
If possible try switching to flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox has great visuals to illustrate how various flex styles work.
For example, you could use flex-wrap: wrap; to handle the case when the page becomes too narrow, and use align-items: stretch so they all have the same height
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
I am struggling to use dojox.mobile.ScrollableView for scrolling horizontally: I have a
<div data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">
which contains several div elements which float left. However, in this case the elements are not displayed in one single row:
http://jsfiddle.net/wf6NZ/
I could place another div in the ScrollableView with a width set to the sum of all widths plus margins:
http://jsfiddle.net/N7MrD/
However, this requires calculation of the resulting width of all elements which I want to avoid.
So the question is: Is it possible to achieve the results of the second link without the helper div?
Try to define the style 'white-space: nowrap' in any container div.
For example,
<div id="view" style="white-space:nowrap" data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV