Forum Moderators: not2easy
I'm new to using <div>s to create site layouts, im used to using tables but thought i'd try the newer way. Everything was going fine until i came across this problem.
When users do things on the site that brings back messages i want to show them in a box with a border around it, see below.
+------------------------+
¦ Error invalid username ¦
+------------------------+
However when i try to use a <div> to do this i get the following
+---------------------------------------------------------------------+
¦ Error invalid username ¦
+---------------------------------------------------------------------+
Basically it fills the entire page and dosn't wrap around the text.
Any help appreciated.
Unfortunatly i cannot provide a link because the site is on a school intranet.
Thanks again
<html>
<head>
<title>IT Helpdesk :: Login</title>
<link rel="stylesheet" href="/helpdesk/css/main.css">
</head>
<body>
<center>
<div id="container">
<div id="header"><img src="/helpdesk/images/header.gif"></div>
<div id="navbar">
<center>
Navigation
</center>
</div>
<div id="content">In order to report or view faults you must first login.
<br><br>
<center>
<div id="box">
<form action="login.php" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2">Remember login: <input type="checkbox" name="remember" value="yes"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="login" value="Login"></td>
</tr>
</table>
</form>
</div>
</center>
</div>
</div>
</center>
</body>
</html>
And this is main.css
body{
background:#EAEAEA;
}
body,td,p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
#container{
width:75%;
border:#999999 1px solid;
background:#FFFFFF;
text-align:left;
}
#content{
padding:10px;
}
#navbar{
padding:4px 0px 4px 0px;
width:100%;
background-color:#000055;
color:#FFFFFF;
border-top:#999999 1px solid;
border-bottom:#999999 1px solid;
}
#box{
border:#999999 1px solid;
padding:5px;
display:inline;
}
Also i've noticed this problem also occurs when text is placed onto 2 lines without a table
I don't know exactly what you want, but it seems that you may want to FLOAT your div to the left (instead of display:inline). Floating is tricky business for newcomers, but it imperative to learn properly (it's a very key element to web design now). Basicly, it shrinks the width of the element to it's minimum, and pushes it to the side of wherever it would normally be, allowing text and other inline content to wrap around it. The code you'd probably want to use is: float:left;clear:both; the clear is so that you don't have other divs or floats on the same line.
Next up, is making it look pretty, by adding margins and padding and a border (or even a background color), something like "margin:50px 100px" (50px top&bottom, 100px sides) might be good, and "padding:20px". Those are just guess values, they may be too large for you.
Lastly, there's some disagreements I have with the design of the page which is not too related to your problem or inquery:
<center> is a useless tag now, you can do the same things with divs, just give it a width, and then type "margin:x auto" (x is for whatever top/bottom margin you want)
<table>s should not be used for non-tabular data situations; It's called semantic use of HTML elements, and it has numerous benefits (won't I won't mention now).
This is a minor thing: I noticed you have only a image inside your header div. If the image is important text, such as heading text, page title, or something like that, you can keep it in that format, just add an ALT attribute to the tag which describes what the image says.
If it's heading text, then you should also include an <h1> element after your header div, and somehow hide it from normal view (just so that screenreaders, and search spider bots can read it). One way I think will work well would be to set the height of the h1 to 1 (or 0). There are other ways, but they may not be as effective)
If it's an unimportant image (such as only pictures, or decoration), then you should assign it as the background-image of the div, and set a height for the div.
Lastly, and most importantly, it seems you have no doctype specified for your page! Do a search (here or via the web, both should be easy) for the various doctypes, and copy and paste it before the <html> tag.
I recommend HTML 4.01 transitional, make sure it includes the link to the DTD for it to be a FULL valid doctype.
[edited by: Xapti at 3:29 am (utc) on Oct. 18, 2007]
