Help me understand why only the last box is wrapping...
html:
<p>
<div class='box'>
<img alt="Red_box" src="/assets/red_box.png" />
</div>
<div class='box'>
<img alt="Vertical" src="/assets/vertical.png" />
</div>
<div class='box'>
<img alt="Blue_box" src="/assets/blue_box.png" />
</div>
<div class='box'>
<img alt="Horizontal" src="/assets/horizontal.png" />
</div>
</p>
CSS:
.box {
float: left
}
Here you can see that the blue box is not wrapping, why?
Update with the sequence of events:
Window is wide enough for all elements:
Rightmost box wraps where it can:
Rightmost box wraps again:
Blue box doesn't wrap:
according to your code, nothing should wrap. Do you have a width set to the parent of the p?
Related
I want to align and image and an div inline. I also want the top's of the image and div to be aligned aswell. This is what I have so far
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
I tried the class d-inline-block and it gets close to what I'm looking for but i need the text to be at the top.
You can see here:http://www.bootply.com/zpj12TL4wI
Bootstrap 4 includes a utility class for that: align-top. No extra CSS is needed...
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
<div class="comment d-inline-block align-top">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
</div>
http://www.bootply.com/wtAOA1JPn1
Just a vertical-align change is what ya need:
.comment {
vertical-align: top;
}
I've got a div wrapped in another div and this div has to show up when hovered on the image. But the thing is that when an image is placed (img src) in that div container the div won't show anymore on hover.. I don't know how to fix this, and I don't understand why it does work for the other div.
This is my html code:
<!--- START [01] --->
<div class="f1">
<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200">
<div class="f2"><b>Khumba</b><span class="yr"><b>(2013)</b></span>
<br /> <span class="moreinfo">Watch trailer // more info</span>
</div>
<div class="f3">
<div class="half"></div>
</div>
</div>
<!--- END [01] --->
Here's the fiddle: http://jsfiddle.net/ffXX9/
(the heart icon won't show up on hover when an image is placed in that div..)
You need to reposition the div
EXAMPLE http://jsfiddle.net/ffXX9/2/
<div class="f1">
<div class="f3" title="bla">
<div class="half"></div>
</div>
<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200">
<div class="f2">PPPOOOOPPP <span class="yr">(YEAR)</span>
</div>
</div>
need your help. I created a div that contains 2 floating DIVs. The first Div would be the leftnav. The second Div contains 2 floating DIVs too. The problem #container div height set to auto but not seem to work.
here: jsfiddle
I tried the clear:both at the end of the second div, but it didn't work.
Any help would be appreciated. Thanks
<div id="header">header</div>
<div id="container">
<div id="first">first</div>
<div id="second">
<div id="scol1">
<div id="scol1a">scol1a</div>
<div id="scol1b">scol1b</div>
<div id="scol1c">scol1c</div>
</div>
<div id="scol2">
<div id="scol2a">scol2a</div>
<div id="scol2b">scol2b</div>
<div id="scol2c">scol2c</div>
</div>
</div><!--SECOND DIV-->
<br style="clear: both;" />
</div> <!--CONTAINER DIV-->
<div id="footer">footer</div>
change scol1 height to auto as well. http://jsfiddle.net/Y47sx/31/
You have given 100px height to scol1a, scol1b, scol1c. This causes container having problem. To solve this you should define your #container height: 306px; (100+100+100+6)= 306px. 6px for border.
See this Demo
Note: I have removed <br style="clear: both;" />
In stand of <br style="clear: both;" /> use <div style="clear:both; float:none;"></div> and remove height of <div id="scol1"></div> <div id="scol2"></div>
This would be the situation, i'll try keeping it clear:
<div id="text">
text...text...
</div>
<div id="image">
<img>
</div>
How can I show the image on top and wrap text around the image?
Thanks.
<div id="image">
<img style="float:left" />
text...text...
</div>
It's good practice to wrap your text elements in a paragraph tag, although both block-level and inline-level elements will wrap around a floated element:
http://jsfiddle.net/Wexcode/UsvQd/
<div id="text">
<div id="image"><img src="#" alt="" /></div>
<p>text...text...</p>
</div>
CSS:
#image { float: left; }
I have code like this:
<div class='outer'>
<div class='imgwrapper'><img /></div>
<div class='caption'>This is a long caption that should wrap...</div>
</div>
What I want is for the outer div to be the width of the image so that the caption under it wraps to the width of the image.
The images are all different sizes but the size cannot be accessed in code to give absolute pixel sizes. The css has to work for different sizes.
I cannot change the structure of the divs.
Can this be done?
Try this:
HTML
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" />
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:200px; height:200px;"/>
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:75px; height:75px;"/>
<div class="caption">
Caption
</div>
</div>
CSS
.box {
overflow:hidden;
background-color:#ddd;
display:inline-block;
}
img {
padding:10px;
}
Demo
http://jsfiddle.net/andresilich/8Bsgg/1/