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; }
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 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
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>
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?
I've got a large div. It contains a bunch of thumbnails. I'd like the thumbnails within the div to be centered inside the div, and the div to be centered on the page. But I'd also like the width of the div to be dynamic so you can see all the thumbnails on every resolution, centered. How could I achieve this?
here's what I have so far:
<div id="container">
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
</div>
I've tried centering it with this css:
The problem is I need an alternative to float:left that works to center so they all float around each other. What I currently have just floats them left so on the wrong browser width, they're not centered.
#container{margin:auto;width:80%}
.thumb{padding:60px;float:left}
Any ideas on how to do something like float:center?
Firstly, you cannot give the same ID to all the children <div>; That is invalid HTML.
I'd do something like this:
#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}
<div id="container">
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
</div>
Alternatively, you could just change all the <div>s to <span>s and remove the display:inline CSS directive. You could also completely remove the <div> or <span> idea and just apply the padding directly to the img tag.
EDIT: Seeing comments posted on another answer, it looks like my answer above still won't exactly help you. Is this the behavior you're trying to accomplish? http://jsfiddle.net/9KqQN/1
#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}
<div id="container">
<span>
<img />
<img />
<img />
<br />
<img />
</span>
</div>
Use display: inline-block on the thumb divs. This lets you treat them like any other piece of text, but retains their inherent "boxiness" for sizing:
#container {margin: auto; width: 80%; text-align: center; }
.thumb { height: 100px; width: 100px; padding: 60px; display-inline-block; }