Aligning image and text in a line
I'm trying to just put an image on a line with some text so that the text and image appear next to each other. I am using display:inline;
but it seems to work. Here is my code:
<div class="design-image" style="display:inline;">
<img src="https://s29.postimg.org/taqtdfe7r/image1.png">
</div>
<div class="programs" style="display:inline;">
<p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
</div>
Alternatively, use flexbox:
img {
width: 300px;
height: auto;
}
p {
margin:0;
}
.fb {
display: flex;
}
.programs, .design-image {
padding: 1em;
}
<div class='fb'>
<div class="design-image">
<img src="https://s29.postimg.org/taqtdfe7r/image1.png">
</div>
<div class="programs">
<p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
</div>
</div>
source to share
To get the desired effect, you must use the property float
. This changes the way items are added to the browser window. Here's an example of what they can do for you:
div {
display: inline;
}
#pic {
float: left;
/* setting these so you know where the image would be */
width: 200px;
height: 200px;
background-color: red;
margin-right: 50px;
}
#blah {
float: left;
width: 100px;
}
<div id="pic">
Image would go here
</div>
<div id="blah">
<p>This is a short description referencing the image in question.</p>
</div>
source to share
Hi, first of all, take a div in front of the img tag and give it a width and float to the right. see code
<div>
<p> aking the approach of truly designing programs from ground up, Northman Underwrites each individual
to reflect the unique exposure of an extraordinary life.
<div style="width:300px;float:right; padding:10px;"><img src="insert your image path"></div></p>
</div>
source to share
Try the following:
.design-image {
float: left;
width: 50%; /*/ Or other Value /*/
}
img {
width: 100%;
}
<div class="design-image"">
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
</div>
<div class="programs">
<p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
</div>
source to share
What you want to do can be done with float and providing div width and setting style for image and paragraph tags. The code below can help you achieve what you want.
<div class="design-image" style="width: 50%; float: left;">
<img style="width: 100%;" src="https://s29.postimg.org/taqtdfe7r/image1.png">
</div>
<div class="programs" style="width: 50%; float: left;">
<p style="padding: 0 20px; margin:0;">Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
</div>
source to share
You can align these elements with different CSS attributes, I'll just show you some examples.
To achieve your goal, you can use float or display inline-block or table-cell (not used by anyone but good to know), you can also use flexbox, but that's in another answer, so I didn I added it here.
Remember that "divs" are block elements, so in most cases it is wise to use an inline block, not just an inline one. Inline block will give you the advantage of inline property, but retain the ability to use vertical margin / padding (top, bottom).
<div class="method method-float">
<div class="design-image">
<img src="https://s29.postimg.org/taqtdfe7r/image1.png">
</div>
<div class="programs">
<p>Method float <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
</div>
</div>
<div class="method method-inline-block">
<div class="design-image">
<img src="https://s29.postimg.org/taqtdfe7r/image1.png">
</div>
<div class="programs">
<p>Method inline-block <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
</div>
</div>
<div class="method method-table-cell">
<div class="design-image">
<img src="https://s29.postimg.org/taqtdfe7r/image1.png">
</div>
<div class="programs">
<p>Method display table cell (not used, but interesting to know technique) <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
</div>
</div>
CSS
img {
width: 100%;
height: auto;
}
.method-float {
overflow: hidden;
}
.method-float .design-image {
float: left;
width: 50%;
}
.method-float .programs {
float: left;
width: 50%;
}
.method-inline-block {
font-size: 0;
}
.method-inline-block .design-image {
display: inline-block;
width: 50%;
vertical-align: top;
}
.method-inline-block .programs {
display: inline-block;
width: 50%;
vertical-align: top;
font-size: 16px;
}
.method-table-cell .design-image {
display: table-cell;
width: 1%;
vertical-align: top;
}
.method-table-cell .programs {
display: table-cell;
width: 1%;
vertical-align: top;
}
source to share