Why am I so thick when it comes to CSS positioning?

[John Latter]

I must be one of the thickest people on this planet! For days now I
have tried to find/modify/create a basic two-column layout using CSS
where both columns remain the same height irrespective of which has
the most content.

I ain't getting anywhere! I posted a thread entitled "2 column css
template wanted", and as usual, people were very helpful with their
suggestions.

As a newbie, however, some of the solutions offered were beyond my
ability to understand why they were coded the way they were - not
helped by endless references to browser bugs & workarounds.

One chap gave me the following link:

http://usenet.alt-html.org/2-layout.html

and when I looked at it in Opera 7.2 there were 2 horizontally
adjacent coloured boxes/cells. One contained "o take will, and slings
of time (etc.) and the other "when he himself might his"

When I looked at it in IE6 there were no boxes, the two strings of
text appeared vertically, one under the other, and the message "This
site is designed for and will look much better in a modern browser
such as Opera or Mozilla, but it is accessible to any browser or
Internet device." magically appeared outa nowhere.

Maybe its my browser settings (I dunno) and thanks for putting up with
this moan but I am really thick as far as positioning is concerned -
waaahhh!

Ain't there no EASY explanations re CSS positioning? Everything I've
read so far makes sense, until I try and apply it that is! And I'm now
sick of reading tutorials.

Right.

I feel a bit better now

- time for a cuppa tea!

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html

 

[brucie]

One chap gave me the following link:

http://usenet.alt-html.org/2-layout.html

and when I looked at it in Opera 7.2 there were 2 horizontally
adjacent coloured boxes/cells. One contained "o take will, and slings
of time (etc.) and the other "when he himself might his"

thats just a bit of gibberish for demonstration

When I looked at it in IE6 there were no boxes, the two strings of
text appeared vertically, one under the other, and the message "This
site is designed for and will look much better in a modern browser
such as Opera or Mozilla, but it is accessible to any browser or
Internet device." magically appeared outa nowhere.

IE doesn't support the CSS used to create the two equal height
columns.

display:table; and display:table-cell;

IE also doesn't support attribute selectors so it ignores them (as it
should) but it has a bug with how it ignores them.

by rights with something like:

p, .blah, [attribute-selector]{... }

what IE should/is supposed to do is apply the css to the <p> element
and the element with the "blah" class. as it doesn't support attribute
selectors it doesn't/cant apply the css to the element with the
matching attribute-selector.

easy peasy but IE has decided to do its own thing. because there is an
attribute selector it will also ignore applying the css to the <p>
element and the element with the "blah" class.

this is good, it saves having to have an attribute selector on every
bit of css you use so IE ignores it.

i'm taking advantage of the bug by using a dummy attribute selector
[nul] that doesn't do anything to hide all the CSS from IE. i could
use that bug to present an entirely different design that worked for
IE users but i'm lazy so all the css is hidden and you just get plain
html.

you see the paragraph of red text because the css saying not to
display the red paragraph

#ug,[nul]{display:none;}

is not supported by IE.

opera and mozilla do support the CSS to create the two equal height
columns and they do support attribute selectors but as it doesn't
apply to anything it has no effect so all of the css is applied for
those browsers. you don't see the paragraph of red text because the
css has said not to display it.

Ain't there no EASY explanations re CSS positioning?

the real problem is that there are so many different ways to do the
same thing but not all the ways will work for your particular use.

 

[rf]

I must be one of the thickest people on this planet! For days now I
have tried to find/modify/create a basic two-column layout using CSS
where both columns remain the same height irrespective of which has
the most content.

Web pages are as long as their content.

Split them into sections (divs) and each section is as long as it's content.
That's how they work.

It sounds like you have a table based layout you are trying to reproduce
pixel by pixel. This will not happen.

Show us what you have, or more to the point, what you want (using tables if
you wish) and there will be something that can be done. It may be simulated
but it can usually be done [1].

[1] If it can't then you must rethink your design

Cheers
Richard.

 

[John Latter]

One chap gave me the following link:

http://usenet.alt-html.org/2-layout.html

and when I looked at it in Opera 7.2 there were 2 horizontally
adjacent coloured boxes/cells. One contained "o take will, and slings
of time (etc.) and the other "when he himself might his"

thats just a bit of gibberish for demonstration

When I looked at it in IE6 there were no boxes, the two strings of
text appeared vertically, one under the other, and the message "This
site is designed for and will look much better in a modern browser
such as Opera or Mozilla, but it is accessible to any browser or
Internet device." magically appeared outa nowhere.

IE doesn't support the CSS used to create the two equal height
columns.

display:table; and display:table-cell;

IE also doesn't support attribute selectors so it ignores them (as it
should) but it has a bug with how it ignores them.

by rights with something like:

p, .blah, [attribute-selector]{... }

what IE should/is supposed to do is apply the css to the <p> element
and the element with the "blah" class. as it doesn't support attribute
selectors it doesn't/cant apply the css to the element with the
matching attribute-selector.

easy peasy but IE has decided to do its own thing. because there is an
attribute selector it will also ignore applying the css to the <p>
element and the element with the "blah" class.

this is good, it saves having to have an attribute selector on every
bit of css you use so IE ignores it.

i'm taking advantage of the bug by using a dummy attribute selector
[nul] that doesn't do anything to hide all the CSS from IE. i could
use that bug to present an entirely different design that worked for
IE users but i'm lazy so all the css is hidden and you just get plain
html.

you see the paragraph of red text because the css saying not to
display the red paragraph

#ug,[nul]{display:none;}

is not supported by IE.

opera and mozilla do support the CSS to create the two equal height
columns and they do support attribute selectors but as it doesn't
apply to anything it has no effect so all of the css is applied for
those browsers. you don't see the paragraph of red text because the
css has said not to display it.

Ain't there no EASY explanations re CSS positioning?

the real problem is that there are so many different ways to do the
same thing but not all the ways will work for your particular use.

Thankyou for your explanation Brucie - most of it goes over my head (I
would have to study the css of that layout to see if I could make
sense of it). I did wonder what the 'nul' was for and the fact that
dummy attribute selectors can be used only adds to my uncertainty.

The real problem is that I don't know enough and am not really
grasping what I read - despite playing with stuff in HTML-Kit. This is
why I was hoping to find a 'rock-steady' template and get on with
designing a website immediately and then pick up more about css as I
went along.

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html

 

[John Latter]

I must be one of the thickest people on this planet! For days now I
have tried to find/modify/create a basic two-column layout using CSS
where both columns remain the same height irrespective of which has
the most content.

Web pages are as long as their content.

Split them into sections (divs) and each section is as long as it's content.
That's how they work.

It sounds like you have a table based layout you are trying to reproduce
pixel by pixel. This will not happen.

Show us what you have, or more to the point, what you want (using tables if
you wish) and there will be something that can be done. It may be simulated
but it can usually be done [1].

[1] If it can't then you must rethink your design

Cheers
Richard.

Hi Richard - thanks for replying and I do hope you might be able to
help!

This is what I put in the other thread:

<html>
<head>
<title>Page title</title><style>
body {
margin:10px 10px 0px 10px;
padding:0;
background-color:#ffffcc;
}

#box1 {
background:#003200;
}

#box2 {
margin-left:180px;
padding-left:10px;
background:#ffffcc;
}

#box1a {
position:absolute;
top:10px;
left:10px;
}

#box2a {
background:#66ffcc;}
</style>
</head>
<body>
<div id="box1">
<div id="box1a">some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P></div>
<div id="box2">
<div id="box2a">
some<P>content<P>and sometext<P>
some<P>content<P>and some text<P>some<P>content<P>
and some text<P>
</div>
</div>
</div>
</body>
</html>

I sorta get a feel for how things work and hope I'm right in saying:

box1 defines an area
box 2 is a subset of that area and therefore that's where the 'flow'
is going ie adding more content to box2 automatically increases the
height of box1.

What I can't quite grasp is why adding more content to box1 doesn't
similarly increase the height of box2 - I know I've used absolute
positioning to define the content of box1 but I got the same results
using no positioning at all - I sorta feel that box2 should expand
vertically to accomodate any content assigned to it.

I hope you can show me where I'm going wrong!

Regards,

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html