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/
Related
How can I get a line, text and then a line in a straight line?
code. Here is the jsfiddle of my html. I use inline property to make them appear in a straight line. But they do not change.
How to do so that they appear like
---------------------- About Me ---------------------
(^^dotted line above should actually be single line.)
Use this -
#about_me1 hr, #about_me1 h3{
display: inline-block;
vertical-align: middle;
}
Here's updated Fiddle
Try this and have a look to display:inline-block in style
<header id="about_me">
<div id="about_me1">
<hr size="5" align="left" color="black" style="display:inline-block;width:30%;">
<h3 style="display:inline;">About Me</h3>
<hr id = "line" size="5" align="left" width="30%" color="black" style="display:inline-block;width:30%;">
</div>
</header>
Use only one element to show border, which will work in every resolution and reusable:
<header id="about_me">
<div id="about_me1">
<h3><span>About Me</span></h3>
</div>
</header>
#about_me1 {
border-top: 2px solid #FF0000;
position: relative;
margin-top:15px;
}
h3 {
position: absolute;
top: -18px;
text-align:center;
width:100%;
padding:0;
margin:0px;
}
h3 span {
background:#fff;
display: inline-block;
padding: 5px;
}
Demo
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/
I'm trying to format math equations vertically using CSS. For example 5,343 + 32 should be formatted as so:
Line 1: 5,343 (right aligned)
Line 2: + (left aligned) 32 (right aligned) --- Note that the plus sign and bottom number are on the same line.
Line 3: ------ (horizontal line)
I've been fooling around with this for the last hour and have had very little luck.
I laid by HTML out like this:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="sign">+</p>
<p class="lowerNum">32</p>
<p class="line"><hr></p>
</div>
A semantic approach
Here's a semantic approach to marking up an equation that, from the same markup, can be rendered horizontally or vertically by adding a single class. These equations are made up of numbers, an operator, and an equals sign. Here's the markup for an equation:
<span class="equation">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
That alone renders horizontally:
5,343
+
32
=
5,375
With a little CSS, we quickly can transform into a stacked layout. We just add a single stacked class to the equation element:
<span class="equation stacked">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
The following CSS does the magic:
.equation.stacked {
display: inline-block;
}
.equation.stacked .number {
display: block;
margin-left: 1em; /* space for the operator */
text-align: right;
}
.equation.stacked .operator {
float: left;
}
.equation.stacked .equals {
display: block;
height: 0;
border-bottom: solid 1px black;
overflow: hidden;
}
This renders like this:
Here's a JSBin you can explore: http://jsbin.com/afemaf/1/edit
Do you mean something like this?: http://jsfiddle.net/PkfAU/2/
What you would be doing is using divs, because they are better for creating layouts. Paragraphs are also valid, as the other answer points out, but I find it easier to see with divs. In this case you will need a container div, and three horizontal ones, the second of them being also a container.
.plus and .number are floating inside its container .second, because you need them to use the same horizontal space (all floating elements require a wrapper).
HTML:
<div class="container">
<div class="first">5,343 </div>
<div class="second">
<div class="plus">+</div>
<div class="number">32</div>
</div>
<div class="third">
<div class="result">5,375</div>
</div>
</div>
CSS:
.container {
width:200px;
}
.first,
.second {
width:200px;
text-align:right;
display:table;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:200px;
text-align:right;
border-top:1px solid black;
}
I think this may be your best bet:
HTML:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="lowerNum">
<span class="operand">32</span>
<span class="sign">+</span>
</p>
<br class="clear" />
<p class="line"><hr></p>
</div>
CSS:
#textbox { width: 75px; }
.upperNum { text-align: right; }
.operand { float: right; }
.sign { float: left; }
.clear { clear: both; }
Here's a fiddle that shows this effect also:
http://jsfiddle.net/8CPar/
Here, you can contain the bottom line in a paragraph, then give the operator and operand a separate span container that you can float, giving you the desired effect. Then, you add a "clear break" which clears the float, making the horizontal break show correctly.
I hope this helps!
There are some fine examples here, but I went through with the effort of making a fiddle so might aswell post it.
You just need to ensure that widths and alignments are set correctly and it should work out.
My JSFiddle Example.
<div id="list">
<span class="item">5472</span>
<span class="operator">+</span><span class="item operand">32</span>
<hr class="divider"/>
<span class="result">5504</span>
</div>
With css
.list
{
width:50px;
}
span
{
display:block;
margin-left:20px;
font-family:"Lucida Console", Monaco, monospace;
width:50px;
}
.operator
{
float:left;
width:20px;
margin-left:0px;
}
.divider
{
clear:both;
width:40px;
margin-left:20px;
}
.operand
{
float:left;
width:50px;
}
I also created an example using pre, that uses pre formatted text, so it should still be precise.
Classics,
<html>
<head>
<style type="text/css">
.textbox
{
width: 100px;
}
.upperNum
{
text-align: right;
width: 100%;
}
.sign
{
float: left;
text-align: left;
}
.lowerNum
{
text-align: right;
}
.secondline
{
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div class="textbox">
<div class="upperNum">
5,343
</div>
<div class="secondline">
<div class="sign">
+
</div>
<div class="lowerNum">
32
</div>
</div>
<div>
<hr />
</div>
</div>
</body>
</html>
I have recently tried to code a box, contains an image on the left side and next to it an header & paragraph under right like this:
http://gyazo.com/c5165fa45c32f69499768ba95d815328
This is what i have done:
<div class="span4">
<div class="box">
<img src="img/share.png" class="image_margin"/>
<span class="box_title">SHARE</span>
<span id="texting">Upload files straight from you hard disc. Up to 600MB per file upload! the more you earn the more file storage you get.</span>
</div>
</div>
CSS:
.box {
background-image: url("../img/box.png");
width: 305px;
height: 117px;
}
#texting {
font-size: 14px;
}
.image_margin{
margin-top: 25px;
margin-left: 25px;
}
.box_title{
font-size: 24px;
color: #8d8d8d;
margin-left: 15px;
margin-top: 20px;
position: absolute;
}
This is the result:
http://gyazo.com/f600c42f86b51e52de436631fc96656d
Why the text gets out of the box yet its inside the class of the box ?
What have I done wrong? how do I align the title + paragraph like in the first image in CSS so it fits on all screens?
Thank you a lot!
Use align="left" in img tag.
<img src="img/share.png" class="image_margin" align="left"/>
Hope this will help
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/