CSS - Text Left, Right And Centre?

How does one align the text to the left of a div? I have "text-align:left;" specified, however the text is centered when it is too narrow to fill the screen.

The URL of the page in question is http://what-is-what.com . If you type an illegal character, such as "=", in the Ask box then the narrow text that is returned appears centered.

Other narrow pages on the same site do the same, of course. Tested in Firefox 1.5.0.7 on Ubuntu.

How do I create centered left-justified text? I want it to look something like this:

+---------------SUPPOSE THIS IS MY PAGE---------------+
This paragraph is centered
with respect to the page,
but note that the text is
wrapped around and
left-justified within the
paragraph. +-----------------------------------------------------+


Can I achieve that with CSS without using tables and manipulating cell widths and cell alignments?


.

hi, i'm wondering whether anyone here knows something that i don't about this...

here's some code:

Code:

<div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%">
<table width="380" height="80" border=0 cellspacing=0 cellpadding=0>
<tr>
<td valign="middle">
<div align="center" style="width:380px;">
<span style="font-size:11px; text-align:left;">
aligned to the left.<BR>
but is it centered?<BR>
i think not.<BR>
</span>
</div>
</td>
</tr>
</table>
</div>

i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div.

i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to..

thanks very much for looking at this.

I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other.

In safari it looks fine right now.

http://www.ryanbuckley.ca/photos/

Can anyone help with this little annoyance?

Thanks in advance!
Ryan

i wish to have two bits of text show as described in subject

this is the code i have at present.

i know that i have used a style for an image but how do i do this for text ?

thanks


Code:

<style>
img.floatRight { 
    float: right; 
    margin: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 3px;
	}
</style>
left text here<b class="floatRight"> right text here</b>

When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!!

Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right.

| [image] text .... right-side text |

This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method.

All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method.

Any help or suggestions will be greatly appreciated.
Thanx

Trying to achieve this:



I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far:

http://gatehouse.graffetto.com/floating_divs.html

Code:

Code:

<html>
<head>

<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>

</head>
<body>

<div class="mainDiv">
       <div class="image">test</div>
       <div class="rightAd">test</div>
       <div class="textDiv">
              Text content
       </div>
</div>

</body>
</html> 

I know this is simple i just can't figure it out for some reason.. thanks for any help.

Hi!

Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit.

Basicly, this sums up the issue:
(sorry for the pure-text link, it didn't allow me to put up a propper one... >.<)
http://img205.imageshack.us/my.php?image=cssiebug.png

So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that.

Here is the code that should be of interest in this issue:
Code:

        <div id="bannerContent">
        <!--{{{-->
           <div id="logo">
                <a href="<?PHP echo $home ?>" target="_self"></a>
            </div>
                
            <div id="search">
                <form>
                    <input type="text" class="searchField" name="uSearchQuery">
                    <input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
               </form>
            </div>
        <!--}}}-->
        </div>

Code:

        #bannerContent
        /*{{{*/
            {
            width: 800px;
            height: 158px;
            }
            #logo
            /*{{{*/
                {
                background: url("../images/layout/logo.png") no-repeat;
                
                width: 394px;
                height: 56px;

                position: relative;
                top: 51px;
                left: 24px;

                float: left;
                }
            /*}}}*/
            #search
            /*{{{*/
                {
                width: 331px;
                height: 32px;

                position: relative;
                top: 62px;
                left: 58px;

                display: inline;

                float: left;
                }
                .searchField
                    {
                    background: url("../images/layout/search_field_bg.png") no-repeat;
                    
                    width: 266px;
                    height: 32px;
                    
                    border: none;
                    outline: none;

                    float: left;

                    <?PHP
                    if (!$agentIE && !$agentFF)
                        echo 'padding-left: 10px;' . "\n";
                    else
                        echo 'padding: 8px 0 0 10px;' . "\n";
                    ?>
                    }
                .searchSubmit
                    {
                    background: url("../images/layout/search_button.png") no-repeat;

                    width: 55px;
                    height: 32px;

                    margin-left: -10px;

                    border: none;
                    outline: none;

                    cursor: pointer;

                    float: left;
                    }
            /*}}}*/
        /*}}}*/

Thanks a bunch in advance!

I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.).

Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left".

What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it?

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!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" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

I'm trying to use a dead centre script:
Code:

div {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
}
#horizon        
	{

	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50px;
	left: 20px;
	}
/* following rules are invisible to IE 5 \*/
#horizon        
	{

	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: hidden;
	display: block;
	}
 /* end IE 5 hack */
#content    
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #ffffff;
	margin-left: -400px;
	position: absolute;
	top: -230px;
	left: 50%;
	width: 800px;
	height: 459px;
	visibility: visible;
	border:1px solid #999999; width:800px; height:459px;
	}

And found a hack that is supposed to work with mac IE5 (the /* IE5 note there), but dont know what it's doing for safari. Does anyone know any workarounds for safari or know a browser detection script that can lead non-mac browsers to my dead center page and mac browsers to another page that is maybe only simply centered.