View Full Version : how to... make line as page divider but not in a table?

12-21-2006, 01:00 AM
k what i'm trying to do is make a line segment that divides my entire page (left | right), and within that, one that divides it top and bottom.. I want a relatively thin line (1px-2-px). I tried puting it in a table but that didn't seem to work; this is due to the fact that i want the line to touch the extremeties of the page (all the way from top to bottom, inclusive). I also want to add some more lines like this that touch other ends of the page, that all connect.

How would I go about doing this?

Note: I also tried <hr> but that only went as far as the table..

Thanks in advance,


12-21-2006, 02:12 AM

12-21-2006, 02:37 AM
How about something like this? CF 103458 Demo (http://jsg.byethost4.com/demos/CF%20103458%20Demo.html)

View it in Firefox or another modern browser for the best effect.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="Author" content="Patrick Garies"/>
<title>CF 103458 Demo</title>

<!-- Tested: Firefox 2 and Internet Explorer 7 -->

<style type="text/css">
* {
margin: 0;
html, body {
height: 100%;
color: black;
font: italic 70px "Palatino Linotype", Palatino, serif;
text-align: center;
body > div {
display: table;
position: absolute;
width: 50%;
height: 50%;
border: solid silver;
body > div > div {
display: table-cell;
vertical-align: middle;
*#top-left {
top: 0;
left: 0;
border-width: 0 1px 1px 0;
background-color: green;
color: white;
*#top-right {
top: 0;
right: 0;
border-width: 0 0 1px 1px;
background-color: tan;
*#bottom-left {
bottom: 0;
left: 0;
border-width: 1px 1px 0 0;
background-color: crimson;
*#bottom-right {
right: 0;
bottom: 0;
border-width: 1px 0 0 1px;
background-color: #222;
color: white;


<div id="top-left">
<div id="top-right">
<div id="bottom-left">
<div id="bottom-right">