keeping this on the same line?

sphinx1994 · 05-01-2009, 05:32 PM

hello,

I want some text on the left , and some on the right, but on the same line, because when i use this code it puts the first bit of text on 1 line, and the next bit on the right but on the second line, how can i fix?

Thanks

Code:

<div align="left"><span class="copy">On the left</span>
<div align="right"><span class="copy">I want this aligned right but on the same line, not on the line below?</span>

ajhauser · 05-01-2009, 07:39 PM

You need to at least add a class defining the width of your div, or you could float the top div left and the bottom div right - but make sure to check it in several browsers because off the top of my head I know IE and FFox would handle this a little different, but I'm not sure how.

If this is a list of data and is a valid use for a table, then use a table.

I think the main message for designers is to get away from tables for layout purposes, but they are fine for diaplaying content as long as it makes sense to use them.

Excavator · 05-02-2009, 02:10 AM

Hello sphinx1994,
You don't close your divs and I'm not so sure they are needed anyway. If you are trying to do a 2 column layout then it might be done like this demo - http://nopeople.com/CSS/equal_length_columns/index.html

If it's just two lines of text then the spans should be enough markup to control it.
Try it like this -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 14px "Comic Sans MS";
	background: #FC6;
	text-align: center;
}
* {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
}
#container {
	width: 800px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
.left {
	float: left;
}
.right {
	float: right;
}
</style>
</head>
<body>
    <div id="container">
		<span class="left">On the left</span>
		<span class="right">I want this aligned right but on the same line, not on the line below?</span>
    <!--end container--></div>
</body>
</html>

abduraooft · 05-02-2009, 08:39 AM

Quote:

I want some text on the left , and some on the right, but on the same line, because when i use this code it puts the first bit of text on 1 line, and the next bit on the right but on the second line, how can i fix?

Code:

<div ><span >On the left</span>
<span>I want this aligned right but on the same line, not on the line below?</span>
</div>

?

saifu · 05-02-2009, 08:43 AM

pls close the div

<div align="left"><span class="copy">On the left</span></div>
<div align="right"><span class="copy">I want this aligned right but on the same line, not on the line below?</span></div>

try this.....