I have two divs that I would like to be side-by side if the screen is wide enough but if it's a narrow screen I want them to display one below the other, basically like inline block will do. the problem with inline block is the shorter one is as low as it can go on the 'line', like a full stop next to a bigger letter. how can I make the two divs go as high as possible on the 'line' so the white space is below the smaller div not above it, more like a quote mark next to a letter
either div could be taller than the other
I think you're looking for:
vertical-align: top;
However, without seeing your test case it's difficult to discern whether or not there are other metrics involved that are creating that space, e.g., margin, padding etc.
Related
There is a container that accommodates four left-floating divs, width of each of them is set to 50% (two in a row). Besides, I added a top-margin value for every div but the first (by means of this owl-like selector * + *).
Inasmuch as the first div has less text inside itself than the second, it is possible their heights result in different values (the first would smaller). In this case, to my expectations, the third div will find its place right beneath the first one, with only its top-margin preventing it to touch the first. Instead, I found this picture:
Apparently, the third div comes up to the second one' vertical level. Could anybody elaborate on this rule? Why is not the third div lifted up as much high as it is possible to it (to the first div)?
JSFiddle
The logic of float:left layout is - place to the right of preceding left floats if there's space or underneath them if there isn't. Not - fill in the first space big enough for the box.
Exactly why is not obvious. I suspect it was just both sufficient for the target use cases and simple enough to implement at the time it was specified.
I have a responsive design that mostly works. Images are in their own DIV, and that div is floated left or right. Captions for the images are in the div, so they stay with the image. By default image div width is set to 30%
If I put sufficient text between successive divs I get a pleasing display, with the text wrapping around the image.
If the images are too close, however they stack, and I end up with 2 images floating next to each other, and a tiny column of text.
The use of "clear" eliminates the text too.
Is there a way to float a div so that:
Text flows around it.
A second image does not stack adjacent to it even if there is nominally room for it.
In essence I want to float an image, but ensure that it is flush to the left margin, and not be on top of something else.
At this point my process is to try each page at multiple effective widths, and add more text/move the div as needed. This is fairly time consuming. I expect with a bit of time I will find out that I need X words between DIVS,
In some cases, I will stack multiple images within a single DIV. This works well for related images.
Example of a page with the issue about 3/4 of the way down the page.:
http://sherwoods-forests.com/Trees/Leaf_Trees/Poplars/Columnar_Poplars.html
CSS file for the site:
http://sherwoods-forests.com/2col.css
Put the floated image DIVs into the text container, not as a sibling to the text container. That way the text should float around it and won't be affected by a clear in one of the image DIVs.
If that doesn't work, you'll have to post your code - this general answer is all I can give you without the actual code...
I would just like a div, in the center of the page, that contains one line (two words) of h1 text, and that text is justified to the length of the div; meaning, the letters space out (while maintaining their size) to occupy the entire width of the div, and do not go outside the div. And, if I change the browser settings to shorten the width of the page (such as zoom in), the letters will condense (to a point, before breaking up to two lines).
I cannot realistically list all the things I have tried, to no avail. Which includes all the suggestions I have seen on this site to date.
Is it really that complicated? Or am I just missing something obvious?
Please, please help.
I apologize for the "subjective nature" of this request.
So you want the font size to change depending on window width?
In CSS, you can use the vw unit for font-size, so that would respond to the window width, but requires some trial-and-error, I guess.
Apart from that, there's a javascript plugin named fittext (http://fittextjs.com/) which does what you want. I used it on one website and it works quite reliably,
The problem is that my divs are being ordered so that the first column collapses first and is read first on mobiles (intended).
But on word-wrapping at very specific screen dimensions, the divs get out of balance and now look a little funky on their vertical balance with each other.
An image can be found here (red shows divs):
What I want is to add some space on the text that wasn't word wrapped so that
Personally, Id say the current design works well, as it can fit and change to different screen sizes, the fact that it doesnt line up is understandable as the word is just to long.
However if you wanted to you could set a min-width on the container which represents that box. This means the word wouldnt be wrapped when the screen gets smaller. But it could come with side effects as it will push over the other two divs depending on how the css works.
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)