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 -->
Related
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.
I have a grid of image icons in a fluid layout. The icons are broken up by a couple of double-height images. I would like to have the icons wrap around the double height images. For example, if the double height image is the first in the row, the rest of the icons fill the rest of the row, then wrap down and fill in next to the double height image and complete the next row.
If I just put them all in a list together, what happens is that once the row is filled in, it wraps below the double height image, effectively leaving a big white space to the right of the double height image.
The other double height image is the seventh item in the list (the first double height image, then 5 single height icons, then the next double height image). I would like the single height images to wrap around this one as well without leaving a blank row on the bottom right of the image. Ideally, I'd like to stick this image on the right, but wasn't able to get that to work.
You can see the page here:
http://www.kandlekidswear.com/Pages/designs.html
Right now, my workaround is that I have put two single height divs within a double height divs, so the list is effectively a list of double-height divs. It is working ok, but the issue is that it leaves a large two-row white space at the bottom right. I would welcome an alternate approach. Thanks in advance!
CSS
.singleHeight {
width: 180px;
height: 180px;
float: left;
margin: 10px;
}
.doubleHeight {
width: 200px;
height: 400px;
float: left;
margin: 5px;
}
HTML
<div class="doubleHeight">
<img src="doubleHeightImage1.jpg">
</div>
<div class="doubleHeight">
<div class="singleHeight"><img src="icon1.gif"></div>
<div class="singleHeight"><img src="icon2.gif"></div>
</div>
<div class="doubleHeight">
<div class="singleHeight"><img src="icon3.gif"></div>
<div class="singleHeight"><img src="icon4.gif"></div>
</div>
...
<div class="doubleHeight">
<img src="doubleHeightImage2.jpg">
</div>
<div class="doubleHeight">
<div class="singleHeight"><img src="icon5.gif"></div>
<div class="singleHeight"><img src="icon6.gif"></div>
</div>
...
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 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/
I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:
http://www.comehike.com/hiking_dev.php
The code I added was something like this:
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
I added <strong> tags so you can spot it on the page better.
But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?
Is it better practice to wrap my 2 divs that I am trying to align, within another div?
After your two floating divs, add another empty div...
<div style="clear:both;"></div>
This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.
Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.
Surround those two divs in a parent div with overflow set to hidden.
<div style="overflow:hidden;">
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
</div>
An alternative (as others have pointed out) is to use a third element:
<div style="clear:both;"></div>
It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?
You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.
Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.
Edit: Because of padding, you can increase either of the divs by 150px and be fine.