I'm trying to create a line of text followed by an image on the same line of a grid with 12 columns.
For some reason image 2 is displaying in line with image 1 text and then image 2 is showing with image 1 text.
It looks like the text and image elements within the div are above/below each other. What I want is them to be side by side.
How do I resolve this? I've posed the code here
http://jsfiddle.net/Dano007/P7nzy/embedded/result/
http://jsfiddle.net/Dano007/P7nzy/
HTML
<div class="grid_6">
<p class="text">"The best selection of cheese I've ever seen! Cannot wait for our next order!"</p>
<p class="image omega"><img src="img/cheese1.jpg" alt="Contact us"></p>
</div>
<div class="grid_5">
<p class="image"><img src="img/cheese2.jpg" alt="Contact us"></p>
<p class="text omega" id="text_left">"Wow, amazing cheese selection and very fast delivery!"</p>
</div>
CSS
.text {
display:inline-block;
font-size: 3.0em;
text-align: right;
}
#text_left {text-align: left; }
.image {
display:inline-block;
text-align: center;
border:solid 4px #6b5221;
}
You can try adding a width to your text content like shown below.
.text {
display:inline-block;
font-size: 3em;
text-align: right;
width: 80%; /* added this */
}
Demo Fiddle
You can use it the way Ollie has mentioned in his answer also. It depends on how you want the appearance to be.
Like this fiddle: http://jsfiddle.net/Hive7/P7nzy/2/
What you needed to do was set the display of the text elements to inline like this:
display: inline;
Also add:
white-space: nowrap;
How about:
CSS:
div.newSection {
overflow: hidden;
}
div.floatLeft {
float: left;
margin-right: 10px;
}
img { height: 50px; }
HTML:
<body>
<div class="newSection">
<div class="floatLeft">
<img src="img/cheese1.jpg" alt="Contact us" />
</div>
<div class="floatLeft">"The best selection of cheese I've ever seen! Cannot wait for our next order!"</div>
</div>
<div class="newSection">
<div class="floatLeft">
<img src="img/cheese2.jpg" alt="Contact us" />
</div>
<div class="floatLeft">"Wow, amazing cheese selection and very fast delivery!"</div>
</div>
</body>
JSFiddle: http://jsfiddle.net/markwylde/P7nzy/6/
Related
I'm having a hard time figuring out how to put my image right beside my paragraph. The goal is to set an image beside my text, not super close but on the same line. How can I do this in css? Below is my About.js and About.css. My paragraph is wrapped in a div called about-page. I tried taking my img tag outside that div but it causes an error. It's suppose to look like this sketch below.
import React from 'react'
import '../CSS/About.css'
import clock from '../clock.jpg'
const About = () => {
return (
<div className="about-page">
<h6 className="about-this-app-header">About This Application</h6>
<p className="description">
Do You Have A Habit of Forgetting Stuff? Don't Worry!!!
<br />
Here's <b>Reminder Me</b> to The Rescue.
</p>
<p className="description">
<b>Reminder Me</b> is a reminder management application
<br />
that lets you send reminders through text message.
<br />
It lets you set a time/duration and a message for your
<br />
reminder. And makes sure that it's sending out right on
<br />
time, not letting you or your friends miss out on the
<br />
important things in life.
</p>
<h6 className="tech-stack-header">Tech Stack</h6>
<h6 className="tech-stack">Front-End: <p className="tech">React, Materialize UI, Font Awesome</p></h6>
<h6 className="tech-stack">
Back-End: <p className="tech">Express.js, Firebase, Node.js, Twilio API</p>
</h6>
<h6 className="link-to">
Link to:
<a
href="https://github.com/jspades93?tab=repositories"
target="_blank"
rel="noopener noreferrer"
className="waves-effect waves-light btn-flat"
>
<i className="fa fa-github" style={{ fontSize: "36px" }}></i>
</a>
</h6>
<div className="clock-image"><img src={clock} alt="clock" /></div>
</div>
);
};
export default About
h6 {
font-weight: bold;
color: #056674;
}
.btn-flat {
color: black;
}
.about-this-app-header {
margin-top: 100px;
margin-left: 170px;
}
.description {
margin-top: 20px;
margin-left: 90px;
}
.tech-stack-header{
margin-top: 25px;
margin-left: 210px;
}
.tech-stack {
margin-left: 90px;
}
.link-to {
margin-left: 35px;
margin-top: 20px;
}
img {
width: 390px;
height: 250px;
float: right;
}
.tech {
display: inline;
vertical-align: top;
color: black;
font-weight: normal;
}
I wouldn't advice using CSS floats, you can use flex box but this way of work adds more divs to the DOM only to set the locations as needed.
I'd recommend using CSS grid, less DOM nodes required, less messy CSS. You can read all about it here. You have a more details expiation here or here.
Basically you would want to set a grid for the container and set the header, the left and right parts.
Something like so
.about-page {
display: grid;
grid-template-areas:
'header header'
'description image';
grid-gap: 10px;
}
.clock-image { grid-area: image; }
.header { grid-area: header; }
.about { grid-area: description; }
You should use floats like this example:
use float: left; for your text and use float: right; for your image.
.left {
float:left;
}
.right {
float:right;
}
figure img {
margin:10px;
width: 50%;
}
figcaption {
font-family:sans-serif;
font-weight:bold;
font-size:16px;
padding:10px;
}
.clear {
clear:both;
}
.centered {
margin: auto; /* margin:auto centers the figure element */
width: 50%;
background:#ccc;
text-align:center; /* text-align centers the text and image only - you need margin:auto to center the entire figure */
}
<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="left">
<figcaption> This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width of the page. This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width
of the page. </figcaption>
</figure>
<div class="clear"></div>
<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="right">
<figcaption> This is the caption for a right-floated photo. This div in between figures with the clear:both property clears the float from the div above it, so the next div can have a different or no float. </figcaption>
</figure>
<div class="clear"></div>
<figure class="centered"><img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT">
<figcaption class="centered-text"> Tip: margin:auto ONLY works if the width property is set, and not set to 100%, so the margins can push the less-than-full-width element into the middle. </figcaption>
</figure>
</div>
With CSS, is there a way to break both the last word and the image to a new line at the narrower width?
http://jsfiddle.net/2koc2deo/3/
.text-two {
width: 125px;
}
.text {
font-size: 16px;
}
<div class="text text-one">
<p>Customer Service <img src="http://lorempixel.com/15/15/" alt="">
</div>
<div class="text text-two">
<p>Customer Service <img src="http://lorempixel.com/15/15/" alt="">
</div>
I added a negative right margin to the <a> elements, to match the image width.
This prevents the images from triggering a line wrap.
The line will only wrap if the text itself doesn't fit.
This works best in contexts where the right overflow of the container will still be visible.
.text {
font-size: 16px;
}
.text-two {
width: 118px;
}
.text a {
margin-right: -15px;
}
<div class="text text-one">
<p>Customer Service <img src="https://fakeimg.pl/15x15/" alt=""></p>
</div>
<div class="text text-two">
<p>Customer Service <img src="https://fakeimg.pl/15x15/" alt=""></p>
</div>
This solution is inspired by Beauceron's answer to "Attach font icon to last word in text string and prevent from wrapping"
I couldn't get the above to work. I fixed mine by putting a span around the last word and the image and use white-space: nowrap;.
Here's a fiddle:
.text-two {
width: 125px;
}
.text {
font-size: 16px;
}
.no-wrap {
white-space: nowrap;
}
<div class="text text-two">
<p>Customer <span class="no-wrap">Service <img src="http://lorempixel.com/15/15/" alt=""></span></p>
</div>
I'm in the process of creating a website, and am trying to align text beside an image. It sounds easy, but for some reason, I just can't seem to get it.
Here is an image of how I'm trying to get the images and text to appear:
So far I've tried the following HTML:
<div class="example">
<div class="eg1">
<img src="eg1.gif" />
<h2>Example 1</h2>
<p>This is an example</p>
</div>
<div class="eg2">
<img src="eg2.gif" />
<h2>Example 2</h2>
<p>This is another example</p>
</div>
</div>
and CSS:
.example {
display: inline-block;
}
.eg1, .eg2 > img {
float: left;
}
.eg1, .eg2 > h2 {
float: left;
}
.eg1, .eg2 > p {
float: left;
}
At the moment is appears all messed up. They appear underneath each other, and the text appears on the wrong side of the image.
What is the best way to achieve this?
may be like this?
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
http://jsfiddle.net/g57bB/7/
I recently set up navigation on a site like that. The key is in setting the image as the background and offsetting it with the center left no-repeat Though it was in a ul and a li format, I used the CSS in this format:
CSS
li a {
font-size:20px;
color:#f6f9db;
padding-left:75px;
background:url(icon-up.png) center left no-repeat;
text-decoration:none;
line-height:30px;
text-shadow: -2px 2px 1px #551508;
}
li a:hover {
color:#551508;
display:inline-block;
padding-left:75px;
background:url(icon.png) center left no-repeat;
text-shadow: -1px 1px 0px #f6f9db;
}
I am trying to put 2 lines of text next to an image, sort of like this
_________
| | Line one of text
| image |
| | Line two of text
---------
This is the code that I have so far
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
.banner img {
float: center;
margin: 5px;
}
.banner span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
.banner .ban2 span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
But currently it does this:
_________
| | Line one of text
| image |
| |
---------
Line two of text
I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.
There's no such thing as float: center; You can choose either left, right, or none.
http://jsfiddle.net/vd7X8/1/
If you float: left; on the image it will do what you're after.
If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto; on it, then continue to have your image floated--except it will be constrained by the wrapper.
Here is my demo which have using float and overflow with some explain
.div1 {
border: 3px solid #0f0;
overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements"
}
.img {
float: left;
width:100px;
height:100px;
background: #000
}
.div2 {
float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
}
<div class="div1">
<img class="img"/>
<div class="div2">
<p> Line 1 </p>
<p> Line 2 </p>
</div>
</div>
<p>Next elements</p>
Hope it help
Here is a snippet using a svg so you can test it anywhere.
.img{
float: left;
margin-right:1rem;
}
<div>
<svg class="img" width="50" height="50" >
<rect width="50" height="50" style="fill:black;"/>
</svg>
<p>
Line 1
<br>
Line 2
</p>
</div>
I know this post is old but wrap your element in a div and apply the vertical-align:top to this div and you're done.
Check it. It is well defined css.
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
img, span {
float:left;
}
.banner img {
float: center;
margin: 5px;
}
[class="ban1"]{
font-size: 17px;
position:relative;
top:50px;
left:11px;
}
[class="ban2"] {
font-size: 17px;
position: relative;
left: -97px;
top: 74px;
}
</style>
</head>
<body>
<div class="banner">
<div class="wrapper">
<p><img src="span.png"><span class="ban1">Line one of text</span>
<span class="ban2">Line 2 of text</span>
</p>
</div>
</div>
</body>
</html>
I know this is old post, but still wanted to say that not only float will do it, the <img> tag has a built-in attribute called align="left" which does that as well
<p>
<img src="smiley.gif" align="left"><span>Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span>
</p>
Fiddle: http://jsfiddle.net/356akcoy/
I suggest using the old tables that works great. In terms of CSS it is just needed to add the vertical-align: top property.
<table>
<tbody>
<tr>
<td class="img-container">
<img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
</td>
<td class="content-container">
<span class="description">This is a very long text that creates multiple lines with the image at left side</span>
</td>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/fypa0k4w/
An image is worth a thousand words, so here is one:
The upper image is the corect version, I used display:table-cell to avoid what happens in the second image in IE7. What do you suggest to use instead to avoid this case?
Here is the code used:
<div class="sharerDataContainer">
<img src="http://tctechcrunch2011.files.wordpress.com/2011/09/perfectworld.png?w=145" width="90" alt="Andrew" />
<div class="sharerData">
<p class="sharerDataTitle">
<a href="http://example.org" target="_blank">
Website Title Here
</a>
</p>
<p class="sharerDataAddress">
mbac.squarespace.com
</p>
<p class="sharerDataDescription">
Congratulations to Rachel Edwards, who won a fabulous Bloom Tea Treatment Box Set (worth £20) from our friends at Running Cupcake
</p>
</div>
</div>
UPDATE:
CSS code:
.sharerDataContainer img {
float: left;
}
.sharerData {
background: none repeat scroll 0 0 transparent;
border: 0 solid #0077A5;
color: #808080;
display: table-cell;
font-size: 11px;
line-height: 15px;
padding: 0 10px !important;
position: relative;
}
.sharerData .sharerDataDescription {
margin-top: 5px;
}
IE7 does not support display: table-cell.
Though it's not really a problem in this instance, because there's no need for it. You can replace it with overflow: hidden to achieve the same effect: http://jsfiddle.net/thirtydot/AmNeV/
the simple cross-browser solution is to wrap the image in another division tag:
<div class="imgContainer">
<img src="" width="90" alt="Andrew" />
</div>
and let it float:
.sharerDataContainer .imgContainer {
float: left;
}
try it! http://jsfiddle.net/9U7e9/