...

View Full Version : 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


<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 -
<!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
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?

<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.....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum