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.
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...
This is a very basic html-css query that I often encounter. Most times, I find the solution some way or the other, but am interested to know the reason of this unexpected behavior(as per me) of UI.
Please have a look at this fiddle: http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
the right floated text moves to the next line though there is a lot of width available in my line. Ideally as per me, the text should appear side by side with float:left as left side, and float:right at right side within the div.
This cant be a complex issue, so is there something very common I do not get here?
Put the floated item first. The floats are nested inside of each-other, so they won't affect each-other. Floating an element automatically changes it display:block;
I think there's a couple things going on. Since the wrap is float:left, it switches to a block formatting context. It looks like the issue is that the whitespace that comes after the text (just before the nested float) is considered to be trailing since there is nothing is in the flow after it. So the width of the parent does not take into account the space, even though it does take up space when the layout is rendered as you can see in the html.
Removing the trailing space brings the X back onto the same line as the text.
http://jsfiddle.net/2yaRU/8/
If you want a space after the text, you should add a non-breaking space ( ) to the html instead.
http://jsfiddle.net/2yaRU/9/
I've just started playing with html and css and basically I've been learning everything from all the posts here but right now I'm stuck with something I cant seem to figure out how to do through research and decided to post a question for help.
I'm customising a simple portfolio style theme on tumblr, my question is regarding the text caption on the right of the picture
http://www.alvaserigrafia.pt/post/34608701054
I can only get the 3 text lines to display on a single block and I want each one of the lines to have its own block with proportional width. Can this be done with just html and css?
Thanks in advance!
This is where Firebug (Firefox extension), or the developer tools of your favorite browser, will come in handy. If you inspect the text element in question, you'll see that they're each wrapped within <p> tags.
The <p> tag is a block level element, which means it will automatically take up the full width of its parent. It's also what's recommended for...well...paragraphs of text.
Each line is wrapped in a p element. Block level elements usually fill the whole width of the parent container; that's why they are "block" elements.
To get something that shrinks with the content, wrap the text in a span:
<p><span>text</span></p>
The span will only be as large as the text inside.
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.
I floated 3 images in divs in the middle of a long section of text. I want to float them so the site keeps it's 'liquid' design, adapting to any width browser window. But if text starts wrapping to the left of them on wide Windows, it looks bad. I'd like them to float, but still be able to clear text around them so they look like a block element. How can I do that?
I thought maybe of sticking in a 100% width div right after the image divs, that's 1px high, and filled with a 1px image that's just the background color. Will that work?
http://www.briligg.com/frailty.html
The images in question are the ones at the beginning of the 'the cause of addiction is stress' section. Line 134 to 146, references the internal style sheet.
Put a clear: left on your section of text following the images.
That appears to be your div with class text though I don't know if you would want to universally apply the clear to all the divs with that class.