Want items next to eachh other

timgerr · May 9, 2007

Hey all, I love to program but this CSS stuff is hard for me. I want to make a table less form and I also want to learn what is happening. I have 3 elements, and I want them all next to each other. Again I am learning.

Code:

<html>
	<head>
		<style type="text/css">
			#container {
				width:600px;
				height:30px;
				border:dotted;
			}
			label{
				float: left;
				width: 120px;
				font-weight: bold;
			}
			input {
				width: 80px;
				font-weight: bold;
				color:red;
			}
			#left {
				font-weight: bold;
				color:blue;
			}
		</style>
			
	</head>
	<body>
		<div id="container">
			<label>Left</label>
			<input type="button" value="middle">
			<div id="left">This is a test</div>
		</div>
	</body>
</html>

I want it to look like this;

Code:

Left                   A Button               This is a test

not to that scale but all on the same line. How can I do this...

Thanks,
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

Vragabond · May 9, 2007

You need to understand the differences in how elements are displayed (as blocks or inline elements) and which rules apply to which. When you know that, it will be easy to combine them to form something you want. Since you've only given us a sample of what you want it is hard to say what is the best route, but maybe it would be best to center text in your div (button as an inline will be centered) and float label and div left and right respectively.

I would suggest you read up on css from one of the many places online, maybe htmldog tutorials would be a nice start. Then completely design the way you want it to look and then use css to style it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

monksnake · May 9, 2007

Take a look at this, is this where you want the div id="left"??

Code:

<!DOCTYPE html SYSTEM "thisDTD.dtd">
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL] 
    <head>
        <style type="text/css">
            #container {
                width:600px;
                height:30px;
                border:dotted;
            }
            label{
                float: left;
                width: 120px;
                font-weight: bold;
            }
            input {
                width: 80px;
                font-weight: bold;
                color:red;
            }
            #left {
                font-weight: bold;
                color:blue;
                [!]float:right;[/!]
            }
        </style>
            
    </head>
    <body>
        <div id="container">
            <label>Left</label>
            [!]<div id="left">This is a test</div>
            <input type="button" value="middle">[/!]
        </div>
    </body>
</html>

I'll explain what's going on if this is what you wanted.

[monkey]

<.

JRBeltman · May 14, 2007

Simply add 'float: left; display: inline;' to all your child declarations and that should do.

You could also use he display: block if you like.

And look up on google how to use CSS...

JR (

http://www.jrbeltman.com)

IT = Logic (except for a well known OS where it equals luck) -> Back to the Basics!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Want items next to eachh other

timgerr

IS-IT--Management

Vragabond

Programmer

monksnake

Programmer

JRBeltman

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor