Fixed Column with adjustable margins

Don’t have my Sitepoint book handy…

There is some way that you can create a fixed width column and then make it so it is centered.

The goal is to allow you to have better control over content regardless of how narrow or wide someone’s monitor is.

Can someone help me figure out how to do this?

(I have limited content as I learn Web Design, and I want it smack dab in the center of my laptop and not all the way to the left.)

Thanks,

Debbie

You haven’t allowed enough room in one line for the label and the input.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Log In</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="login.css">
<style type="text/css">
html,body{margin:0;padding:0}
body {
    width:600px;
    margin:0 auto;
    border: 1px solid #FF0000;
    position:relative;
    padding:5px;
}
h1 {
    font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
    color: #00008B;
    background-color: #E3F2F7;
    border: 1px inset #00008B;
    width: 200px;
}
input.btn {
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px outset #00008B;
    margin-left:38&#37;;
}
form div {
    clear: left;
    margin: 0;
    padding: 0;
    padding-top: 0.6em;
    width: 55%;
    margin: 0 auto;
}
form div label {
    float: left;
    width: 35%;
    font: bold 0.9em Arial, Helvetica, sans-serif;
    text-align:right;
    padding:1% 2% 0 0;
}
</style>
</head>
<body>
<h1>Log In</h1>
<form method="post" action="landingpage.php">
    <div>
        <label for="email">E-mail:</label>
        <input type="text" name="email" class="txt" id="email" />
    </div>
    <div>
        <label for="password">Password:</label>
        <input type="password" name="password" class="txt" id="password" />
    </div>
    <div>
        <input type="submit" name="btnSubmit" value="Login" class="btn" id="btnSubmit" />
    </div>
</form>
</body>
</html>


You have a fixed width and yet you have used percentages and also pixel widths so how do you know it will fit unless you first convert it to pixels.

In most cases when you have a pixel width container you should use pixel widths for the inner containers (unless you want to dynamically change the parent and have the children automatically adjust which percentage would allow).

What is the difference between a class and an id and why should you use one over the other?

This has been asked hundreds of times on the forums so a quick search will yield you lots of information but in short:

An id is unique and applies to one unique element per page. You cannot use the same ID more than once on a page.

Classes are ubiquitous and you can use them as many times as you like.

IDs carry more weight than classes (see specificity in the sitepoint reference) and will win out.

Usually ids are used when you want to identify main structural elements that are unique to the page such as header,footer,main, sidebar etc.

Classes are used for everything else (e.g. .warning{color:red}}

You would also use IDs when you have some javascript that needs to find a certain element as it is easier to find it by ID than running through all the classes to see if it’s the right one.

In truth and if you didn’t use js you could just use classes but its generally accepted that main structural elements should be ids and all the rest are classes.

Looks like I better get ahold of my Sitepoint book and start reading again! :rolleyes:

Thanks, Paul!

Debbie

I’m on my Macbook which is wider than taller.

I am playing around with a Log-In screen.

I want everything in the center of my monitor because it looks weird how it previously aligned to the far-right.

I don’t have my Sitepoint book on CSS with me, but I remember how you could center a fixed width column so everything was in the center and the edges were just filled with space or some fancy background.

My goal is on PHP right now, so I wanted a way to pretty up my limited text and form controls without spending a week learning fancy page designs.

Make more sense?

It means nothing :slight_smile: - it’s just a classname that I made up that you would apply to the div so that the styles know where to attach themselves.

What is the difference between a class and an id and why should you use one over the other?

Debbie

I tried this code, but the results seem weird…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Log In</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="login.css">
	</head>
	<body>
		<h1>Log In</h1>
		<form method="post" action="landingpage.php">
			<div>
				<label for="email">E-mail:</label>
				<input type="text" name="email" class="txt" id="email" />
			</div>
			<div>
				<label for="password">Password:</label>
				<input type="password" name="password" class="txt" id="password" />
			<div>
				<input type="submit" name="btnSubmit" value="Login" class="btn" id="btnSubmit" />
			</div>
		</form>
	</body>
</html>


html{
	width:600px;
	margin:0 auto;
	border: 1px solid #FF0000;
}

h1 {
		font: 1.2em Arial, Helvetica, sans-serif;
}

input.txt {
	color: #00008B;
	background-color: #E3F2F7;
	border: 1px inset #00008B;
	width: 200px;
}

input.btn {
	color: #00008B;
	background-color: #ADD8E6;
	border: 1px outset #00008B;
}

form div {
	clear: left;
	margin: 0;
	padding: 0;
	padding-top: 0.6em;
	width: 35%;
	margin: 0 auto;
}

form div label {
	float: left;
	width: 40%;
	font: bold 0.9em Arial, Helvetica, sans-serif;
}


The labels should be to the left of the text boxes.

Debbie

Hi,

Unless I misunderstand what you want you would just give the element the width that you want and then use auto side margins to automatically center it.

e.g.


.main{
width:760px;
margin:0 auto;
}


Or do you mean something more complex.?

You could use min and max-width with pixel measurements to produce a fluid range.


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

.content {
    width:100&#37;;
    min-width:480px;
    max-width:1160px;
    margin:0  auto;
    background:red;
}
</style>
</head>
<body>
<div class="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>
</body>
</html>


Note ie6 doesn’t understand min and max width and gets 100% width instead.

So I just wrap whatever it is I want to center in <div> tags?

e.g.


.main{
width:760px;
margin:0 auto;
}


Or do you mean something more complex.?

No, I think that was it.

BTW, what does .main mean?

Debbie

Essentially yes but it begs more questions as to exactly what you need but the auto margins on the div that has a fixed width will center it automatically.

BTW, what does .main mean?

It means nothing :slight_smile: - it’s just a classname that I made up that you would apply to the div so that the styles know where to attach themselves.


<div class="main"><p>Main content stuff here</p></div>

You can call it anything you like (as long as it makes sense and describes the content that it holds rather than its appearance).