Forum Moderators: not2easy
I'm taking a first crack at moving away from tables to divs...code below. Problem is, I can't get the two text boxes to sit beside the image box...instead they all sit one on top of the other. What am I missing? Can someone set me on the right path?
Many thanks!
Josh
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><HEAD><TITLE>User Registration</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META http-equiv=content-language content=en>
<STYLE>HTML {
FONT-SIZE: 15px; COLOR: #000; BACKGROUND-COLOR: #fff
}
BODY {
FONT-SIZE: 15px; COLOR: #000; BACKGROUND-COLOR: #fff
}#user_registration {
BORDER-RIGHT: #6495ed 1px solid;
BORDER-TOP: #6495ed 1px solid;
MARGIN: 100px auto auto;
BORDER-LEFT: #6495ed 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #6495ed 1px solid;
BACKGROUND-COLOR: #ecf1ef;
}
#image {
background-color:#FFFFFF;
width:20%;
height:200px;
display-inline-block;
}
#imagenote {
width:400px;
height:100px;
background-color:#FFCCFF;
display-inline-block;
}
#verify {
top:100px;
width:400px;
height:100px;
background-color:#000000;
display:inline-block;
}
</STYLE>
<META content="MSHTML 6.00.2900.3199" name=GENERATOR></HEAD>
<BODY>
<FORM id=user_registration name=user_registration action="" method=post>
<DIV ID="image">
Image
</DIV>
<DIV ID="imagenote">
This is the upper text box
</DIV>
<DIV ID="verify">
This is the lower text box
</DIV>
</FORM>
</BODY>
</HTML>
I so hate doing this when people are "moving away" but to save you going down the wrong route.. there's a couple of things you might like to know about display: inline-block
let's start with the good news,
1. vivalasvegas is right there is an error in a couple of the rules
2. Opera and (I think Safari) support this method well.
bad news
1. FF does not as yet support
display: inline-blockinline-blockIMHO to save yourself getting into the murky depths you should perhaps use float as that is much more reliable cross-browser, some day soon we will be able to use inline blocks as they are meant, and indeed they have their uses just now if you want to get into mozilla proprietary properties - but full support is not expected until CSS3 if I'm remembering correctly.
If you're just starting out and want to see what can be done with inline-blocks, to get it to work while using IE you would need to add
display: inline;e.g.
<style type="text/css" media="screen">
#image, #imagenote, #verify {display: inline-block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#image, #imagenote, #verify {display: inline;}
</style>
<![endif]-->
Actually testing your design suggests that the use of float would be the right choice anyway, if you want both those blocks to sit beside your image?
-Suzy
