4 replies [Last post]
fedaykin
fedaykin's picture
Offline
newbie
Last seen: 11 years 44 weeks ago
Timezone: GMT-8
Joined: 2010-01-24
Posts: 4
Points: 5

Hi, i've recently graduated up into css pages and i'm having trouble with a particular page layout i'm trying to achieve. Its a 3 column page, where the center column holds all the page info, the side columns are simply for centering the primary (center column), but there's a twist that's giving me grief. I have spent all night scouring the internet and can't solve it.

This is the first column. This is the center column. This is my 3rd column.
It's a DYNAMIC width. It has 2 images that make up It is essentially the same
It has an x tiled bgimage a STATIC width of 950 pix. as the first column.
which is part of the center This is the width of my page. all it does is stretch dynamically
columns' header banner. It will later contain more and contains the same image
I want the banner to stretch divs for all my content. x tile as the first column.
the width of the page as the
user resizes it.

Now, I can get the 3 columns to align to each other using the float option, but then it crushes my side columns down and the bgimage does not tile to the edges of the window. dreamweaves shows my columns stretching to match the centered 'center column', but the image wont tile.

#maintable
	{text-align:center;}
 
#leftcol
	{float:left; width:auto; background:url(images/topback.jpg) repeat-x;}
 
#midcol
	{width:950; float:left;}
 
#rightcol
	{width:auto; float:right; background:url(images/topback.jpg) repeat-x;}
 
html...
 
<div id="maintable">
<div id="leftcol"><img src="images/topback.jpg"></div>
<div id="midcol"><img src="images/logofinal.jpg"><img src="images/topbanner.jpg"></div>
<div id="rightcol"><img src="images/topback.jpg"></div>
</div>

any suggestions would be awesome...

fedaykin
fedaykin's picture
Offline
newbie
Last seen: 11 years 44 weeks ago
Timezone: GMT-8
Joined: 2010-01-24
Posts: 4
Points: 5

ok, that txt column i tried

ok, that txt column i tried to make didnt reflect when posted, read here for better understanding:

This is the first column. It's a DYNAMIC width. It has an x tiled bgimage which is part of the center columns' header banner. I want the banner to stretch the width of the page as the user resizes it.

This is the center column. It has 2 images that make up a STATIC width of 950 pix for the Banner. This is the width of my page It will later contain more divs for all my content.

This is my 3rd column. It is essentially the same as the first column all it does is stretch dynamically and contains the same image x tile as the first column to stretch the banner to the edge of the screen.

Now, I can get the 3 columns to align to each other using the float option, but then it crushes my side columns down and the bgimage does not tile to the edges of the window. dreamweaves shows my columns stretching to match the centered 'center column', but the image wont tile.

#maintable
	{text-align:center;}
 
#leftcol
	{float:left; width:auto; background:url(images/topback.jpg) repeat-x;}
 
#midcol
	{width:950; float:left;}
 
#rightcol
	{width:auto; float:right; background:url(images/topback.jpg) repeat-x;}
 
html...
 
<div id="maintable">
<div id="leftcol"><img src="images/topback.jpg"></div>
<div id="midcol"><img src="images/logofinal.jpg"><img src="images/topbanner.jpg"></div>
<div id="rightcol"><img src="images/topback.jpg"></div>
</div>

any suggestions would be awesome...

fedaykin
fedaykin's picture
Offline
newbie
Last seen: 11 years 44 weeks ago
Timezone: GMT-8
Joined: 2010-01-24
Posts: 4
Points: 5

fixed it

Ok, so I solved my own problem while taking a shower... haha.

I used to build tables, like many people, by specifying widths in the td's and so forth... apparently you can't do that anymore legally.

my answer to this div-only problem was to once again incorporate tables, but to specify the parameters in their respective id's and classes...

someone please tell me whether this was the correct solution yes/no? but it displays correct IE, FF, Saf.

HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td id="leftcol">
<img src="images/topback.jpg" class="images">
</td><td id="midcol">
	<table width="950" border="0" cellpadding="0" cellspacing="0">
	<tr><td>
	<img src="images/logofinal.jpg" class="images">
	</td><td>
	<img src="images/topbanner.jpg" class="images">
	</td></tr>
    </table>
</td><td id="rightcol">
<img src="images/topback.jpg" class="images">
</td></tr></table>
 
CSS
 
#leftcol
	{width:auto; background:url(images/topback.jpg) repeat-x; border:none}
 
#midcol
	{width:950; border:none}
 
#rightcol
	{width:auto; background:url(images/topback.jpg) repeat-x; border:none}
 
.images
	{border:none}

tmharsh
Offline
Regular
Owosso, MI
Last seen: 11 years 40 weeks ago
Owosso, MI
Timezone: GMT-5
Joined: 2009-06-22
Posts: 27
Points: 26

In this section of

In this section of code...

#midcol
	{width:950; float:left;}

You have the width set to 950, which won't work. You need to set it to 950px. It's a simple little thing that is easy to overlook.

Make that change and then see where you are.

fedaykin
fedaykin's picture
Offline
newbie
Last seen: 11 years 44 weeks ago
Timezone: GMT-8
Joined: 2010-01-24
Posts: 4
Points: 5

tmharsh wrote: You have the

tmharsh wrote:

You have the width set to 950, which won't work. You need to set it to 950px. It's a simple little thing that is easy to overlook.

Make that change and then see where you are.

Thanks, I guess I have a lot of old habits to unlearn from the broken html days.