I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/
Related
I'm trying to write a piece of code that has a div with a certain width and height. That div also has a CSS animation, shrinking the div to nothing. However, the text wraps. I do not want the text inside to wrap. I will create a fiddle for a demonstration:
Link
I have attempted overflow: hidden, but the text still wraps eventually.
I apologize in advance if I'm missing something obvious, and thanks in advance.
Any Javascript solution (Unless it's adding classes or something) is not preferred, as CSS animations are much faster.
I just added another div inside the main div and placed the text inside of that and it seems to be doing what you want it to do.
<div id="bar">
<div style="width:250px; height:250px;">Good Day.
<br/>
<br/>I'm a DIV
<br/>
<br />
<br />
<br />
<br />
<br />
<br/>And I shouldn't move when animating.</div>
</div>
give that a shot. Text will always adjust to its' container, doing it like this places it inside of another container that remains the size you want it and because you have the overflow set to none on the outer container no scroll bar pops up when it shrinks smaller than the inner div.
Add white-space: nowrap; to #bar
Use the white-space CSS property and set the value to nowrap:
white-space: nowrap;
I have a relatively small problem here, it doesnt appear in Chrome though.
I have 2 divs at 50% width of their container, one is floated to the left, the other floated to the right. One contains some text, and the other contains nothing but an image which has a max-width: 100% applied to it by default. But still, the image is overflowing to the left outside of the divs boundaries. How to fix?
http://jsfiddle.net/Pv5Cb/ - I am not sure if this will give you an idea about what is happening but still.
P.S. I am using some snippets from animate.css, but I doubt that this is the problem.
HTML:
<div class="content-project-left">
<h1>heading one</h1>
<p>paragraph</p>
</div>
<div class="content-project-right">
<div>
<a>
<img src="img/img.jpg" alt=""/>
</a>
</div>
</div>
Fixed it myself.
So it turned out that besides the two 50% sides that are floated to the left and right respectfully, I gave the image within the floated right div a float: right...
float: *; removes an element from its natural document flow.
Removed it and everything is back to normal now.
I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}
A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.
I have the following html
<p><img src="" />some text here</p>
The image is floated to right and has a fixed width and height. But the problem is that I want to reduce the width of the texts only suppose from 900px to 400px but image also shifts to leftwards. Here I need the image to be at right without shifting to leftwards without touching up markup or wrapping whole with a div. Any idea?
demo
Put your text in a span. Give it any width you want.
Edited you jsfiddle:
<p><img src="" /><span>some text here</span></p>
http://jsfiddle.net/shubham59/HRHJw/1/
Enjoy !!!
I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?
If you don't want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.
i.e. For the markup:
<img src="image.jpg">
<p>Some text
all you need do is give the <p> element an overflow other than "visible". For example:
p { overflow:auto; }
Use a little bit of margin-right on the <img> to separate the text from the image.
If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.
For example, if your HTML is something like:
<img src="image.jpg">
<p>Some text
And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).
That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.
Demo http://dabblet.com/gist/2791183
You need to the float the image element and the text element separately. I think you also need to specify width for both elements.
<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.
Example:
<div style="overflow: auto;">
<img src="hello.jpg" style="float: left; width: 200px;">
<div style="float: left; width: 700px;">
Hello!!!
</div>
</div>
The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)