side by side DIV layout.

They have: 8 posts

Joined: Sep 2004

Hello Everybody,

I am posting to ask for help in figuring out my CSS layout. I would like to create a web page with side by side divs.

Here is the basic concept of the design:
There are basically 4 divs like a widow pane. Each will have a color background and one px of white space between them. Across the top, the Header is 200 px high and has an image on the left, which is 200px square and a jpeg banner on the right which floats on a background that extends across the page to fit the size, while the jpeg banner stays flush left.
Under this are two more side by side divs. The left hand div is a navigation bar which is 200px wide to line up visually with the 200px square image. Beside it is the content div which, like the banner, extends to the width of the page. Also, on the bottom I'll have a fifth div for the footer which contains the copyright info.

I worked out one scheme, however the top image and navigation bar don't line up. Any suggestions.

delete

It looks okay in Safari but not in Mozilla Firefox where the navigation bar adjusts with the size of the browser and will not hold the width I want. I really don't care how it looks in IE and I am planning on posting a message for IE users to explain why the design doesn't work, if need be.

Also to note, I just bought and read: Teach Yourself CSS in 24 hours by Kynn Bartlett. It was awful, I had been learning CSS on my own and somebody pointed me toward this book. (I think to steer me away from learning CSS, and it worked) Now I am more confused than when I started. I wish I had looked at the reviews before I got the book.

Thanks for reading my post,
Robt.

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

I'm not sat in front of a copy of Firefox right now, I'll make an effort to have a look later.

The only comment relevant at the moment is: Why on Earth are you not supporting IE? Something like 90% of the browsing population use it! Not liking IE is understood, it's interpretations of CSS are terrible, however not supporting it is as bad as misguided designers who only support IE.

a Padded Cell our articles site!

They have: 8 posts

Joined: Sep 2004

JeevesBond,
Thank you for showing an interest in my question. Smiling

IE is a very poor browser. We all know that. It's popularity is due mostly to folks laziness. People like my mother, who still blinks when I use the word "curser" instead of "arrow thingy." As long as designers find and use workarounds and hacks, IE has no reason to become compliant to W3C standards and probably won't anyway. Read on.

This is taken from the Sept. 18, 2004 issue of Browser News at upsdell.com.

"Microsoft Internet Explorer : Roughly 84% use IE-based browsers, down from a high of ~94% as users switch to other browser families — mainly Gecko — with this downward trend likely to continue as the alternate browsers improve and as IE remains stagnant with no planned upgrade for several years." This shows that folks are switching to other browsers form IE. I believe that we can make the switch-over snowball.

The last straw was an article I read at webmasterworld.com on IE bugs, written by user DrDoc. You now have to subscribe to read the article, but a copy of it can be read here. (found by searching google for "What about the other bugs?". You can also get access to the original article by clicking through Google, scroll down to the webpage title: "Taking on IE bugs" ) DrDoc found that all the Famous IE bugs stem from the IE use of the Display property.

My feeling is that if every developer who has been working on a hack for the IE display property had volunteered their hours to Microsoft, then maybe IE would actually have a Display property that was W3C compliant.

Finally I want to point to a fluffy article published yesterday at cnet news about the future of Internet Explorer. The scary news is that Microsoft may be avoiding developing a stand alone browser in favor of using the web as an application platform.

Also, there is no incentive for IE to change when there is no incentive for the user to change, or even stay with IE. My site is a personal web log. I don't sell a thing. So, I don't care if I lose a customer or two.

And my point isn't that I would like to design a layout that illustrates the problems with IE. I am uninterested in that. I want a site that is W3C compliant. Can I do that without learning anymore IE hacks or workarounds? If that means the site will not view well in IE, then I will write an explanation to my visitors and suggest that they download a secondary browser, like Mozilla or Firefox; once folks like my mother have done this, they will be less intimidated in trying a new browser.

Again, thank you for looking at my design. The problem I see in the design is also seen in IE as well as Mozilla. My main problem is getting the navigation bar at the left to remain one width. 225px like the image in the banner. I am still learning CSS. I am unemployed, so it will be a long time before I can afford to take a real class, so I do appreciate the help!

Robt.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Heres a link you might be interested in...
http://www.nzherald.co.nz/storydisplay.cfm?thesection=technology&thesubsection=&storyID=3592035

BTW, the page looks fine in Firefox. Try not to be so set on gettting everything displaying right. If it looks almost the same across different browsers then your users won't really notice it.

They have: 8 posts

Joined: Sep 2004

Thank you Renegade,

I had read that article. Interesting, huh?

The problem in Firefox when I look at the site is the width of the navigation bar. It is under 200px, about 195. I want it to be at 225 to stay lined up with the image above it.

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

Indeed Microsoft are scared of the web, it is in danger of becoming the new programming platform of choice... If MS lose the developers, they lose the end-users. That's why they haven't released a new version of IE.

But I don't believe we as web designers have it in our power to force a user into using a different browser - that is not in our mandate, and in my opinion is as bad as forcing a user to use IE. It is the users decision, and our responsibility to help them make an informed decision.

a Padded Cell our articles site!

They have: 8 posts

Joined: Sep 2004

JeevesBond,

I wonder what would have happened if every web designer had ignored IE's inability to use the Display Property, and had refused to create hacks and workarounds for IE? 85% of the users out there would be unable to read or enjoy the web. So, we know that wasn't going to happen. However if it did, Users would have jumped to a browser that works. Microsoft owes web developers a world of gratitude for making their browser utile.

My point is that designers and users should have a say in the presentation of the pages they see on the web. And users ultimately have the last say, when they switch browsers they have voiced there desires.

The W3 Consortium's membership is made up of designers, developers, programers and corporations like Microsoft. The reason behind the W3C is to create web standards that no one person or corporation defines.

For some reason IE has never been compliant to the W3C Display Property. They have had over a decade to figure it out. This noncompliance has created extra work and grief for all designers. It is in the interest of developers to have standards to work with and it is therefore in the interest of users to have standards. Therefore, it is in our interest and theirs to educate the ignorant public of their choices.

We wouldn't be having this conversation if Microsoft had worked on making IE W3C compliant.

With that off my chest, I have one question.

Do you have any suggestions on how I can keep my navigation column at 225px wide?

Thanks everybody

They have: 8 posts

Joined: Sep 2004

I want to add an analogy to this IE Display Property discussion. You are right, it is not the job of Developers to tell users which Browser to use. That would be like McDonald's telling a customer that they couldn't use their drive-in window if they drive a Volkswagen. And that is where I want to start my comparison.

German cars are made with different screw and bolt sizes than american cars. There doesn't seem to be a problem with that. As an Auto-repairman I can refuse to stock the extra set of tools to repair Volkswagens. Because of this there are repair-shops across america that fix nothing but volkswagens. In one sense Microsoft is requiring every web designer to purchase and create their own tools to fix their machine, IE. However, it is more complicated than that.

In the US we have hundreds of laws governing the safety of our vehicles. Volkswagens must comply with these laws in order to be road worthy. For instance, in order to drive at night you need working headlights. By not complying to the Display Property, it is as if Microsoft has created IE without head lights. And like a car without headlights, it will work fine in certain circumstances, like driving in daylight. In this scenario, if McDonald's wants to keep their drive-in window open at night they would have to do something to help volkswagens navigate to their store. If volkswagens were 85%-90% of their traffic, they would do what ever it would take -to the point of lining every dirt road in the county with sufficient lighting. That is what developers have been doing by creating hacks and workarounds for IE.

Sure, folks could drive at night without headlights, but we have laws against that. The W3C only makes recommendations. Their recommendations are as sound as driving at night with headlights. At one point in the early days of automobiles Ford had a similar dominance in the market. Had his cars been made without headlights, folks would have welded kerosine lamps to their vehicles. Still, that wouldn't have made it ethical to build a car without headlights. And as an Auto-repairman back in the day, you would have been a fool not to point this out to a customer you were outfitting with welded on lamps.

.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.