JavaScript Workshop Forums

diem · Member Joined: 18 Aug 2006 Posts: 69

Hi,

Apologies in advance for the quantity of source code - I think its the only way for you to see what problem I'm facing (and hopefully provide some advice):

As you will see, I am trying to build a webpage using div tags and css to position elements on the page. You will also see that I would like the webpage to have a 3-column layout.

Getting a 3-column layout to behave correctly using ONLY css and div tags is proving tricky because when you un-comment the "blah" text that should appear in the middle column, the right-hand column gets pushed off onto the next line.

What I want is for all three columns to line up across the top of the page. See code:

Here is the html
[code]
<hmtl>
<head>
<title>POP - Play Our Part</title>

<script src="../js/initialise.js"></script>

<link rel="stylesheet" type="text/css" href="../css/TESTstyles.css" media="all" />
</head>

<body leftmargin="0" topmargin="0" onLoad="initPage();">
<div class="header">
<div class="alignTextLeft">
<img src="../img/popLogo2.bmp">
</div>

<div class="alignTextRight">
Here...
</div>
</div>

<div class="headerMenu">
<div class="alignTextLeft">
 
<a href="" class="headerMenuLink">HOME</a>  <span class="headerMenuLinkSpacer">|</span> 
<a href="" class="headerMenuLink">ABOUT POP</a>  <span class="headerMenuLinkSpacer">|</span> 
<a href="" class="headerMenuLink">OUR PROJECTS</a>  <span class="headerMenuLinkSpacer">|</span> 
<a href="" class="headerMenuLink">PLAY OUR PART</a>  <span class="headerMenuLinkSpacer">|</span> 
<a href="" class="headerMenuLink">FACTS AND FIGURES</a>
</div>

<div class="alignTextRight">
<span class="headerMenuDate" id="headerMenuDate"></span>
</div>
</div>

<div class="mainPageContent">
<div class="alignTextLeft">
<div class="leftColumn">
<div class="iPanelHeader" id="navPanelHeader">
Site Navigation
</div>

<div class="iPanelContent" id="navPanelContent">
<span class="navPanelImage">»</span> <span class="navPanelCurrentPage">Home</span> </br>
<span class="navPanelImage">»</span> <a href="">About POP</a> </br>
<span class="navPanelImage">»</span> <a href="">Our Projects</a> </br>
<span class="navPanelImage">»</span> <a href="">Play Our Part</a> </br>
<span class="navPanelImage">»</span> <a href="">Facts And Figures</a> </br>
</div>
</div>
</div>

<div class="alignTextLeft">
<div class="middleColumn">
<div class="iPanelHeader" id="mainArticleHeader">
Main Article
</div>

<div class="iPanelContent" id="mainArticleContent">

</div>
</div>
</div>

<div class="alignTextRight">
<div class="rightColumn">
<div class="iPanelHeader" id="orphansPanelHeader">
Sub-article
</div>

<div class="iPanelContent" id="orphansPanelContent">
This is where the content for the Sub-article will be displayed.
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

And here is the .css file
[code]
/*
* Standard html tag styles
*/

a
{
color: #000000;
text-decoration: none;
}

a:hover
{

text-decoration: underline;
}

hr
{
height: 1px;
}

body
{
background-color: #FFFFFF;
}

/*
* Alignment styles
*/

.alignTextLeft
{
text-align: left;

display: block;

float: left;
}

.alignTextRight
{
text-align: right;

display: block;

float: right;
}

.clearer
{
clear: both;
}

/*
* Header styles
*/

.header
{
width: 100%;

background-color: #FFFFFF;
}

.headerMenu
{
float: left;

background-color: #990000;
}

.headerMenuLink
{
color: #FFFFFF;

font-family: Times New Roman, Times, serif;
font-size: 0.9em;
font-weight: bold;
}

.headerMenuLinkSpacer
{
color: #FFFFFF;

font-weight: bold;
}

.headerMenuDate
{
color: #FFFFFF;

font-family: Times New Roman, Times, serif;
font-size: 0.9em;
font-weight: normal;
}

/*
* Home page layout
*/

.mainPageContent
{
float: left;

background-color: #FFFFFF;
}

.leftColumn
{
width: 10em;

margin-top: 5px;
margin-left: 2px;
margin-right: 3px;

float: left;
}

.middleColumn
{
margin-top: 5px;
margin-left: 0px;
margin-right: 0px;

float: left;
}

.rightColumn
{
width: 20em;

margin-top: 5px;
margin-left: 3px;
margin-right: 2px;

float: left;
}

/*
* Home page styles
*/

.iPanelHeader
{
color: FFFFFF;
background-color: #990000;

padding-top: 2px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 2px;

font-family: Verdana, Arial, Sans-serif;
font-size: 0.8em;
font-weight: bold;
}

.iPanelContent
{
border-width: 1px;
border-style: solid;
border-color: #990000;

padding-top: 2px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 2px;

margin-bottom: 5px;

font-family: Verdana, Arial, Sans-serif;
color: #000000;
font-size: 0.7em;
}

.navPanelImage
{
color: #990000;
font-weight: bold;
}

.navPanelCurrentPage
{
color: #990000;
font-weight: bold;
text-decoration: underline;
}

#navPanelContent
{
background-color: #EEEEEE;
}

#orphansPanelHeader
{
text-align: left;
}

#orphansPanelContent
{
text-align: left;
}
[/code]

THANKS!

sohnee · Senior Member Joined: 17 Jul 2002 Posts: 2077 Location: UK

I've simplified the example for the sake of other people that might have the same problem. This is solution "A" - slots 3 dynamically widthed columns on the page.

There is a solution "B" that involves fixing the width of some of the columns - I won't post it here, but it involves using the position:relative and width: auto attributes and then setting a left and right margin - solution "A" is easier!!!

diem · Member Joined: 18 Aug 2006 Posts: 69

Hi,

Thanks for posting a reply so quickly!

I have run solution "A" in my browser and seen that it works perfectly assuming you want your 3 columns to take up the full width of the screen.

My specific purposes require that a small gap (of 2-3 pixels) is placed between each of the columns, which means that setting the width of each column as a percentage doesn't provide quite the result I'm looking for.

Would solution "B" help with this issue - even though it is more complex..?
If so, I'd be very grateful if I could take a look at it.

Thanks!

sohnee · Senior Member Joined: 17 Jul 2002 Posts: 2077 Location: UK

Well, you could allow for a 1% gap in between each bit - you just reduce the center div by 2% and add a margin-left of 1% and bob's your uncle!

Solution B would allow for a specified width for the left and right column and would allow for a specified width for the margins rather than a percentage.

Do you want to know solution B still (I hesitate to supply it, because I think it's a bit nasty - but you are welcome to see it and make up your own mind if you prefer.)
_________________
I also work on... Steve Fenton's Blog and contribute to The Enhance PHP Unit Testing Framework

diem · Member Joined: 18 Aug 2006 Posts: 69

OK, figured it out:

Using the code you provided in solution "A" as a starting point, I then added a "container" div for each of the 3 colums. I was then able to specify a margin around each of the container divs to create the gaps without affecting the alignment of the colums.

Thanks for the advice!

sohnee · Senior Member Joined: 17 Jul 2002 Posts: 2077 Location: UK

Here is the "solution b"...

diem · Member Joined: 18 Aug 2006 Posts: 69

Cool, thanks for posting solution "b". I think I'm getting the hang of div tags and css...

gogotechy · Posted: Fri Mar 02, 2007 9:24 am Post subject: Wow, sounds cool

Hey can i see your webpage after completion? please PM the url!
_________________
Justin Bowen, The head webmaster of the 'Eagles Team'
Mod for AwardSpace, Bolt, and
System Admin for the greatest support forum:
http://gogotechy2.proboards75.com
Infinity Isocates Projects Director

sohnee · Senior Member Joined: 17 Jul 2002 Posts: 2077 Location: UK

Here are some examples:

Three columns - all with a % width and with a 1% gap inbetween:

www.the-mag.me.uk - Music Magazine!

Three columns - left and right are fixed width and middle is stretchy:

www.portsdown-engineering.com - Suppliers of Heat Sealing and Packaging Machines!

Examples for both are above in simple form a is the Music Magazine, b is the Machine company.
_________________
I also work on... Steve Fenton's Blog and contribute to The Enhance PHP Unit Testing Framework

gogotechy · Posted: Thu Apr 26, 2007 8:20 am Post subject: is your site done?

Hey is your site done diem? if it is PM the url ! I wish to look at
_________________
Justin Bowen, The head webmaster of the 'Eagles Team'
Mod for AwardSpace, Bolt, and
System Admin for the greatest support forum:
http://gogotechy2.proboards75.com
Infinity Isocates Projects Director

Rainman · New member Joined: 17 Feb 2013 Posts: 9

please PM the url!
_________________
RS Gold|Diablo 3 Gold|Diablo 3 Gold Kaufen|Cheap RS Gold