472,961 Members | 1,531 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,961 software developers and data experts.

Problems with 3 column fluid layout - 3rd column wraps

I want a page with a centered div containing two rows. Top row has an
image and some text. The bottom row needs to have three columns. I'd
love to have the 1st column set to a fixed width then have the 2nd and
3rd columns fill the remaining space but I've given up on that and am
willing to settle for the second row to have a fluid 3-column layout
(or something else simple).

Anyway, I've developed a page where the second row has this 3 column
fluid layout. This is working great for me in IE6, but in IE7, the 3rd
column wraps down as the browser page is narrowed. Is there any way to
fix this problem?

Here's the sample page: http://www.geocities.com/charles_lof...rapsinIE7.html
NOTE - because geosites address an element down the right hand side
you will not see the third column wrap here - you'll have to pull the
source, save it somewhere, then open it in IE7 to see the problem.

FYI, the page is valid CSS and HTML (all validation errors are all
produced by code automatically added by geosites, i.e. out of my
control.)

Your input appreciated.
Mar 26 '08 #1
3 3666
In article
<e4**********************************@m34g2000hsc. googlegroups.com>,
hzgt9b <ce******@gmail.comwrote:
I want a page with a centered div containing two rows. Top row has an
image and some text. The bottom row needs to have three columns. I'd
love to have the 1st column set to a fixed width then have the 2nd and
3rd columns fill the remaining space but I've given up on that and am
willing to settle for the second row to have a fluid 3-column layout
(or something else simple).

Anyway, I've developed a page where the second row has this 3 column
fluid layout. This is working great for me in IE6, but in IE7, the 3rd
column wraps down as the browser page is narrowed. Is there any way to
fix this problem?

Here's the sample page:
http://www.geocities.com/charles_lof...rapsinIE7.html
I'm looking at your page in Firefox, and I don't see three columns
anywhere, or any evidence of wrapping. I do, however, see a very
ugly background image in the box containing the "Lorel, Ipselium !"
and the Lorel link. Ugly, because it's been stretched horizontally.
NOTE - because geosites address an element down the right hand side
you will not see the third column wrap here - you'll have to pull the
source, save it somewhere, then open it in IE7 to see the problem.

FYI, the page is valid CSS and HTML (all validation errors are all
produced by code automatically added by geosites, i.e. out of my
control.)
Are you sure? You can upload the file of your page to the W3C
validator, just to make sure that ALL the errors are Geocities'
responsibility, as currently:

"This page is not Valid XHTML 1.0 Transitional!"

- might be a problem!

<http://validator.w3.org/check?uri=ht...es.com%2Fcharl
es_loftis%2F3rdcolwrapsinIE7.html&charset=%28detec t+automatically%29&doct
ype=Inline&group=0>
>
Your input appreciated.
Mar 26 '08 #2
On Mar 26, 1:36*pm, David Stone <no.em...@domain.invalidwrote:
In article
<e497b3a9-cb6a-4c93-a9c3-599ba1ae6...@m34g2000hsc.googlegroups.com>,

*hzgt9b <celof...@gmail.comwrote:
I want a page with a centered div containing two rows. Top row has an
image and some text. The bottom row needs to have three columns. I'd
love to have the 1st column set to a fixed width then have the 2nd and
3rd columns fill the remaining space but I've given up on that and am
willing to settle for the second row to have a fluid 3-column layout
(or something else simple).
Anyway, I've developed a page where the second row has this 3 column
fluid layout. This is working great for me in IE6, but in IE7, the 3rd
column wraps down as the browser page is narrowed. Is there any way to
fix this problem?
Here's the sample page:
http://www.geocities.com/charles_lof...rapsinIE7.html

I'm looking at your page in Firefox, and I don't see three columns
anywhere, or any evidence of wrapping. *I do, however, see a very
ugly background image in the box containing the "Lorel, Ipselium !"
and the Lorel link. *Ugly, because it's been stretched horizontally.
NOTE - because geosites address an element down the right hand side
you will not see the third column wrap here - you'll have to pull the
source, save it somewhere, then open it in IE7 to see the problem.
FYI, the page is valid CSS and HTML (all validation errors are all
produced by code automatically added by geosites, i.e. out of my
control.)

Are you sure? *You can upload the file of your page to the W3C
validator, just to make sure that ALL the errors are Geocities'
responsibility, as currently:

"This page is not Valid XHTML 1.0 Transitional!"

*- might be a problem!

<http://validator.w3.org/check?uri=ht...es.com%2Fcharl
es_loftis%2F3rdcolwrapsinIE7.html&charset=%28detec t+automatically%29&doct
ype=Inline&group=0>


Your input appreciated.- Hide quoted text -

- Show quoted text -
David thanks for the quick reply.
Try opening the page in IE6 or IE7. This page is only being targeted
for IE - I haven't tested it in browsers other than IE6, IE7.
Yes, I re-verified that all the HTML validation errors are caused by
Geosites tack on code.

So, can you suggest a cross-browser, fluid 3-column layout?
Mar 26 '08 #3
hzgt9b wrote:
David thanks for the quick reply.
Try opening the page in IE6 or IE7. This page is only being targeted
for IE
If you are targeting IE why are you trying to use XHTML? If you were
successful in doing it correctly you will disenfranchise IE all together.
- I haven't tested it in browsers other than IE6, IE7.
Yes, I re-verified that all the HTML validation errors are caused by
Geosites tack on code.
No not all, XHTML is not just HTML with "<br />" elements

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Mar 26 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width...
2
by: CJM | last post by:
I'm developing a site for a charity which I am aiming to make standards-compliant, accessible and cross-browser compatible. I'm doing OK so far and have the workings of a respectable site, but I...
16
by: Dan V. | last post by:
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? ...
19
by: Jerry | last post by:
Hi Folks, Ok, here's my story. I was asked to create a website for the church I attend. I am a complete newbie to creating websites. So, I did the usual -- did a bunch of googling, found...
22
by: Jam Pa | last post by:
Once again my big mouth has landed me with a tough job. I have a static CSS layout, where each and every element has been defined by pixel size - lots of them, too! Mostly relative elements,...
40
by: Mark | last post by:
Hello i like to make the following lay out: - 3 columns - center column = fixed width - left and right columns are not fixed and must take all the available space there is left. - left...
9
by: TristaSD | last post by:
Hi, How do I accomplish the following: In a two-column layout, the right column is 200px wide, and the left column is fluid? Thanks!
3
by: Mark | last post by:
Hi all I would like to create a simple two column layout - navigation on the left and content on the right. I would like the columns to have a fluid width so they can grow and shrink according...
2
by: Bram2 | last post by:
Having trouble creating a layout with certain conditions like this: (with CSS) http://img684.imageshack.us/img684/9307/columns.jpg Using tables, it's no problem. But I'm trying to accomplish...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
2
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.