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>
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 have layout with two left floating divs - one for a picture the other for content. In the content div I have inserted a table to show some numeric data. When I add the table to the content div my float seems to get lost, the second div does not show up next to the first one but rather below.
Code example:
<div style="float:left;">
<img src="images/image.jpg" width="200" height="125" alt="Image" /></p>
</div>
<div style="float:left; padding-left:16px;">
<p>Paragraph text </p>
<table width="650">
....
</table>
</div>
Please check the width of the parent div that contains these two divs, my guess is that the parent does not have enough width to accommodate both given their content and width settings.
<div style="width:866px;overflow:hidden">
<div style="float:left;">
<img src="images/image.jpg" width="200px" height="125" alt="Image" /></p>
</div>
<div style="float:left; padding-left:16px;">
<p>Paragraph text </p>
<table width="650px">
....
</table>
</div>
</div>
I am trying to affix a callout image to the top right of a page, but I do not want it moving once the screen is below a certain width or else it will begin to overlap other page elements. Does anyone know what the best way of going about this is? Thanks!
Standard CSS practises tell us that each element on the page should be encapsulated as a block:
<div style="float:left;">
<div style="float:left;">
<img src="picture.png" />
</div>
</div>
This kind of style allows elelments to stack on top of one another, preventing overlap.
In your case, it sounds like you have a header, and you need a picture fixed in the top right:
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
But you also mentioned your page should have a min width, so that when a user tries to contract the width, elements do not overlap horizontally:
<body style="min-width:800px;">
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
</body>
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?
<div id="footer">
<div class="container_16">
<div id="footer_title" class="grid_16"> history <img src="{$AltImagesDir}/collapse_down.gif" height="7" width="6" border="0" /> expand | <img src="{$AltImagesDir}/collapse_up.gif" height="7" width="6" border="0" /> collapse </div>
<div class="clear"></div>
<div id="footer_content" class="grid_16">
<div class="grid_4 alpha" id="f_left_content">Left Content Here</div>
<div class="grid_3">1st Column Content Here</div>
<div class="grid_3">2nd Column Content Here</div>
<div class="grid_3">3rd Column Content Here</div>
<div class="grid_3 omega">4th Column Content Here</div>
</div>
<div class="clear"></div>
<div id="footer_bottom" class="grid_16">About Us Policies Terms & Conditions Help Contact Us </div>
The last grid_3 omega class pushes down and doesn't lay on the level of first 4 columns.
I think you have a problem with the margins between the colunms. Delete this div (id="footer_content"). you do not need it or delete the class definition of this div...
Or make a new div that wrap the inner divs of div id="footer_content".
But you can always use the Generator on the 960.gs site
BTW: Do you have borders in your css definitions? You must remove all borders, because float is precise and will break if you make the elements any larger than the framework defined.