...

View Full Version : Columns will not display properly. Now resolved.



effpeetee
03-08-2008, 03:10 PM
http://exitfegs.co.uk/test.html
http://exitfegs.co.uk/Sources.html

This is the same program as my Sources program. I started to do what I thought was Semantically correct. The middle column was at the end of the program instead of its rightful place as the second part of the html.

I cut and pasted the second column code and took it from the end and inserted it into the middle, where I thought it should be. The result is obvious.
The remedy is not. (Not to me anyway.)

Help and an explanation would be gratefullr received.

Frank

Both programs are on my site.

rafiki
03-08-2008, 03:28 PM
#content3 {
width: 31%;
float: right;
background-color: #551100;
margin-bottom: 1px;
text-align: left;
right: 0px; //add this line to make the div stick to the right hand side of the browser viewing panel
}

effpeetee
03-08-2008, 03:34 PM
Sorry. But it doesn't work for me.
Also why does the original code not work.

It was OK before I moved it.

Frank

(I think I'll take up Mandarin Chinese, It must be easier,)

abduraooft
03-08-2008, 03:35 PM
Your divs having ids content1 and content2 are placed well, but content3 is placed inside content2 (it's supposed to be before content2 as you given float:right; ).
PS: I've attached the modified code using firebug(since I'm unable to post), place it inside <body></body>, or better to create a new file and paste this!

rafiki
03-08-2008, 03:49 PM
dont forget to add you style to it,

<!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>
<link rel="shortcut icon" href="/favicon.ico" />
<!-- Kindly re-written and corrected for me by _AeroSpace_Eng of CodingForums. 31.1.2008 -->
<!-- Modified by me, effpeetee - 8th 2008 -->
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

<title>Useful Links</title>
<style type="text/css">


*{
margin: 0;
padding: 0;
}

html, body {
height: 100&#37;;
}

body {
background-color: #551100;
color: #ffffff;
font: 900 .57em "lucida sans", verdana, arial, sans-serif;
font-weight: 900;
}

#body {
width: 100%;
min-height: 100%;
position: relative;
}

a:link {
color: #fff;
background-color: inherit;
text-decoration: none;
}

a:visited {
color: #ffff00;
background-color: inherit;
}

a:hover {
color: #ff0000;
background-color: inherit;
}

a:active {
color: #ffffff;
background-color: inherit;
}

a img {
border: 0;
}

#header h1 {
font-size: 3em;
color: #ffffff;
background-color: #551100;
text-align: center;
padding: 1px;
}

#content1 {
width: 31%;
float: left;
background-color: #551100;
margin-bottom: 1px;
text-align: left;
}

#content2 {
width: 31%;
background-color: #551100;
margin-bottom: 1px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

#content3 {
width: 31%;
float: right;
background-color: #551100;
margin-bottom: 1px;
text-align: left;
}



.h6 {
padding: 0;
margin: 0;
}

.links {
font: 300 1.03em "lucida sans", verdana, arial, sans-serif;
padding: 1.5em;
list-style-type: decimal;
margin-bottom: 9px;
border: 2px solid yellow;
color: #fff;
}

.links ol {
padding-left: 9px;
margin-left: 16px;
list-style-type: decimal;
}

.links ol a {
text-decoration: none;
}

.links ol a:hover {
font-size: 150%;
font-family: "lucida bright", serif;
color: #0ff;
text-decoration: none;
}

ol {
list-style: decimal;
margin-left: 2em;
}

.indent {
margin-left: 4em;
}

#clearfoot {
height: 60px;
clear: both;
overflow: hidden;
}

#footer {
height: 10px;
position: absolute;
width: 100%;
bottom: 8px;
left: 0;
font-size: 1.5em;
background-color: #551100;
padding: 3px 3px;
text-align: center;
}

li.nobullet, li.nobullet ol li {
list-style-type: decimal;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

#button ol {
list-style-type: decimal;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

h6{
text-align: center;
margin-bottom: 4px;
font: 1.4em arial, verdana, arial, sans-serif;
}

.indent {
margin-left: 2.3em;
}

.indent2 {
margin-left: 2.4em;
}

.clearfix {
display: block;
}

.centre {
text-align: center;
}

p {
text-align: left;
padding-left: 30px;
color: #ffcccc;
font: 1.3em arial, verdana, arial, sans-serif;
font-weight: 900;
}



</style><!--[if IE]>
<style type="text/css">li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
</style>
<![endif]-->
</head>

<body> add that to the top of the text file

effpeetee
03-08-2008, 03:58 PM
Thanks abduraooft and rafiki

http://exitfegs.co.uk/test.html

Works fine now.

Did I paste it wrong before?

Frank

rafiki
03-08-2008, 04:13 PM
you may have pasted it in the wrong place.
thats all we can say. unless you have a video/diagram of how you done it :)

effpeetee
03-08-2008, 04:22 PM
you may have pasted it in the wrong place.
thats all we can say. unless you have a video/diagram of how you done it :)
It's my 83 year old eyes again!

It has been worth it.

Thanks again to all.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum