Tonethemoan wrote:Hi! My site is not live. I have reached a couple of pages where we show lists of words and they vary between English and North American:
(Brit) Candy Floss, (NA) Cotton Candy
(Brit) Current (NA) Checking Account.....and so on.
There are about 600 words (or very short phrases) and I really do not want to have to key that lot into a Table, cell by cell. Lists would be an answer, I can select a column and paste into my CC page. But if I start with the British word, I need to put the Amarican equivelant to it's right side. I am thinking about 3 <divs. across the page, with 2 columns in each, but I cannot think how to set up the individual divs, so that the two columns run along-side, rather than continue down the page. If I create 6 dives, I guess absolute positioning is the only answer.
Any coments will be useful........please save me from typing in 600/700 words manually!
Hi Tone
Do you mean something like this.
You will have to sort out coulmn wdths etc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta name="description" content="test">
<meta name="keywords" content="test">
<style media="screen" type="text/css">
html, body {
margin: 0; padding: 0;
}
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#eee;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
}
/* Header styles */
#header {
clear:both;
width:100%;
text-align:center;
}
#header {
border-bottom:1px solid #a2112e;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
/* column container */
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
ovrerflow:hidden;
border-bottom-style: solid;
border-bottom-color: #a2112e;
border-bottom-width: 2px;
border-right-style: solid;
border-right-color: #a2112e;
border-right-width: 2px;
border-left-style: solid;
border-left-color: #a2112e;
border-left-width: 2px;
border-top-style: solid;
border-top-color: #a2112e;
border-top-width: 2px;
}
/* common column settings */
.colleft,
.colin,
.colwu,
.colmid,
.colright {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3,
{
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#eee; /* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background:#eee; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background:#eee; /* left column background colour */
}
.threecol .col1 {
width:50%; /* width of center column content (column width minus padding on either side) */
left:100%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:23%; /* Width of left column content (column width minus padding on either side) */
left:26%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:23%; /* Width of right column content (column width minus padding on either side) */
left:78%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
</style>
</head>
<body>
<div id="header">
<p class="tnr24mbc">Welcome to Website</p>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Centre Column start -->
<p>Centre column line 1</p>
<p>Centre column line 2</p>
<!-- Centre Column end -->
</div>
<div class="col2">
<!-- Left Column start -->
<p>Left column line 1</p>
<p>Left column line 2</p>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<p>right column line 1</p>
<p>right column line 2</p></div>
</div>
</div>
</div>
<!-- End of 3 Column -->
