How do i left and right align text on multiple lines, e.g.:
┌─────────────────────────────────────┐
│ Tums 29 │
│ Oxydativedecarboxilization ATP │
│ appdata C:\Users\Ian\AppData\Local │
└─────────────────────────────────────┘
e.g.:
Note: A single-line variant of this question has been asked before
Here's a sample of some attempts i've found on SO and elsewhere, and the situations where left+right align was tried:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
<UL>
<LI class='line1'><P class='left'>Tums<P class='right'>29
<LI class='line2'><P class='left'>Oxydativedecarboxilization<P class='right'>42
<LI class='line3'><P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</UL>
<DIV>
<P class='left'>Tums<P class='right'>29
<P class='left'>Oxydativedecarboxilization<P class='right'>42
<P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</DIV>
</BODY>
</HTML>
Which renders incorrectly as:
Desired rendering:
Bonus reading
HTML/CSS - Right and left align on the same line?
Cross-browser CSS for left align and right align on the same line
You just have to clear your floats. http://jsfiddle.net/P7KuB/2/
<div>
<p><span class='left'>Tums</span><span class='right'>29</span></p>
<p><span class='left'>Oxydativedecarboxilization</span><span class='right'>42</span></p>
<p><span class='left'>appdata</span><span class='right'>C:\Users\Ian\AppData\Local</span></p>
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.wrap { clear:both; }
<DIV>
<P class="wrap"><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P class="wrap"><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P class="wrap"><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
See: http://jsfiddle.net/thirtydot/HkybR/2/
HTML:
<div class="info">
<div>
<span class="left">Tums</span><span class="right">29</span>
</div>
<div>
<span class="left">Oxydativedecarboxilization</span><span class="right">ATP</span>
</div>
<div>
<span class="left">appdata</span><span class="right">C:\Users\Ian\AppData\Local</span>
</div>
</div>
Could probably be more semantic.
CSS:
.info {
margin: 16px;
padding: 8px;
background: #fff;
float: left;
font-size: 21px;
clear: both;
}
.info > div {
overflow: hidden;
text-align: right;
}
.info .left {
float: left;
padding-right: 10px;
}
<UL style="list-style-type: none;">
<LI class='line1'>Tums<div class='right'>29</div></LI>
<LI class='line2'>Oxydativedecarboxilization<div class='right'>42</div></LI>
<LI class='line3'>appdata<div class='right'>C:\Users\Ian\AppData\Local</div></LI>
</UL>
Renders as...
You may also need to change the margins of the UL element.
EDIT: I guess the clear method is a more elegant solution!
Your test case was way too complicated. Here is a working multi-line version:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear:both;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">RightRightRightRightRightRight RightRight RightRight RightRight</P>
</DIV>
</BODY>
</HTML>
CSS add
p, li { overflow:hidden; }
Example : http://jsbin.com/asulih/
Related
When I am using the CSS float Property its working partly perfect
as we can see in the HTML that ID #contact float perfect in the right side but the ID #workExperiance should be below the full name in normal order how to do that its also floating.
Require detailed explanation
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
.main {
color: #4EC5C1;
}
#name {
float: left;
}
#contact {
float: right;
list-style-type: none;
}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa#gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</div>
<section id="workExperiance">Work Experience</section>
</body>
</html>
add div{float:left; width:100%;} it'll work
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
div{float:left; width:100%;}
.main{color: #4EC5C1;}
#name{float:left;}
#contact{float:right;list-style-type:none;}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<section><h1 id = "name"><span class = "main">full </span> Name</h1></section><section>
<ul id="contact"><li><span class = "main">Cell:</span> +1-000000000</li>
<li><span class = "main">Email: </span> aaaaaa#gmail.com</li>
<li><span class = "main">Location:</span> NY,USA.</li></ul></section>
</div>
<section id="workExperiance">Work Experience</section>
</body>
</html>
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
.main{color: #4EC5C1;}
#name{float:left; display:block;}
#contact{float:right;list-style-type:none; width:50%; padding:0; display:block}
#workExperiance{
float:left;
display:block;
}
#left{
width:40%;
float:left;
}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<div id="left">
<section><h1 id = "name"><span class = "main">full </span> Name</h1></section> <section id="workExperiance">Work Experience</section></div><section>
<ul id="contact"><li><span class = "main">Cell:</span> +1-000000000</li>
<li><span class = "main">Email: </span> aaaaaa#gmail.com</li>
<li><span class = "main">Location:</span> NY,USA.</li></ul></section>
</div>
</body>
</html>
Always use display:block and special width when floating
Use clear: both Read more about Clear
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. The clear property applies to both floating and
non-floating elements.
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
section#workExperiance {
clear: both;
}
.main {
color: #4EC5C1;
}
#name {
float: left;
}
#contact {
float: right;
list-style-type: none;
}
<div>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa#gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</div>
<section id="workExperiance">Work Experience</section>
P.S: And better use div in this case and no need to use section. Normally section use for parent wrapper.
Is it possible to place text in html left and right
I want it to place the text left and right on the same line.
My HTML code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPG Clicker</title>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
<left>Level: <span id="level">1</span></left>
<right>Gon level: <span id="gon">0</span></right>
</body>
</html>
Demo
There is no <left> or <right> tag in html.
To achieve what you want to do, you will have to do it with CSS.
.align-left {
float: left;
width:33%;
}
.align-center {
text-align: center;
display: inline-block;
width:34%;
}
.align-right {
float: right;
text-align: right;
width:33%;
}
<html>
<head>
</head>
<body>
<span class="align-left">Level: <span id="level">1</span></span>
<span class="align-center">Text</span>
<span class="align-right">Gon level: <span id="gon">0</span></span>
</body>
</html>
HTML
<div id="textbox">
<p class="alignleft">Text on the left.</p>
<p class="alignright">Text on the right.</p>
</div>
CSS
.alignleft {
float: left;
}
.alignright {
float: right;
}
SOURCE:Left Align and Right Align Text on the Same Line
Try following :
<span style="float:right">Right</span>
<span style="float:left">Left</span>
You can use either:
a table with one row and two columns, the left one left-aligned, the right one right-aligned;
a CSS grid system with a "row" and two "columns": right-align the second column (see eg. Bootstrap;
a div with float: right; text-align: right; that you place before your left-aligned content.
try using this:
<left style="float:left">Level: <span id="level">1</span></left>
<center style="
float: left;
position: relative;
left: 45%;
">Text</center>
<right style="float:right">Gon level: <span id="gon">0</span></right>
you can get more info about floats and position from w3schools.com
I'm doing a simple test website to practice html. These are the image align variants I've tried that haven't worked:
<style type="text/css">
img {
image-align: center;
border: 2px dashed gray;
height: 200px;
width: 140px;
}
</style>
<img src="images/htmlphoto2.jpg" alt="profile pic of man wearing tie" align="middle"/>
<style type="text\css">
img {
margin-right: auto;
margin-left: auto;
}
<style type="text\css">
img {
display: block;
margin: 0 auto;
}
</style>
full code: I'm using a combination of internal style sheet and inline styling for practice.
<!-- autobiobrevio -->
<!-- 8/21/14 11:00 - 11:50 Structure completed -->
<!--8/23/14 10:00 pm - Alignment -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>biosite</title>
<style type="text/css">
h1 {
text-align: center;
}
img {
image-align: center;
border: 2px dashed gray;
height: 200px;
width: 140px;
}
</style>
</head>
<body>
<h1> Steve's Autobiobrevio </h1>
<img src="images/htmlphoto2.jpg" alt="profile pic of guy wearing tie" />
<br>
<br>
<table>
<tr>
<td>
<ul> <span style="font-family: Impact"> De moi </span>
<li> Born October 1972 </li>
<li> CT </li>
<li> blah blah blah </li>
</ul>
</td>
<td>
<ul> <span style="font-family: Impact"> Hobbies </span>
<li> Guitar </li>
<li> HTML </li>
<li> Hiking </li>
</ul>
</td>
<td>
<ul> <span style="font-family: Impact"> Fav Guitarists </span>
<li> David Gilmour </li>
<li> Muddy Waters </li>
<li> Dave Navarro </li>
</ul>
</td>
</table>
<div style="width: 800px; height: 100px; background-color: red" </div>
</body>
</html>
Thank you.
Can you provide the full html code?Anyway
First remove align="middle " and try this even if it's similar to yours
img{
display:block;
margin:auto;
}
try to add display:block to your
html :
<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie" align="middle"/>
css :
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
JSFIDDLE DMEO
I solved my problem by using the inline style tag:
But why didn't the inline style sheet work?
Try this,It Will definately work..
Image Code :
<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie"/>
Here goes the css :
<style type=text/css>
img.displayed {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
Hop it will work for you too..
You can also try:
<style type="text/css">
img {
position:absolute;
border:2px dashed gray;
height:200px;
width:140px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
I'm trying to align the tab divs horizontally, but It doesn't work and I can't find my fault?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
</div>
</body>
</html>
style.css:
#tabs {
overflow: hidden;
}
#tab {
float: left;
}
You've mixed up classes and ID's. Modify your css to this:
.tabs {
overflow: hidden;
}
.tab {
float: left;
}
#tab should be .tab, according to your HTML
You have to float your class .tab instead of an id. Also, when you float elements you need to clear at one point. Like this:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#tabs {
overflow: hidden;
}
.tab {
float: left;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/hM62P/
You are using #tabs and #tab, which is not at all available in your HTML. # refers to ID. You need to use .tabs and .tab which refers to a class.
.tabs{
width:100%;
border:1px solid red;
}
.tab{
float:left;
}
Demo Link
Use this CSS,
.tabs {
width:100%;
}
.tab {
width:25%;
float:left;
}
The problem is that you are using #tab instead of .tab. Here id is not used. # is for id
I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
Home
</div>
<div class="menubutton">
Info
</div>
<div class="menubutton">
Werben
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
Kontakt & Impressum
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
The problem is that the logo is not on a line with the menu buttons…
Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?
Add float:left to your #header_logo div.
jsFiddle example
Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.
You may also try for display: inline-block;
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Also do check this article