Menu
Ok so I'm trying to align an image(which is contained in a div) and some text(also contained in a div) on the same line, without setting width for the text, how can i do it? This is what I have so far.
<div id="container"> <div id="image" style="float:left;"> <img src="tree.png" align="left"/> </div> <div id="texts" style="float:left;"> A very long text(about 300 words) </div> </div> When the text is short, the image and text can be fit into the same line, but my text is pretty long, and it automatically jumps on another line below the image.
Basically, now it's this: http://puu.sh/MPw2 I want to make this: http://puu.sh/MPvr
I'm been trying to solve this problem for like 3 hours I'm so noob please help? :S
762
For example if you'd like to align text and image in the same line but you don't want it to go below the image. You just want to keep it on the right. So in essence you want to have something that looks like this: For that you need to reduce the width of the div element that holds the text.
Aligned images: using image align, you can choose a left, center, or right placement. The text doesn’t flow around the image but will be placed before or after it (as a block), depending on the chosen alignment. Floated images: when an image is floated, the text flows around the image.
With bottom alignment, the same text aligns to the bottom right of the image instead. While HTML image alignment offers solutions for basic layouts, floating images with CSS code can offer more flexibility. CSS floating images Follow these steps to float images on your website to the right or left and use the “no float” or “clear” formatting.
Essentially so both image and text element can fit side by side on the page. Now since div and other block elements don't automatically fill the page next to each other (even if they could based on their width) - you have to use float: left; on the div element as well. Your long text here....
Floating will result in wrapping if space is not available.
You can use display:inline and white-space:nowrap to achieve this. Fiddle
<div id="container" style="white-space:nowrap"> <div id="image" style="display:inline;"> <img src="tree.png"/> </div> <div id="texts" style="display:inline; white-space:nowrap;"> A very long text(about 300 words) </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
