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

IP logged posted posted 11-22-2003 04:14 Edit Quote

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

IP logged posted posted 11-22-2003 06:43 Edit Quote

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

IP logged posted posted 11-22-2003 07:24 Edit Quote

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

IP logged posted posted 11-24-2003 04:24 Edit Quote

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

IP logged posted posted 11-27-2003 11:43 Edit Quote

/* 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:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu