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>
Related
I have two inline divs, the second of which uses vertical-align:top. The problem is that the second div begins with a h2 and then followed by some content, and h2 by definition doesn't listen to vertical-align. So the h2 is dragging down the rest of the contents. How do I fix that?
<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline; vertical-align:top;">
<h2>Heading</h2>
<p>
Paragraph of text
</p>
</div>
The fix worked thanks to the answers from #Ishan Jain and #Hiral. I now have a similar problem with two nested divs in the original right div. New code:
<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline-block; vertical-align:top;">
<h2>Heading</h2>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="233">
</div>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="191">
</div>
<p>
Paragraph of text
</p>
</div>
You must use display:inline-block; for make div inline.
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Use this: style="display:inline-block; vertical-align:top;"
Try this
Or just try to make your first div float:left:
Try this
Try:
HTML
<div>
<img src="" width=300 height=600>
</div>
<div>
<h2>Heading</h2>
<p>
Paragraph of text
</p>
</div>
CSS:
div{
display:inline-block; //change from inline to inline-block
vertical-align:top;
}
DEMO
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>
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 style="float:left">
<div class="designerWrapper">
<div class="pageBox">
content
</div>
</div>
</div>
<div style="float:left; margin-left:10px;">
content 2
</div>
<div style="clear:both"></div>
<br /><br />
How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.
you sould use the table stuff
<div id="outer1">
<div id="outer2">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
css:
#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}
important there is no floating! because the table display floats the cells automatically.
i didnt test the code hope works.
You can set min-width depend upon your requirement.
later on it will expand with its content
<div style="float:left; margin-left:10px;min-width:110px;">
content 2
</div>
<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.