HTML DIV's Help

bob2oo7 · 28-01-2011 10:31am #1

Hi guys

I was hoping someone could help me please

I have 3 divs, Column1, Spacer, Column2

Column2 contains information that is dynamic and can be any potential size and can stretch down the whole page

Is there anyway I can set the SPACER div to use Column2 height so that both are the same height, no matter what the informtion is in Column2?

Thanks in advance

Huggles · 28-01-2011 10:35am

You don't need to use a spacer, float column 1 and 2 left, give them a width. add a margin-left of whatever pixels to the column 2.

That is if I understand correctly, you want 2 columns running down page, side by side?

bob2oo7 · 28-01-2011 10:35am

This is the code for the CSS file:

div.column1
{
width:300px;
height:600px;
float:left;
background-color:#858080;
border-style:none;
border-color:#ffffff;
border-width:medium;
font-family:arial;
font-size:16pt;
font-weight:bold;
color:#ffffff;
}

div.column2
{
width:500px;
height:auto;
float:left;
background-color:#858080;
border-style:none;
border-color:#ffffff;
border-width:medium
}

div.column-spacer
{
width:30px;
height:2000px;
float:left;
}

At the minute the div.column-spacer is set to 2000px for the height, to accommadate the hight in Column2, basically I want this to use column2's height

bob2oo7 · 28-01-2011 10:36am

Huggles wrote: »

You don't need to use a spacer, float column 1 and 2 left, give them a width. add a margin-left of whatever pixels to the column 2.

That is if I understand correctly, you want 2 columns running down page, side by side?

Ah, i will try that (sorry, learning as I go along)

I dont need to use another column as a spacer

bob2oo7 · 28-01-2011 10:42am

bob2oo7 wrote: »

Ah, i will try that (sorry, learning as I go along)

I dont need to use another column as a spacer

Worked, brilliant.....

Thanks so much

Huggles · 28-01-2011 10:45am

bob2oo7 wrote: »

Worked, brilliant.....

Thanks so much

No probs, one of the main points of using divs and css is to reduce amount of code you use, so never use more divs than absolutely necessary

bob2oo7 · 28-01-2011 12:17pm

One More question if you dont mind?

At the end of column2, I want to place a footer (calls footer.php) that spans column1 and column2

Is this possible?

Thanks in advance

Huggles · 28-01-2011 12:26pm

bob2oo7 wrote: »

One More question if you dont mind?

At the end of column2, I want to place a footer (calls footer.php) that spans column1 and column2

Is this possible?

Thanks in advance

Do you want this footer the width of both columns, or just the width column 2?

I would just simply clear:left; width:whatever after column 2.

bob2oo7 · 28-01-2011 12:41pm

Huggles wrote: »

Do you want this footer the width of both columns, or just the width column 2?

I would just simply clear:left; width:whatever after column 2.

I want it to display at the bottom of the page (centered) so that it is the same size and position as my banner

div.footer
{
width:1024px;
height:20px;
clear:left;
}

echo '<div class="footer">';
echo '<html>';
include("footer.php");
echo '</html>';
echo '</div>';

I know there is a lot of echo's but im just messing around

Huggles · 28-01-2011 12:45pm

bob2oo7 wrote: »

I want it to display at the bottom of the page (centered) so that it is the same size and position as my banner

div.footer
{
width:1024px;
height:20px;
clear:left;
}

echo '<div class="footer">';
echo '<html>';
include("footer.php");
echo '</html>';
echo '</div>';

I know there is a lot of echo's but im just messing around

is the banner column 2?

bob2oo7 · 28-01-2011 12:51pm

No, the banner is actually on another index.php page

On that php page I call a function to display some information

I could put the footer on that index.php, but because the column2 height is not fixed, the chances of the footer being overwritten with the data in column2 is very high

(hope that makes sense)

bob2oo7 · 28-01-2011 12:56pm

bob2oo7 wrote: »

No, the banner is actually on another index.php page

On that php page I call a function to display some information

I could put the footer on that index.php, but because the column2 height is not fixed, the chances of the footer being overwritten with the data in column2 is very high

(hope that makes sense)

So its like

include header.php

call function to display information

include footer.php

all that on the index.php page

I want to move the footer to be part of the function so that it will always display no matter what the height of column2 is

bob2oo7 · 28-01-2011 2:32pm

bob2oo7 wrote: »

So its like

include header.php

call function to display information

include footer.php

all that on the index.php page

I want to move the footer to be part of the function so that it will always display no matter what the height of column2 is

Got it sorted, placing a HTML table outside of the overal <div>

Thanks for all the help today

bob2oo7 · 28-01-2011 3:35pm

bob2oo7 wrote: »

Got it sorted, placing a HTML table outside of the overal <div>

Thanks for all the help today

That only worked briefly, added more content and now the footer is displaying wrong again

Any help would be great again

Kavrocks · 28-01-2011 5:37pm

This sounds very messy.

Before your footer and after column1 and column2's html code you can try adding [HTML]<br style="clear:both; line-height: 0; height: 0" />[/HTML]
That should solve the problem and should display the footer correctly below the bigger column whether it is column1 or column2.

If that doesn't work then supplying some html code and css code aswell as a link to the page would help to clarify things as I found it hard to understand what you are doing, have done and what the problem is.

HTML DIV's Help

Comments