37 replies [Last post]
kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

I am designing a Web site and have worked very hard to create my layout in the recommended way using CSS positioning (relative and absolute and numerous other settings for

containers) rather than tables. I got several pages to look really nice, but then as an experiment, I decided to resize my browser (Firefox/Linux version), making its width smaller and smaller. A horizontal scroll bar appeared as expected, but the layout became totally jumbled (overlapping, overwriting, etc.--a total mess). The positioning of elements was completely lost.

I have been using the O'Reilly book, "CSS The Definitive Reference," as my main reference. After discovering the above problem, I looked at this Forum and joined it. I read the sticky, "Absolute Positioning Pitfalls," and also the article referred to in one of the responses, "CSS Positioning" at brainjar.com. However, that article itself lost its positioning when I made the browser width smaller!!!

I am almost ready to conclude that the old way of doing layout with tables is better: simpler, faster to write, and the only way to ensure things will really appear in the right places regardless of what the user does with his browser. Can a layout REALLY be protected against jumbling and overwriting without using tables?

Any general comments or advice?

Thanks.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Try going through HTMl

Try going through HTMl Dogand W3 Schools. Most in here will say this.. transitioning from table-based layout to css is a tough road. Do not get discouraged, you came to the right place!!

First off, unlearn what you've learned about relative and absolute positioning for page layout, for now. Learn how to do page layouts with combinations of floats and margins. Remember this, css only works when the html is written correctly. Always get the html to validate before going on to css.

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

CupidsToejam, What an

CupidsToejam,

What an interesting id! And your little picture--you must be very happily married!

Thanks so much for the jiffy reply. Here's some additional information.

(1) My pages that completed destruct when the browser is resized all have passed the W3C XHTML strict and the CSS validators.

(2) I looked at both Web sites you recommended, including the source code for each of their home pages. The home page of HTML Dog does not use tables for its layout and the layout displays incorrectly when I make the browser smaller. The home page for W3 Schools does not break down, no matter how skinny I make the browser. The two scroll bars still show all the content in exactly the right positions. The layout for that home page was done with TABLES!

Therefore, I'm still thinking that tables represent the ONLY way to keep all layout completely correct when the browser is made smaller.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

kenmorgan wrote: Therefore,

kenmorgan wrote:

Therefore, I'm still thinking that tables represent the ONLY way to keep all layout completely correct when the browser is made smaller.

If this is your thinking, you have not given css layouts much of a chance. You need to study, research, and learn the best css web layout techniques in order to successfully say you've given css layouts a fair chance. You must go much deeper than just looking at other peoples code and seeing if it breaks under certain conditions in order to make an educated decision on weather table are better for layout than css.

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Yes, that level of research

Yes, that level of research would enable me to make an educated decision. College-level teaching has been my career, and I don't recoil from research. However, the research you suggest would be quite time consuming. If no one already knew the answer to the question I have, I would be willing to do it. However, I am sure there are those who already know the answer to my question--whether CSS positioning can be made as secure as table layout regardless of browser resizing. At this point, I'm simply trying to find out whether that is possible. Why pursue an issue if it is known to be impossible? If it is possible, I can continue digging to make it work.

What is your opinion on my question?

Thanks.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

wow, even an educated

The answer to your question, is yes. CSS layouts offer more flexibility and control over table-based. There are about four kinds of css layouts;

fixed = px based
fluid = em based
liquid = % based
hybrid = any combination of the above

harrierdh
Offline
Enthusiast
Colorado
Last seen: 10 years 10 weeks ago
Colorado
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

Discouraged with CSS Layout

Not sure of your exact needs. Here is a tableless layout. You can omit the IE section style section. However, it will look slightly different in FF2 and Safari than IE.

<html>
<head>
<title>Tableless CSS - Tableless HTML - example</title>
<meta name="keywords" content="Tableless HTML, Tableless CSS, example" />
<meta name="description" content="This example shows a cross browser tableless html page using css. Exact pixel fixes are added for IE" />
<meta name="author" content="David R Harrier" />
<meta name="contact" content="[email protected]" />
<meta name="copyright" content="August 2009" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style>
body {
	background-color: yellow;
	text-align: center;
	margin: auto;
}
#primarywrapper {
	background-color: white;
	width: 880px;
	/*width: 990px;*/
	margin: auto;
	text-align: left;
}
 
#top-box {
	border: 1px solid red;
}
#top-banner {
	height: 65px;
	border: 1px solid blue; 
}
#top-navigation {
	height: 20px;
	border: 1px solid blue; 
}
.top-navigation-item {
	width: 90px;
	float:left; 
	text-align: center; 
	border-right: 1px solid grey; 
}
 
#middle-box {
	height: 200px;
	border: 1px solid red;
}
#middle-left-box {
	width: 132px;
	height: 99%;
	float: left;
	border: 1px solid blue; 
}
#middle-center-box {
	width: 568px;
	height: 99%;
	float: left;
	border: 1px solid blue; 
}
#middle-right-box {
	width: 172px;
	height: 99%;
	float: left;
	border: 1px solid blue;
}
 
 
#bottom-box {
	height: 20px;
	border: 1px solid red;
}
 
</style>
<!--[if lte IE 6]>
	<style type="text/css">
		#top-banner {
			height: 67px;
		}
		#top-navigation {
			height: 22px;
		}
		#middle-box {
			height: 202px;
		}
		#middle-left-box {
			width: 134px;
			height: 100%;
		}
		#middle-center-box {
			width: 570px;
			height: 100%;
		}
		#middle-right-box {
			width: 174px;
			height: 100%;
		}
		#bottom-box {
			height: 22px;
		}
	</style>
<![endif]-->
</head>
<body>  
<div id="primarywrapper">
 
	<div id="top-box">
		<div id="top-banner">Company Logo</div>
		<div id="top-navigation">
			<div class="top-navigation-item">link1</div>
			<div class="top-navigation-item">link2</div>
		</div>
	</div>
 
	<div id="middle-box">
		<div id="middle-left-box">Left</div>
		<div id="middle-center-box">Center</div>
		<div id="middle-right-box">Right</div>
	</div>	
 
	<div id="bottom-box">
		Footer
	</div>
</div>
 
<h1>Tableless CSS - Tableless HTML example</h1>
<p>This example shows a cross browser tableless html page using css. Exact pixel fixes are added for IE. Borders are added for demonstration only.</p>
<p><a href="mailto:[email protected]" title="David R Harrier">Email Author</a>&nbsp;&nbsp;
 <a href="http://home.comcast.net/~harrierdh/" title="David R Harrier">Author's Web Page</a></p>
<p><a href="http://home.comcast.net/~harrierdh/tableless-src.html" target="_blank" title="Source code">View Source Code</a></p>
</body>
</html>

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Harrierdh, Thanks so much

Harrierdh,

Thanks so much for the code. Here are a few observations and a tentative conclusion.

(1) I looked at your example page in Firefox (3.0.11). Yes, that was very similar to the general layout I want for the pages in the Web site I'm creating.

(2) I performed my infamous experiment on your example page: greatly reduced the width of the browser. Your layout remained intact! I'm much encouraged.

(3) I noticed that nowhere in your code did you use "position:xxxxxx".

(4) I went to your Web site, "Resume," cited on your example page. The layout of that page also remains correct as I reduce the width of the browser: the scroll bars show that everything in the layout is exactly where it should be. However, you used a TABLE to create the layout of this page. :ohdear:

Therefore, here's my tentative conclusion:

(a) CSS positioning and layout using "position: relative" and/or "position:absolute" is NOT stable under browser resize, and cannot be made so. I have yet to find a Web page using "position:xxxxxx" to create the layout that doesn't get jumbled on browser resize.

(b) However, a stable layout using CSS without tables can be done using an approach like the one you take in the example in your post.

(c) Since you use tables for layout, there is nothing wrong with that as an alternate approach to layout. If tables are simple, fast to write, and stable under resize, why not use them for layout? You did, and as I pointed out previously in this thread, so does W3 Schools!! If more "flexibility" is needed than can be provided by table layout, then a "CSS approach" can be used for layout, minus, of course, any reliance on "position:xxxxxx".

What do think?

harrierdh
Offline
Enthusiast
Colorado
Last seen: 10 years 10 weeks ago
Colorado
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

tableless html

Ha. You're getting it. Tableless is a trend for reasons. The least of which is "purity". Another argument is performance. I guess if you do the math by hand and explicitly position your elements in pixels, the browser doesn't have to do the math. That would be a fraction of a second faster. Using tables, well, the computer has to do the math. I thought that is what they were made for.

I've always used tables until about a year ago. The company I worked for wouldn't allow it. It takes 2-3 times as long to code and maintain without them.

Re: positioning. You're right again. Any type of positioning will give you headaches, regardless of what the text books say. Best to avoid it in overall layouts. It does come in handy within a box element using position: relative (relative to the box, not the page).

Unemployed. Got some time. Let me know if I can help.

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Thanks so much, harrierdh,

Thanks so much, harrierdh, for that encouraging response.

We're two hours ahead of you on Eastern Time, so I've got to logoff. But I really appreciate your kind offer. Tomorrow I'll be in touch and show you what I'm working on.

Ken

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

harrierdh, your example code

harrierdh, your example code above is not valid without !DOCTYPE. Any layout rather it be tables or css needs to have proper !DOCTYPE.

Quote:

I've always used tables until about a year ago. The company I worked for wouldn't allow it. It takes 2-3 times as long to code and maintain without them.

Are you saying a css driven site takes longer to maintain then one driven with tables? That is absolutely incorrect. seems you have a bit of learning to do yourself, if in fact that is what you were saying.

<div id="top-box">
		<div id="top-banner">Company Logo</div>
		<div id="top-navigation">
			<div class="top-navigation-item">link1</div>
			<div class="top-navigation-item">link2</div>
		</div>
	</div>

All this code, for just a masthead and navigation? You can simply use a single and a

    to handle all this.

<h1>Company logo</h1> /** research <span style="font-weight:bold">image replacement</span> techniques **/
<ul>
  <li> link1 </li>
  <li> link2 </li>
</ul>

Who's code looks cleaner and functions better? Both of you can learn alot about writing meaningful semantic html by reading and practicing this thread.

CSSPlay Layouts has good examples. study the code.

harrierdh
Offline
Enthusiast
Colorado
Last seen: 10 years 10 weeks ago
Colorado
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

semantics

Regarding semantics. I did as CupidsToeJam recommended. I visited the links. I looked up semantic and structural markup. Technically the code I wrote is semantically correct. HTML does not provide structural tags for vertical navigation bars. Any element used for this, whether

  • or
    (creating your own element), is obfuscated.

Semantics briefly means specific intent.

For instance and do the same thing. means emphasized and means italicized. In a browser they both look the same. Semantic HTML (not in the W3C) would mandate that is the proper structural tag, since italicized refers to the "look" or "presentation" of the item. Where does not care what it looks like. It just wants the item emphasized. I didn't care what the navigation looked like in the markup, but I definitely wanted a navigation element not a list.

Thus, I would argue that the following statements are equal when creating a vertical navigation bar in absence of such an HTML element.

  • (styled to flow vertically and remove the bullets)
    (styled to flow vertically, remove the indent and un-bold the dt)
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

harrierdh wrote: <ul><li>

harrierdh wrote:

  • (styled to flow vertically and remove the bullets)
    (styled to flow vertically, remove the indent and un-bold the dt)
    , or definition list, could also work, but would not be semantic, hence the name, definition list (DT). html tags have value, and each one was created for a purpose. Using divs to handle navigation is not semantic. div = division. divs are used to create blocks that hold similar content. for example; div id= "header", div id="sidebar", div id="content". You pretend understand semantics, but you have no clue.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 18 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9753
Points: 3835

@ kenmorgan: CSS is a

@ kenmorgan:

CSS is a deceptively simple declarative presentation language. Like any powerful language, the nuances are not so simple. Screw up, and a gotcha with big teeth will jump up to bite you on the butt. Fortunately the basics are pretty straight forward. Learn them. htmldog.com's tutorials were mentioned. Work through them in order.

Avoid the position property for a while. It appeals because it reminds one of the print medium's layout, or paste up board. The problem is that print is a fixed medium, and the web is not. We cannot control the window it will render in, nor the font size the user may prefer over our own choice, nor even whether he will disable images, javascript or css. Positioning is useful, but more for small effects than at the top levels.

Tables also have many seeming advantages. The cost lies in the eventual complexity of any non-trivial design. Maintenance is a cast iron [fill in the blank], and that makes it expensive.

In the end, well structured, semantic html markup, plus css, plus unobtrusive javascript is the most usable, the most accessible, and the least expensive to create and maintain.

Take a look at some of my html and css demos and tutorials.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

How Sad

Thank you, Gary, for your very helpful comments.

I had decided not to add any more posts to this thread. However, it has degenerated to the point where I think one more comment might be in order. I will let others more knowledgeable than I discuss the HTML and CSS issues raised here. What concerns me is the tone taken by one contributor to this thread, CupidsToejam.

Addressed to me:

CupidToejam wrote:

You need to study, research, and learn the best css web layout techniques in order to successfully say you've given css layouts a fair chance. You must go much deeper than just looking at other peoples code and seeing if it breaks under certain conditions in order to make an educated decision on weather table are better for layout than css.

A bit strong, but still acceptable.

Addressed to harrierdh:

CupidToejam wrote:

That is absolutely incorrect. seems you have a bit of learning to do yourself, if in fact that is what you were saying.

Beyond the pale of intellectual debate.

Addressed to me and harrierdh:

CupidToejam wrote:

Both of you can learn alot about writing meaningful semantic html by reading and practicing this thread. CSSPlay Layouts has good examples. study the code.

Way beyond the pale.

Addressed to harrierdh:

CupidToejam wrote:

It doesnt get more semantic then [sic] that friend...You pretend understand semantics, but you have no clue.

I very much appreciated the help offered me by harrierdh and therefore felt constrained to respond to this last attack. The fact is that CupidsToejam has "no clue" as to what constitutes appropriate behavior in polite, intellectual debate. His manner of writing is defensive, arrogant, condescending, and insulting. It has no place in a forum. An intellectual debate is characterized by logical arguments, not personal attacks.

Since he seems to love making "assignments" to lesser mortals, I have an assignment for CupidsToejam: secure a textbook on logic and look up the meaning of "argumentum ad hominem."

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

What!? why dont you ask

What!? why dont you ask harrierdh for his phone number.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 19 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Keep it civil people. Any

Keep it civil people. Any more personal remarks to anyone and this thread will be locked.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 19 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

harrierdh wrote:Choose your

harrierdh wrote:

Choose your poison.

I'm willing to bet that any web developer who is aware of web standards and codes with CSS and HTML on a regular basis will use unordered lists for their navigation. Just look at any website whose main subject matter is web standards and web development best practices. You can argue that the semantics of such a construct might be dubious, but the common practice is to use lists.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 19 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

kenmorgan wrote:I have yet

kenmorgan wrote:

I have yet to find a Web page using "position:xxxxxx" to create the layout that doesn't get jumbled on browser resize.

Here's one: http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths

(By the way, be careful basing your coding practices on the code posted by harrierdh as it's missing a doctype which means IE is in quirks mode which is why all those extra rules in conditional comments are needed to apply different dimensions.)

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Tyssen wrote: (By the way,

Tyssen wrote:

(By the way, be careful basing your coding practices on the code posted by harrierdh as it's missing a doctype ...

I told him that, but he doesnt care nor understand.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 19 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Oh yeah, so you did.

Oh yeah, so you did.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 35 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Pardon me for butting

Pardon me for butting in...

kenmorgan wrote:

I got several pages to look really nice, but then as an experiment, I decided to resize my browser (Firefox/Linux version), making its width smaller and smaller. A horizontal scroll bar appeared as expected, but the layout became totally jumbled (overlapping, overwriting, etc.--a total mess). The positioning of elements was completely lost.

This would appear to be the problem, instead this thread has derailed into the age-old css vs tables argument.

Ken having stated your problem, the way to get it sorted is to post either a link to your site or failing that, ALL your code - both CSS and HTML - between "code tags" to make it easily readable on the forum (highlight your code in the reply box and click the

 button above the reply box).
 
If you truly just want to get your site working using css, this is the best way to go about it. Let the folks here take a look and see if they can help, I've often said "if it can't be done here chances are it can't be done". :)

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Hi Smee, Thanks for your

Hi Smee,

Thanks for your interest and offer! Sure, I'd be glad to post the link:

http://ammiministry.rediscoveringthebible.com/

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 35 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okay, just looking at the

Okay, just looking at the second "container" it would appear the middle column doesn't stop wrapping till too late. Is this what you want to happen? If so, do not hit the blue "back to tutorial" button it will take you to the wrong place.

The instructions for that layout are here http://www.maxdesign.com.au/presentation/page_layouts/ under the third section "Selectutorial".

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Smee, I'm not quite sure

Smee,

I'm not quite sure what you mean by "doesn't stop wrapping till too late." My second "container" is the one that has the three-column layout. What I see happening is this: grab the left-hand side of the browser and move it to the right to make the browser width smaller and smaller. The text in the middle column starts overwriting the picture in the left column after the bottom, horizontal scrollbar appears.

However, all the divisions have a problem. Under the same action, in the "header" div, the slide show image jumps down to the left edge of the browser window! Also, the h1 line ("Comfort...") ends up overwriting the text in the first "container" div below the menu. Finally, the text from column two of the first "container" div starts overwriting the "Welcome" image in column one of that same container.

All of this is why I originally described the whole effect as a "jumbled mess."

I went to the site and page in your "this" link. That page layout doesn't work either. Under the same browser resizing I described above, all three columns merge and overwrite one another, and scroll bar never appears. That should not be the result of decreasing browser width. Instead, a scroll bar should appear and allow the display of three still-distinct columns to appear in succession.

This is one of the things that's discouraging about researching CSS. Web sites that purport to be tutorials on how to write CSS don't even work themselves!

Again, thanks so much for your response, and I look forward to learning more detail about these problems from you.

Ken

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 19 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

kenmorgan wrote:I went to

kenmorgan wrote:

I went to the site and page in your "this" link. That page layout doesn't work either. Under the same browser resizing I described above, all three columns merge and overwrite one another, and scroll bar never appears. That should not be the result of decreasing browser width. Instead, a scroll bar should appear and allow the display of three still-distinct columns to appear in succession.

The Maxdesign layout works fine until you get to a very small screen size (ie handheld size). You say a horizontal scrollbar should appear, but that's just your personal preference and doesn't necessarily mean that's the way all layouts should appear. The idea behind doing a fluid layout is that all the content appears on screen, no matter what its size, without the need for any horizontal scrolling.

But, if you decided for your layout, that you did want a horizontal scrollbar to appear at a certain width, then the fix is easy: just apply a min-width to the body (you will need javascript for this to work in IE6 - I recommend Dean Edward's IE7.js).

But the point in linking to the Maxdesign layout is still the same: you need to replace all the pos:abs/rel elements in your layout with floats. Don't discount the technique out of hand just because of this one small detail which can be easily solved.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

kenmorgan, if you would

kenmorgan, if you would simply play with css layout techniques, as I advised a while back, you'll better understand how it all works.

Quote:

fixed = px based

fluid = em based

liquid = % based

hybrid = any combination of the above

Research these different types of layouts, and decide which best serves the needs of your site.

Do you want scrollbars, use a fixed layout. You want it to be flexible, use fluid, or liquid. Want the best of both worlds, use a hybrid.

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Hi Tyssen, If you've looked

Hi Tyssen,

If you've looked at the link to my Web page I gave Smee above, I have been playing around with the code, trying some of the things you have suggested as well as some things from other sources I've been reading. For one thing, I removed all the "position:xxxxxx" statements and added two floats.

Among a multiple of questions I have, here is a hopefully simple one. Perhaps its answer will unlock some key that so far has escaped me. The code at my Web site is unchanged; the modifications I've been making have all been done locally. Here is an abstracted, simplified portion of my "new version" that illustrates my question. It is complete and can be displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 
 
<head>
 
   <title>Ammi Ministry</title>
 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
   <meta http-equiv="Content-Language" content="en-us" />
</head>
 
<style>
 
body
{
   color: black;
   background-color: #B0C4DE;
   width: 880px;
   text-align: left;
   font-size: 12px;
}
 
p, a
{
   font-size: 12px;
   color: blue;
}
 
hr
{
   width: 60%;
   height: 5px;
   color: #4b0082;
   background-color: #4b0082;
   margin-top: 30px;
   margin-bottom: 30px;
}
 
.textcentered
{
   text-align: center;
   padding-left: 10px;
   padding-right: 10px;
}
 
.imagecentered
{
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0px;
   border: 0px;
}
 
.Container { border: 1px solid red;}
 
.TwoColumns
{
   width: 436px;
   height: 90%;
   float: left;
   border: 1px solid blue;
}
 
</style>
 
<body>
 
<div class="Container">
 
  <div class="TwoColumns">
      <img class="imagecentered"
 
           src="welcome2.gif" width="194" height="110" alt="Welcome"/><br />
 
      <p style="padding-right: 5%">Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party.</p>
   </div>
 
   <div class="TwoColumns">
      <p style="padding-left: 5%">Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party.</p>
 
      <a href="Investigate.html">
 
         <img class="imagecentered"
 
              src="Investigate.png" width="300" height="60" alt="Investigate" /></a><br />
 
      <a href="Resources.html">
 
         <img class="imagecentered"
 
              src="Resources.png" width="220" height="60" alt="Resources" /></a>
   </div>
 
</div>
 
<hr />
 
</body>
 
</html>

When this code is displayed in Firefox, you can tell from the red border that NOTHING is in the

"Container"!! How can this be? There are two div's nested within it. Plus, the , which is completely outside all the div's, is displayed to the right of the two columns rather than under them.

Now if you simply add "height: 300px" to the description of ".Container," everything is as it should be: the two columns are WITHIN the red border, and the line is below it.

I don't understand this. Why is the height statement necessary? Should not the descendent div's nested within "Container" expand the "Container" div so as to be within it?

Thanks.

Ken

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 18 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9753
Points: 3835

See enclosing float elements

See enclosing float elements for an explanation.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 35 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sorry I'm late to the party

Sorry I'm late to the party but I had to go out this morning - Ken it also helps if you edit your account to tell us which country you're in so we know the time difference.

I picked the second container div because it had 3 columns. I thought if you could get a handle on that div the others would be a cinch Wink

I see the guys are setting you on the right path and you have already stripped the pos:abs - this article might help you understand the difference between flow and positioning.
http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php

I was then going to recommend Gary's link for containing floats but I see he has done it himself.

Also...

Quote:

Again, thanks so much for your response, and I look forward to learning more detail about these problems from you.

Thanks for the compliment but you're following the wrong pony here. See my post count? They're all questions. See the post counts for Tyssen, Gary and Cupid? They're all answers Smile Stick with the guys, they'll see you right - they actually do this for a living and then come and help out folks like you and me!!

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

That Was the Answer!

Thanks so much, Gary. Your article did it! All I needed was "overflow: hidden" to make not only my sample code in the above post work properly but also my code in the "real" page.

Smee admonished me in his post to the "two-year old, resurrected thread" to look at Gary's link in answer to my question here and post the results in this thread. Actually, I did read Gary's page immediately and saw what the answer probably was. I also put that one line in my sample code and the miracle occurred. However, before formally responding--and thanking him--I wanted to put it into my "real" page and also polish up the rest of the code so that I'd have something you guys could look at. Unfortunately, that took a while. I have just retired from 35 years of teaching and have also just moved to a new state. This all has kept me busier in retirement than I ever was while working! I've only been able to get a few "stolen minutes" with the computer. So do not interpret my slow response to a lack of appreciation.

But I now have finally finished revising my original code. The version that became a jumbled mess when the browser was made narrow is still out there:

http://ammiministry.rediscoveringthebible.com

The new version that behaves the way I want it to behave under browser narrowing is here:

http://ammiministry.rediscoveringthebible.com/indexnew.html

If anyone would care to look at the new version, I would appreciate any comments/suggestions you might have. But the problem that originally started this thread has been solved.

As a teacher, I am very textbook-oriented. My main CSS reference is a book that was recommended to me as one of the best by the chairman of the Web Technologies department at the college where I used to teach: "CSS: The Definitive Guide," by Eric A. Meyer (O'Reilly). What is very surprising to me, however, is that this book never discusses the overflow property in the main text. It makes its appearance only in Appendix A, "Property Reference." I now consider that an inexcusable oversight on the part of the author.

I do have two remaining questions.

(1) If "position:relative" and position:absolute" should not be used for the main layout design, what should they be used for?

(2) I actually do have a "position:absolute" in my new version of the page we've been discussing. It was used in building the JavaScript-driven, pull-down menu. It's in my code because it was used in the algorithm in a JavaScript textbook in which I found such a menu discussed. My menu certainly isn't displayed correctly without "position:absolute," but I'm not quite sure what it is really doing. If anyone cares to look at the code, I'd be most interested in the explanation of its role.

Thanks for everything.

Ken

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 18 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9753
Points: 3835

You're welcome. Don't jump

You're welcome.

Don't jump on Meyer too hard. Enclosing floats is an artifact of a concept called a new block formatting context, which was neither well known nor understood until fairly recently. I don't think I've seen any book that discusses it.

I mentioned above that absolute positioning was best used for little things rather than at the top level of positioning. Its use for drop down menus is a good example of needing an element to not disturb the flow of the document. An AP element does not lie in the document flow. It neither recognizes other elements, nor is it recognized.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 35 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

All's well then ken

All's well then Smile

ken wrote:

I have just retired from 35 years of teaching and have also just moved to a new state.

Congratulations on both of those. Enjoy!

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

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

Gary wrote:Don't jump On

Gary wrote:

Don't jump On Meyer too hard

Oh not sure about that it's possibly justified? Smile

When was the book first published? What if any revisions are there?

Gary wrote:

of a concept called a new block formatting context, which was neither well known nor understood until fairly recently.

True; yet...

The W3C does write this:

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Further to that explanation of what a block formatting context is this detail:

http://www.w3.org/TR/CSS2/visuren.html#bfc-next-to-float

In that it quite clearly states the outcome of a new formatting context in respect of floated elements and inflow ones, it's pretty unequivocal!

This is CSS2 released as a specification circa 1998 (of course doesn't mean that the block formatting explanation wasn't added far later but who would know as these numpty pseudo academics don't seem to grasp why it helps and is important to date writings and to add revision dates, makes me mad the lack of dates on the web)

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

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Smee: Thanks for your

Smee:

Thanks for your congratulations. Maybe one of these days I'll be able once again to spend quality time with the computer. I had envisioned retirement would give me even more time to spend on "my" projects than when I was teaching. So far that vision has not come true! :ohdear:

Hugo:

I have the latest edition of Meyer's book: 3rd edition, November, 2006, although the copyright is 2007.

Thanks for the two W3C references. I'll be giving those sections serious study.

But now for a light-hearted but heart-felt complaint--against...I don't know who--W3C?? Anyway, as much as computers represent a love of mine and with which I have had a professional relationship throughout most of my career, I must say that I HATE reading online manuals. Shock I've been a bibliophile since my high school days and have a very large library. Nothing can replace a real book: they're beautiful, they adorn your bookcases and walls, you can study them anywhere, you can underline in them, you can make marginal notes, etc. There's simply no comparison.

Yes, I know money must be an issue, but it's a great pity. But even if W3C were flush with money, I suspect they would be content with an online presentation because as a society we're are losing our love for books, and that's even a greater pity.

Yes, I also know I could print off the manuals, but that is not very practical for a full-length book. The best I can do is print off the sections I currently need to study. But the result will certainly not adorn my bookshelves! Sad

What I would really like would be to buy a published version of the official standards and specifications for CSS. I went to the W3 Web site and to Amazon. Couldn't find anything. Does such a book exist?

Okay, I'll get off my soap box. Smile

Ken

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

kenmorgan wrote: I must say

kenmorgan wrote:

I must say that I HATE reading online manuals... Nothing can replace a real book: they're beautiful, they adorn your bookcases and walls, you can study them anywhere, you can underline in them, you can make marginal notes, etc. There's simply no comparison.
Ken

This is one thing we both agree on. I'd much rather be holding a book in a park, or on fishing boat flipping through crisp pages, then sitting behind a screen. I love going back through older books and reading my old notes or highlighted paragraphs.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 24 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

kenmorgan wrote: I must say

double post :bigoops:

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 9 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Well, it's always a pleasure

Well, it's always a pleasure to find one point of agreement. And...the fact that it's BOOKS, that's really equivalent to agreeing on at least FIVE "normal" issues. Smile

Ken