Having problems with CSS, and I think what I want is possible without javascript, but I'm not sure.
I have an article of text that I want to display with 0-3 images(The number is dynamic for each article). I want to display the 3 images all on the right-hand side of the page, with about 200-300px between them. This much I have achieved just by floating the images, using clear, and margins.
The part I haven't been able to do is allow the text to flow between the images in that 200-300px worth of space. I've tried relative positioning to push the images down to the part of the page I want them at, but the blank space reserved for them in the text by floating them stays where it is (i.e. the image ends up on top of text).
Is this even possible without js? The text is also completely dynamic, so I can't use any element in the text as an anchor.
EDIT: Here's some code to explain a little:
The tags:
<div>
<img class="floater" src="get_file.asp?image=1"/>
<img class="floater" src="get_file.asp?image=2"/>
<img class="floater" src="get_file.asp?image=3"/>
<p>lots and lots of text and paragraphs go here....</p>
</div>
The CSS:
.floater
{
float:right;
height:250px;
clear:both;
margin-top:200px;//This creates space between the images, but the text doesn't flow between them
}
You can achieve it only by using extra helper elements.
Look at this fiddle: http://jsfiddle.net/kizu/BwySX/
You just add helper elements with zero width, so they are pushing your floaters with their height, but as they have zero width, the text flows near them almost perfectly.
Not sure that's possible. A margin always pushes everything to the sides.
I'd divide the text into paragraphs, and have only one image per paragraph. Then the image could float inside it.
Related
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'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...)
There's probably an answer to this one, but despite 20 minutes of searching I can't find it.
I have an <iframe> (Embedded Google Maps) which I want to put on the right side of my content div, but it keeps on interfering with the text in the box. It won't allow me to put the text and the iframe side-by-side (but insists on putting one on top of the other).
I've tried multiple varieties of text-align, float and clear. Absolute position sort-of right thing, but leaves the box misshaped and I don't think it is the 'right' way to do it.
As for code, there's not much:
<div>
<iframe>
<h1>Header</h1>
Lorem Ipsum
</div>
First one happens, should be like the second one:
Float them side by side in container-type boxes
.inner-box {
width: 50%;
float:left;
}
Have a look at this Fiddle;
http://jsfiddle.net/wyj5tb22/2/
Im trying to put some text info on thumbnails, the info box is floating to the left and should not exceed max-width:85%; (of the thumbnail). Thumbnail area is marked light gray in the picture, text info area is yellow.
When the text exceed the with, text holding element ocupies full 85% and word wraps to next line. My problem is that there are extra white spaces on the first line, which I would like gone.
In my project yellow area holds Thumbnail title, even though there are few words in it, sometimes it just leaves big gaps on the first line which look bad.
Is there any way to fix this or am I asking for too much ?
jsFiddle demo
HTML
<div id="main">
<div id="text">
<h3>Some text and line breaking words. Some text and line breaking words.
Soaaaaame text and line breaking words.<h3>
</div>
CSS
#main {
width:100%;
background-color:#ccc;
}
#text {
display:inline-block;
max-width:85%;
background-color:yellow;
}
EDIT: text-align:justify only does the job when there are enough words. Take a look at this:
WITH JUSTIFY
WITHOUT
I would have to say you are asking too much. If a particular bit of text is too long for the space provided, it is going to wrap to the next line. There are a couple of options, but probably nothing you are going to like.
Reverse the order. Thumbnail on left, text on right. The gap will still exist, but will move to right, where it won't be as noticeable.
Example: http://jsfiddle.net/fvdJm/4/
Right align the text. Usually not preferred as it can make text difficult to read, but if you are only looking at a couple of lines of text at max, it won't be that bad. Again, you will still have the gap, but now it will be on the left, away from the point of focus. text-align:right; will do the trick.
Example: http://jsfiddle.net/fvdJm/3/
At the end of the day, you can make all the adjustments you want (text size, alignment, layout), but there will still be times you will end up with this issue. That is the just the nature of content. The best thing to do is just realize it is out of your control, and move on.
I'm just thinking about a possible issue I my have when I'm creating a web page.
I can't add the image because I don't have 10 reputation.
The text will continue to flow underneath an image.
I was working with W3C http://www.w3schools.com/css/tryit.asp?filename=trycss_float and just added a few more lines.
Is this because the paragraph tag isn't in it's own div?
this is the whole purpose of floating elements.
that other content can flow around them.
in your case, there a lot of text , so it floats around the image (the image have a float assigned).
read more about floats here.