Topic: liquid 2 column divs $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11104" title="Pages that link to Topic: liquid 2 column divs" rel="nofollow" >Topic: liquid 2 column divs\$

Author	Thread
ninmonkey Nervous Wreck (II) Inmate From: Insane since: Nov 2003	posted 11-22-2003 04:14 1) What is the ">" in style sheets for? For example, this site uses it http://www.glish.com/css/7.asp What does code: html>body #centercontent{ ... } modify? Does it mean use this style with any child body of the parent html that has the id "centercontent"? If so, I don't really understand what it does, or why its there, because it seems like it's already declared in the example. 2) If I use #idname will the style only affect the first object it finds with the id "idname"? 3) (the main question) I want 2 columns, the left one is only as wide as the widest text on it. The right column should take up the page's remaining width. If I set the left colums width to 20% and the right to 79% it sort of works, but, if I change it to 80% it will break to the next line. Here's what I have so far, do you see any errors? code: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>2 columns xhtml and css</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="leftcontent"> <p>left content</p> <p>left <a href="#">link</a></p> <p>left content</p> </div> <div id="rightcontent"> <p>right content</p> <p>right content</p> <p>right content</p> </div> </body> </html> code: style.css a { color:#CC3300; text-decoration:none; } a:hover { color:#006600; text-decoration:underline; } body { background-color:#808080; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p { margin: 10px 5px 10px 5px; padding: 0px 0px 0px 0px; } #leftcontent { border: 1px dashed #000000; background-color: a0a0a0; float: left; width:25%; } #rightcontent { border: 1px dashed #000000; background-color: c0c0c0; float: left; } [This message has been edited by ninmonkey (edited 11-22-2003).]
CPrompt Maniac (V) Inmate From: there...no..there..... Insane since: May 2001	posted 11-22-2003 06:43 well, i'm not CSS guru but here has been my experience with this stuff. The code: html>body #centercontent{ ... } is part of the "iewin5 fudge". Since IE has a problem with the box model, you have to use the fudge techinque which in part is what you posted there, the other part it the: code: voice-family: "\"}\""; voice-family: inherit; glish came up with this so that IE would render the box model correctly. If you notice on some they set the first width to say "300px" and after the voice-family stuff they set it to 30px smaller (270px). Again, helps correct IE's screwups. as for your code not working correctly, take into consideration the borders that you are using. My experince with these things has been that if I use some type of border then i have to set one of the boxes one pixel smaller to get it right. twitch^ is the man for this though. I'm sure he could explain it better. Later, C:\ ~Binary is best~
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-22-2003 07:24 ninmonkey: quick reply 'coz it's 7am and I haven't slept. 1) As you can read in the CSS2 specifications, the > in html>body #centercontent{} is a CHILD SELECTOR and means that that style refers to the elements named 'centercontent' that are descendant of a body element that is a child of the html element. It's kinda redudant since the HTML specs authorize only ONE body element in the html element. 2) According to the (X)HTML specs the id attribute must be unique, but the browsers allow to use an id several times and most of them ( indeed all the ones I know ) will apply the #idName style to every elements having sharing that 'unique' id. 3) If you don't mind, I'll sleep few hours before Mathieu "POÏ" HENRI [This message has been edited by poi (edited 11-22-2003).]
ninmonkey Nervous Wreck (II) Inmate From: Insane since: Nov 2003	posted 11-24-2003 04:24 thanks for #1 and 2. I just noticed that the code I posted will show up on one line in IE 6 win32, but, the background colors on both of the divs are not applied. The same page in opera 7.11 win32 uses the correct background colors for the div's, but, the 2nd div breaks to a new line. Could the paragraph margins be causing a problem? Maybe I should use padding instead? thanks, monkey
FatRod Bipolar (III) Inmate From: # Insane since: May 2002	posted 11-27-2003 11:43 /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct length values to user agents that exhibit the parsing error exploited above yet get the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include a "be nice to Opera 5" rule every time you use the Tantek Celik hack*/ body>#centercontent {width:128px;}

Topic: liquid 2 column divs\$

Author

Thread

ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

posted 11-22-2003 04:14

1) What is the ">" in style sheets for? For example, this site uses it http://www.glish.com/css/7.asp What does

code:

html>body #centercontent{ ... }

modify?

Does it mean use this style with any child body of the parent html that has the id "centercontent"? If so, I don't really understand what it does, or why its there, because it seems like it's already declared in the example.

2) If I use #idname will the style *only* affect the first object it finds with the id "idname"?

3) (the main question) I want 2 columns, the left one is only as wide as the widest text on it. The right column should take up the page's remaining width. If I set the left colums width to 20% and the right to 79% it sort of works, but, if I change it to 80% it will break to the next line. Here's what I have so far, do you see any errors?

code:

index.html

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>2 columns xhtml and css</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>



  <div id="leftcontent">



<p>left content</p>

<p>left <a href="#">link</a></p>

<p>left content</p>



  </div>

  <div id="rightcontent">



<p>right content</p>

<p>right content</p>

<p>right content</p>



  </div>



</body>

</html>

code:

style.css

a

{

color:#CC3300;

text-decoration:none;

}



a:hover

{

color:#006600;

text-decoration:underline;

}



body

{

background-color:#808080;

color:#000000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

}



p

{

margin: 10px 5px 10px 5px;

padding: 0px 0px 0px 0px;

}



#leftcontent

{

border: 1px dashed #000000;

background-color: a0a0a0;

float: left;

width:25%;

}

#rightcontent

{

border: 1px dashed #000000;

background-color: c0c0c0;

float: left;

}

[This message has been edited by ninmonkey (edited 11-22-2003).]

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted 11-22-2003 06:43

well, i'm not CSS guru but here has been my experience with this stuff.

The

code:

html>body #centercontent{ ... }

is part of the "iewin5 fudge". Since IE has a problem with the box model, you have to use the fudge techinque which in part is what you posted there, the other part it the:

code:

voice-family: "\"}\"";

voice-family: inherit;

glish came up with this so that IE would render the box model correctly. If you notice on some they set the first width to say "300px" and after the voice-family stuff they set it to 30px smaller (270px). Again, helps correct IE's screwups.

as for your code not working correctly, take into consideration the borders that you are using. My experince with these things has been that if I use some type of border then i have to set one of the boxes one pixel smaller to get it right.

twitch^ is the man for this though. I'm sure he could explain it better.

Later,

C:\

~Binary is best~

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-22-2003 07:24

ninmonkey: quick reply 'coz it's 7am and I haven't slept.

1) As you can read in the CSS2 specifications, the > in html>body #centercontent{} is a CHILD SELECTOR and means that that style refers to the elements named 'centercontent' that are descendant of a body element that is a child of the html element. It's kinda redudant since the HTML specs authorize only ONE body element in the html element.

2) According to the (X)HTML specs the id attribute must be unique, but the browsers allow to use an id several times and most of them ( indeed all the ones I know ) will apply the #idName style to every elements having sharing that 'unique' id.

3) If you don't mind, I'll sleep few hours before

Mathieu "POÏ" HENRI

[This message has been edited by poi (edited 11-22-2003).]

ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

posted 11-24-2003 04:24

thanks for #1 and 2.

I just noticed that the code I posted will show up on one line in IE 6 win32, but, the background colors on both of the divs are not applied.

The same page in opera 7.11 win32 uses the correct background colors for the div's, but, the 2nd div breaks to a new line.

Could the paragraph margins be causing a problem? Maybe I should use padding instead?

thanks,
monkey

FatRod
Bipolar (III) Inmate

From: #
Insane since: May 2002

posted 11-27-2003 11:43

/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack*/
body>#centercontent {width:128px;}

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: liquid 2 column divs

Insert Slimies »

Insert UBB Code »

Topic: liquid 2 column divs $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11104" title="Pages that link to Topic: liquid 2 column divs" rel="nofollow" >Topic: liquid 2 column divs\$