Hi,
Im not really sure the best way to discribe this, but i have my layout which is fine and i now need to do one thing.
I need it to reg_left and reg_right to be next to each, the reg_right is currently under it. As you can see i have set the margin-right on reg_left to 100px which is the same as reg_right.
The problem is when i put float:left on both of them them seam to come OUT the reg_fieldset?
Any ideas on how to do this. The reason why is i dont want reg_right to change size but i do want reg_left to change with screensize.
Thanks
Adam
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding: 2em;
padding-bottom: 8em;
font-family: arial, sans-serif;
background-color:#CC99CC;
}
#reg_fieldset {
margin:0;
border: solid black thin;
}
#reg_header {
border-bottom:1px solid #000000;
background-color:#CC99CC;
padding:2px;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#FFFFFF;
}
#reg_smlheader {
font:Arial, Helvetica, sans-serif;
font-weight:100;
font-size:11px;
color:#FFFFFF;
}
#reg_left {
left:0;
margin-right:100px;
border:1px solid #000000;
}
#reg_right {
width:100px;
border:1px solid #000000;
}
#outsidediv {
padding: 1em;
border: solid thin #000000;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="outsidediv">
<form method="post" action="<?PHP echo $_SERVER['PHP_SELF']."?val=1"; ?>">
<div id="reg_fieldset">
<div id="reg_header">Personal Information<br><span id="reg_smlheader">blah</span></div>
<div id="reg_left">
Hello
</div>
<div id="reg_right">
Hello
</div>
</div>
</form>
</div>
</body>
</html>This is one solution. As with all css solutions it all depends on how much text will be in a column and how you want the text to flow in relation to an adjacent column.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding: 2em;
padding-bottom: 8em;
font-family: arial, sans-serif;
background-color:#CC99CC;
}
#reg_fieldset {
margin:0;
border: solid black thin;
}
#reg_header {
border-bottom:1px solid #000000;
background-color:#CC99CC;
padding:2px;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#FFFFFF;
}
#reg_smlheader {
font:Arial, Helvetica, sans-serif;
font-weight:100;
font-size:11px;
color:#FFFFFF;
}
#reg_left {
float:left;
left:0;
margin-right:0px;
border:1px solid #000000;
}
#reg_right {
float:right;
width:100px;
border:1px solid #000000;
}
#outsidediv {
padding: 1em;
border: solid thin #000000;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="outsidediv">
<form method="post" action="<?PHP echo $_SERVER['PHP_SELF']."?val=1"; ?>">
<div id="reg_fieldset">
<div id="reg_header">Personal Information<br><span id="reg_smlheader">blah</span></div>
<div id="reg_left">
<div id="reg_right">Hello reg_right</div>
Hello reg_left
</div>
<div style="clear:both;"></div>
</div>
</form>
</div>
</body>
</html>
Im not really sure the best way to discribe this, but i have my layout which is fine and i now need to do one thing.
I need it to reg_left and reg_right to be next to each, the reg_right is currently under it. As you can see i have set the margin-right on reg_left to 100px which is the same as reg_right.
The problem is when i put float:left on both of them them seam to come OUT the reg_fieldset?
Any ideas on how to do this. The reason why is i dont want reg_right to change size but i do want reg_left to change with screensize.
Thanks
Adam
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding: 2em;
padding-bottom: 8em;
font-family: arial, sans-serif;
background-color:#CC99CC;
}
#reg_fieldset {
margin:0;
border: solid black thin;
}
#reg_header {
border-bottom:1px solid #000000;
background-color:#CC99CC;
padding:2px;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#FFFFFF;
}
#reg_smlheader {
font:Arial, Helvetica, sans-serif;
font-weight:100;
font-size:11px;
color:#FFFFFF;
}
#reg_left {
left:0;
margin-right:100px;
border:1px solid #000000;
}
#reg_right {
width:100px;
border:1px solid #000000;
}
#outsidediv {
padding: 1em;
border: solid thin #000000;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="outsidediv">
<form method="post" action="<?PHP echo $_SERVER['PHP_SELF']."?val=1"; ?>">
<div id="reg_fieldset">
<div id="reg_header">Personal Information<br><span id="reg_smlheader">blah</span></div>
<div id="reg_left">
Hello
</div>
<div id="reg_right">
Hello
</div>
</div>
</form>
</div>
</body>
</html>This is one solution. As with all css solutions it all depends on how much text will be in a column and how you want the text to flow in relation to an adjacent column.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding: 2em;
padding-bottom: 8em;
font-family: arial, sans-serif;
background-color:#CC99CC;
}
#reg_fieldset {
margin:0;
border: solid black thin;
}
#reg_header {
border-bottom:1px solid #000000;
background-color:#CC99CC;
padding:2px;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#FFFFFF;
}
#reg_smlheader {
font:Arial, Helvetica, sans-serif;
font-weight:100;
font-size:11px;
color:#FFFFFF;
}
#reg_left {
float:left;
left:0;
margin-right:0px;
border:1px solid #000000;
}
#reg_right {
float:right;
width:100px;
border:1px solid #000000;
}
#outsidediv {
padding: 1em;
border: solid thin #000000;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="outsidediv">
<form method="post" action="<?PHP echo $_SERVER['PHP_SELF']."?val=1"; ?>">
<div id="reg_fieldset">
<div id="reg_header">Personal Information<br><span id="reg_smlheader">blah</span></div>
<div id="reg_left">
<div id="reg_right">Hello reg_right</div>
Hello reg_left
</div>
<div style="clear:both;"></div>
</div>
</form>
</div>
</body>
</html>