I'm sure it's an easy question but I can't figure it out.
I have this code basically
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
I want the image to align to the right of the text within the div. Everything I've tried so far takes the image out of the normal page flow making the div not respect the height of the image. I can't just explicitly state the height of the div because the image inside is dynamic and only of set width.
Here's what the page looks like.
How do I align the image to the right of the div and still have the div respect the height of the image.
Basically your div must have overflow:hidden, look example:
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
Alternatively you can put <div style="clear:both"></div> after each div
In css set the overflow of the div that has to respect the height of the image to auto.
div {
overflow: auto;
}
It is because of the float on the image. In order to fix this, you may use a method called clearfix on the container element: div.infobox
.infoBox:after {
content: "";
display: table;
clear: both;
}
Fiddle here.
Related
I'd like to align horizontally an image and paragraph of text next to each other within my main div element of my web page.
The divs are wrapped like this:
<div id="main">
<div id="image">
</div>
<div id="paragraph">
</div>
</div>
Is this the right layout? If so, what CSS do I need?
You need to set both of the inner divs to
display: inline-block;
Check out this fiddle. https://jsfiddle.net/m8athtLp/light/
You can do using two way:
Firstly, From your markup, You can use css to float: left image and float: right paragraph.
Secondly,
<pre><div id="main">
<img src="images/img.jpg" alt="">
<p>your text</p>
</div></pre>
For this this code you can use float: left for image, paragraph text auto align right
Thanks
I trying to wrap image inside a div, but the div gets expanded by the parent div.
<div id="parent" style="display: inline-block; position: relative; text-align:center">
<div id="wrapper">
<img>
</div>
<p>Some text that expands the wrapper div more than image width</p>
</div>
The text field expands the parent div to be wider than the image and this also expands the wrapper div. How can I make the wrapper div to be exactly the same size as the img?
img nor the wrapper have no margin or padding, but yet wrapper div is wider than the image.
Use display:inline-block on #wrappper
DEMO
You need to set display:inline-block on wraper element
<div id="parent" style="display: inline-block; position: relative; text-align:center">
<div id="wrapper" style="display: inline-block;">
<img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/source_code-128.png" />
</div>
<p>Some text that expands the wrapper div more than image width</p>
</div>
If you want to keep p size same as image you need use some JavaScript or jQuery
e.g.
$('#parent').css({
maxWidth: $('img').width()
});
Fiddle
So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen
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! :)
I am having an issues getting my HTML to format the way i need it too.
I am creating div dynamically (parent). In each div there are two divs inside (div one & two).
Div one is text that can be any length or variable length. Div two contains an image.
Regardless of the size of the parent div, the text needs to fill as much width as possible. But i need the 2nd div with the image, to float above the text right at the end of the line. I also need all the image divs, to vertically line up.
This parent div is re-sizable and can get either smaller of bigger but the floating image must always be sitting in the sentence line but on the right of the container.
If the text is wider than the div parent, the image needs to float against right hand side of the parent container on the same line as the text. If the text is smaller than the parent the image must still be on the right hand side of the parent div.
Think of it as a floating image full stop, if that makes sense. where every sentence has its full stop in one long vertical line.
I have tried both divs and tables but am getting garbled results.
Here is my current code:
<div>
<div style="display: inline; float: left;">
Text Goes here</div>
<div style="display: inline; float: right; z-index: 1000;">
<img src="info.png" /></div>
</div>
<div>
<div style="display: inline; float: left;">
Next line of Text Goes here</div>
<div style="display: inline; float: right; z-index: 1000;">
<img src="info.png" /></div>
</div>
Thanks
I think it's a bit hard to visualize what result you're trying to get. Can you draw a diagram that illustrates your desired results?
As best I can tell, you're looking for this (view results at JSFiddle): http://jsfiddle.net/kcschaefer/GYQea/9/
Code is:
<div id="parent" style="width: 100%;">
<div>
First text goes here
<img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
<div style="clear: both;"></div>
<div>
Next line of really long text that demonstrates how the float will work would go right here, and you can see that the info thingie goes all the way to the end of the div, no matter how long this is.
<img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
</div><!-- end parent -->