Hello.
I appear to be having a mental block with the following... I cannot get it going at all!
Basically, one of our old layouts used a page which had a table with some information within it. I'm trying to get CSS to achieve the same...
The table code was:
<table cellspacing="0" cellpadding="10" border="1">
<tr>
<td colspan="2">text here</td>
</tr>
<tr>
<td style="width: 50%;" valign="top">
Text here.
</td>
<td style="width: 50%;" valign="top">
Text here.
</td>
</tr>
</table>
I've tried floating things etc, but I cannot get it to go at all!
Thanks for any help.<div style="width:49%;float:left;">stuff</div>
<div style="width:49%;float:left;">stuff</div>Very rough, and maybe very bad, but very simple and very quickly put together.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Example</title>
<meta http-equiv="content-type" content="text/html;iso-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
/*<![CDATA[*/
#container {
width: 30em;
border: 1px solid #000;
}
#header {
padding: 0.5em 0;
text-align: center;
border-bottom: 1px solid #000;
}
#header h1 {
padding: 0;
margin: 0;
}
#right {
width: 20em;
border-left: 1px solid #000;
float: right;
}
#left {
float: left;
width: 9em;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="right">
<p>Text here</p>
</div>
<div id="left">
<p>Text here</p>
</div>
<div style="clear: both;" />
</div>
</body>
</html>Thanks very much for that.
Though I realize my genius, awesome sample layout is just too good to pass up (hehehe), you might want to take a look at Negative Margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->), for an alternate (and probably better) method of getting that look. 
No need for negative margins here, thats only required when one of the column widths is variable. This might be slightly better though (only one float instead of 2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Example</title>
<meta http-equiv="content-type" content="text/html;iso-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
/*<![CDATA[*/
#container {
width: 30em;
border: 1px solid #000;
}
#header {
padding: 0.5em 0;
text-align: center;
border-bottom: 1px solid #000;
}
#header h1 {
padding: 0;
margin: 0;
}
#right {
width: 20em;
border-left: 1px solid #000;
float: right;
}
#left {
width: 9em;
margin-right:20em;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="right">
<p>Text here</p>
</div>
<div id="left">
<p>Text here</p>
</div>
</div>
</body>
</html>
you can add a clearing footer as neccessary.
I appear to be having a mental block with the following... I cannot get it going at all!
Basically, one of our old layouts used a page which had a table with some information within it. I'm trying to get CSS to achieve the same...
The table code was:
<table cellspacing="0" cellpadding="10" border="1">
<tr>
<td colspan="2">text here</td>
</tr>
<tr>
<td style="width: 50%;" valign="top">
Text here.
</td>
<td style="width: 50%;" valign="top">
Text here.
</td>
</tr>
</table>
I've tried floating things etc, but I cannot get it to go at all!
Thanks for any help.<div style="width:49%;float:left;">stuff</div>
<div style="width:49%;float:left;">stuff</div>Very rough, and maybe very bad, but very simple and very quickly put together.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Example</title>
<meta http-equiv="content-type" content="text/html;iso-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
/*<![CDATA[*/
#container {
width: 30em;
border: 1px solid #000;
}
#header {
padding: 0.5em 0;
text-align: center;
border-bottom: 1px solid #000;
}
#header h1 {
padding: 0;
margin: 0;
}
#right {
width: 20em;
border-left: 1px solid #000;
float: right;
}
#left {
float: left;
width: 9em;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="right">
<p>Text here</p>
</div>
<div id="left">
<p>Text here</p>
</div>
<div style="clear: both;" />
</div>
</body>
</html>Thanks very much for that.
Though I realize my genius, awesome sample layout is just too good to pass up (hehehe), you might want to take a look at Negative Margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->), for an alternate (and probably better) method of getting that look. No need for negative margins here, thats only required when one of the column widths is variable. This might be slightly better though (only one float instead of 2)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Example</title>
<meta http-equiv="content-type" content="text/html;iso-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
/*<![CDATA[*/
#container {
width: 30em;
border: 1px solid #000;
}
#header {
padding: 0.5em 0;
text-align: center;
border-bottom: 1px solid #000;
}
#header h1 {
padding: 0;
margin: 0;
}
#right {
width: 20em;
border-left: 1px solid #000;
float: right;
}
#left {
width: 9em;
margin-right:20em;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="right">
<p>Text here</p>
</div>
<div id="left">
<p>Text here</p>
</div>
</div>
</body>
</html>
you can add a clearing footer as neccessary.