16 replies [Last post]
3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Hi everybody, I'm having another problem with my site.
If you look at a short example here:

http://www.donkeyote.pwp.blueyonder.co.uk/3drom/test.html

http://www.donkeyote.pwp.blueyonder.co.uk/3drom/working.css

I am trying to display to product promotion boxes side by side. At 1280 x 1024 (my standard resolution) it works fine, but when I drag the Firefox window to shrink it horizontally, the right hand box will move underneath the left hand box, and I can't understand why it does this. I have set the widths of all the blocks to percentages, and have been using
float: left;
I can see why floating them to the left might cause the right hand one to move underneath the left hand one, but I can't understand why it chooses a particular window width to make the jump. Can any of you work this one out for me?

I think it may have something to do with the 'promobox' class,
left: 185px;
width: 80%;

Is it possible that the 185px is affecting how big the browser thinks 80% is?

I was thinking that the other option I could use to display two columns of four rows of blocks, would be to make two separate columns using percentage widths, then put the first four blocks inside that, and the second four inside the second column.
I am trying to make sure the code works fine at any screen resolution.
Many thanks in advance for any advice you can give.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Two column blocks keep moving down

It would drop bellow if there was not enough room left on the line for it, just because you have set percentage widths does not mean that there isn't a max width in there that the parent is required to be, your images are of a fixed width add that to any margins/ padding and you would have a min width that the parent must be to accommodate a given number of items on one line.

I would sort out your DTD you need a full one with url or loose the definition to put browsers into Standards mode and I would loose the double comments in the markup as this can cause the duplicate text bug in IE which I think you asked about in another thread, although I couldn't see any occurence of that bug, I also can not equate your posted page to the problems you outline, I can find no left:185px in the .promobox class.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

Hi Hugo, thanks for your response. I'm sorry but I was working on the page yesterday and I must have uploaded a newer version, so the left: 185px; declaration had gone.
With regard to the DTD, I tried putting in this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and also

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and my page immediately turned into a mess, all the graphics appear in the centre of the page, running down the screen, and it's obviously seriously wrong!

I have the following statement:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

in the <title>, could this be causing the problem?
I am using AceHTML to edit my page.

I didn't realise the double comments could cause a bug, I will see if I can remove them while keeping the code clear.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Two column blocks keep moving down

The page appears not to be up any longer, but I would stick to the strict DTD. Now that your in standards mode you are getting a far more accurate reflection probably of how your code is working, so although it may not look pretty you do need to work with this.

The meta character set shouldn't be in the title tags move it out bellow or above that line, preferably above.

Double comments can be a problem but can also be solved through css rules such as ensuring that the element causing the problem is in hasLayout mode.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

Sorry Hugo, I've put it up as
http://www.donkeyote.pwp.blueyonder.co.uk/3drom/index.html

I was wrong before, the meta tag was above the title tag, not in it.

My code starts as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>3DROM.COM</title>
<link rel="stylesheet" href="index.css" type="text/css" media="all, screen">

</head>

If I change it to

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>3DROM.COM</title>
<link rel="stylesheet" href="index.css" type="text/css" media="all, screen">

</head>

it goes haywire.
Is it the 'charset' command that's wrong?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 2 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Two column blocks keep moving down

This is not due to the 'charset' command.

Quote:
I would stick to the strict DTD. Now that your in standards mode you are getting a far more accurate reflection probably of how your code is working, so although it may not look pretty you do need to work with this.

Quote:
Fix Your Site With The Right DOCTYPE
Then Please Validate, Why ?

HTML Validation Result
----------------------
line 547 column 1 - unexpected </div>
line 127 column 182 - insert "type" attribute
line 127 column 239 - insert "type" attribute
line 157 column 3 - empty <h3>
line 216 column 3 - empty <h3>
line 215 column 3 - empty <li>
line 262 column 3 - empty <h3>

Fix those then use the w3c validator to check
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.donkeyote.pwp.blueyonder.co.uk%2F3drom%2Findex.html

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

Hi, I've changed the Doctype to strict, revalidated the code, fixed all the problems in the HTML, except for the Provide Support button (I've contacted the programmers about this and am awaiting their reply), and I've tried removing the Provide Support code temporarily, but it still doesn't display correctly. The CSS still has a few warnings about colors (which have been there all along), the HTML only has errors in the Provide Support part, but it still is a complete mess with a strict Doctype.
Have you any idea why half of the CSS seems to be being ignored by the HTML? The menu at the top of the page is now going down the centre of the page, and the logo is no longer displayed.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 2 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Two column blocks keep moving down

replace . Floatline by .floatline
replace . Floatend by .floatend
and so on

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

Thanks DanA, I'd forgotten about that. I've changed all of the capital letters to lowercase, and I'm working my way through all the errors.

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

Hugo wrote:
It would drop bellow if there was not enough room left on the line for it, just because you have set percentage widths does not mean that there isn't a max width in there that the parent is required to be, your images are of a fixed width add that to any margins/ padding and you would have a min width that the parent must be to accommodate a given number of items on one line.


Hugo.

Hi Hugo, if you look at
http://www.savastore.com
their site has two columns in the middle of the screen which shrink down when you reduce the width of the window, but only up to a certain point, then they don't shrink any more. Do you know how I could do this with my page? (They are using tables though, so I'm wondering if it's possible to do what they've done with just CSS, as I don't want to use tables ever again!)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Two column blocks keep moving down

They have used an image to fix that width, the main banner in the centre column is actually two images one is the background and is repeated on the x axis so it will expand to any width; on top of that is another image of fixed width which remains centred in the background. if the centre shrinks the div shrinks until it meets the fixed width of the overlaid image.

In CSS you would use min-width, nice and easy, except that the crud that is known as IE does not support min-width so you have to resort to either MS scripting expressions to set a minimum width or some complicated CSS trickery which you can read about here

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

Hugo wrote:
They have used an image to fix that width, the main banner in the centre column is actually two images one is the background and is repeated on the x axis so it will expand to any width; on top of that is another image of fixed width which remains centred in the background. if the centre shrinks the div shrinks until it meets the fixed width of the overlaid image.

Thanks for explaining that, Hugo, it looks like a very useful trick.

Quote:


In CSS you would use min-width, nice and easy, except that the crud that is known as IE does not support min-width so you have to resort to either MS scripting expressions to set a minimum width or some complicated CSS trickery which you can read about here

Hugo.

I think I'll wait until IE7 comes out, before I put too much effort into hacks for it, I'll keep my code as simple as possible so it works as well as possible with the current version of IE (which I agree is a real pain!)

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

Hugo wrote:
They have used an image to fix that width, the main banner in the centre column is actually two images one is the background and is repeated on the x axis so it will expand to any width; on top of that is another image of fixed width which remains centred in the background. if the centre shrinks the div shrinks until it meets the fixed width of the overlaid image.

In CSS you would use min-width, nice and easy, except that the crud that is known as IE does not support min-width so you have to resort to either MS scripting expressions to set a minimum width or some complicated CSS trickery which you can read about here

Hugo.

I've found out how to do what I wanted properly. (I want a fixed width left column, fixed width right column, and a fluid centre column).

http://www.shadow-fox.net/tutorial/3-Column-All-CSS-Layout-With-Fluid-Center-and-Two-Columns

which produces

http://shadow-fox.net/examples/threecolumns.html

with this simple code:

#left { float: left;
width: 200px;
padding: 0.5em;
}

#right { float: right;
width: 200px;
padding: 0.5em;
}

#center { margin-right: 215px;
margin-left: 215px;
padding: 0.5em;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Two column blocks keep moving down

That's great, however I would prefer people link to recognized and generally acknowledged sites on css layouts, there are better ways of achieving these sorts of layouts that have been well documented by sites with a very respected presence on the internet.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

I found this site:

http://www.alistapart.com/articles/holygrail

but it doesn't appear to be a better way of doing it - a lot more complicated by the look of it.

For example:

"If the browser window is resized so that the center becomes smaller than the left column, the layout breaks in a standards-compliant browser."
etc.

Isn't it much easier the way I posted above?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Two column blocks keep moving down

Tt doesn't help when you quote incompletely Smile the quote finishes with

Quote:
Setting a min-width on the body keeps your columns in place. With IE6 this doesn’t happen, so the fact that it doesn’t support min-width isn’t a problem.


There are also the source order layouts at P.I.E and the PMOB layouts
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Two column blocks keep moving down

None of those are anywhere near as simple as the solution I posted a link to, are they? (Unless I'm missing something here!)