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
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 sure there is a simple solution to it.. but I have some markup that is overlapping. I have a img.pull-left and a blockquote. The img is currently sitting in between the grey left border and the block quote. Markup is pretty simple:
<div class='container'>
<div class='row'>
<div class="entry-content clearfix">
<a class="pull-left" href="#noop" title="The first post">
<img width="70" height="47" src="logo-lw.png" class="inline attachment-thumbnail wp-post-image" alt="logo-lw"/>
</a>
<blockquote>
<p>Some Quote...</p>
</blockquote>
</div>
</div>
</div>
Here is a fiddle showing the issue
Add inline-block to the blockquote:
blockquote{
display: inline-block;
}
This is also a good use case for the bootstrap media object.
I use the twitter bootstrap and I wanted to align verticaly a div block with a picture and the text at the right.
Here is the code:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
</ol>
I tried this but not wortks:
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
I tried this too:
.span6 .row .span3{display: inline-block; vertical-align: middle;}
None is working. Does somebody have an idea?
Thanks in advance.
Try this:
.row > .span3 {
display: inline-block !important;
vertical-align: middle !important;
}
Edit:
Fiddle: http://jsfiddle.net/EexYE/
You may need to add Diego's float: none !important; also if span3 is floating and it interferes.
Edit:
Fiddle: http://jsfiddle.net/D8McR/
In response to Alberto: if you fix the height of the row div, then to continue the vertical center alignment you'll need to set the line-height of the row to be the same as the pixel height of the row (ie. both to 300px in your case). If you'll do that you will notice that the child elements inherit the line-height, which is a problem in this case, so you will then need to set your line height for the span3s to whatever it should actually be (1.5 is the example value in the fiddle, or 1.5 x the font-size, which we did not change when we changed the line-height).
Try removing the float attribute from span6:
{ float:none !important; }
If I remember correctly from my own use of bootstrap, the .spanN classes are floated, which automatically makes them behave as display: block. To make display: table-cell work, you need to remove the float.
As well as the previous answers are you could always use the Pull attrib as well:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
i use this
<style>
html, body{height:100%;margin:0;padding:0 0}
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
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; }