CSS positioning & tables

[robsta]

Hello -

I'm interested in finding out whether it's possible to combine CSS positioning with tables in the same page layout.

The reason: So far my designs using CSS to position the elements hug the left-side of the browser window - I design for 800x600, 15" monitor. How can I get the entire page to center in the window of a larger monitor? Can I set variable widths in CSS to achieve this?

When I used to lay out the page using tables, the page would adapt to fit the monitor size.

Any and all feedback welcome.

- Robsta
:)

[meow]

If it doesn't adopt it's because you stop it. Fixed widths, absolute positioning in a rigid way, blah blah blah...

Center something by setting its left and right margins to equal values. The whole page? Padding (or margin) on BODY.

Or something else. ;)

[robsta]

Could you explain?

Robsta
:confused:

[Mzungu]

I have been wondering about the same issue.


I want to divide a space into two areas, one with fixed width and one stretching to fill out the remaining space.


I think this boils the question down to the essence.


Can someone help us?

[MotherNatrsSon]

Originally posted by Mzungu
I have been wondering about the same issue.


I want to divide a space into two areas, one with fixed width and one stretching to fill out the remaining space.


I think this boils the question down to the essence.


Can someone help us?

I'd like to hear this one too. I guess it depends on what the definition of "fluid" relly is. Is it that a page "collapse down to it's largest box before scroll bars appear or is it that a "page" stays centered within reason as a person resizes a browser window?

If you check out robsta's other thread (http://www.codingforums.com/showthread.php?s=&threadid=24142) and look at his site, then download the txt file I attached and paste it or rename it with a .html extension and open it in a browser you will see it centers as the window size changes down to the size of the containing div before scrollbars appear. I guess that is the idea I have of fluid.

What I want to see is a page that is using all relative positioning to see how "fuid" looks with that.

MNS

[robsta]

Hello MNS -

Just sent you a PM. Checking my e-mail right now.

Mzungu - I was going to fwd you to my other post, but MNS replied to you first. Check it out.

robsta
:)

[Mzungu]

Okay, I looked at it and learned something...


But I can't figure out how to use it to solve the specific problem I posted earlier:

to divide a space into two areas, one with fixed width and one stretching to fill out the remaining space




Did I just miss something??

[robsta]

No you didn't miss anything... this is what you want.

Go to http://glish.com/css - there are some templates there for the layout you're tring to implement: two columns, one fixed the other fluid.

What MNS worked up was a solution to my existing design - creating a "fluid" background that would expand/contract to fit the window dimension of the browser, while keeping the existing static design centered in the frame.

Maybe my use of the term "fluid" is not correct web terminology - I used it because it described the effect I wanted to achieve.

Robsta
:)

[ronaldb66]

Another fine way to solve the two-column-layout-question can be found in BlueRobot's Layout Reservoir (http://www.bluerobot.com/web/layouts/).

Although using the float property seems logical in many applications, there are gliches in some browsers that make them render incorrectly; that's why simulating float with absolute positioning is preffered over actual floating. Another advantage is that the menu can be placed after the content in the document, which is the preffered order for text browsers and screen readers.

The layout reservoir examples do just this; in them, the absolutely positioned menu is related to the browser window. I've experimented with a container div holding both columns and relating the menu's position to it, with various success (it did work in the end, though).

[Mzungu]

Okay, great.

Now I've created to columns one with fixed with positioned absolute and the other with margin-left equal to the first column's width.

So now I want to center a box in the variable-width column. How do I do that when I want the text in the box to be leftaligned?


Sorry for being a bit dull - but thanks a lot

[Mzungu]

I text-aligned:center a div with a text-aligned:left div inside it.

[ronaldb66]

The text-align property should only effect inline content (text and images) when specified on the containing - block - element; IE incorrectly applies it to block-level elements as well. Your solution is a well-known hack for that incorrect interpretation.

To properly center block-level elements for standards-compliant browsers, margin-left: auto; margin-right: auto and a specific width should be specified for the element that needs to be centered.

[Mzungu]

My text-aligning a block validates as html4.01/css2. Will it still not work on all browsers?


I tried the margin-left/right:auto and specific width but it didn't work. The block is just left-aligned.


Maybe you can take a look at the code (which is not so heavy) at http://maarup.net/test/stef which uses your margin trick and at http://maarup.net/steffen which is the public page using the hack.

(It's actually a funny little page, the words are: ...you can put a hat on my head)
(The red border is just for making the layouting easier.)