"Dave" <da****@gmail.comwrote in
comp.infosystems.
www.authoring.stylesheets:
TIA for the help.....this should be easy for a pro....I need the two
divs with text to display on the same line at the top of the
container..???
First, it's good to validate both HTML and CSS. My embedded validator
came up with 3 warnings in HTML, which I list here:
line 1 column 1 - Warning: missing <!DOCTYPEdeclaration
line 2 column 1 - Warning: inserting missing 'title' element
line 3 column 2 - Warning: <styleinserting "type" attribute
0 errors / 3 warnings
Theese are listed as warnings, but in my opinion they are all serious
omissions of required HTML structural parts, required by the
recommendation and thus errors.
As for your CSS, my embedded CSS validator came up with:
Warning: Expected color but found '$'. Error in parsing value for
property 'background-color'. Declaration dropped.
Line: 4
----------
Warning: Error in parsing value for property 'font'. Declaration dropped.
Line: 5
----------
Warning: Expected color but found '$'. Error in parsing value for
property 'color'. Declaration dropped.
Line: 6
----------
Warning: Error in parsing value for property 'line-height'. Declaration
dropped.
Line: 9
----------
Warning: Expected declaration but found '$'. Skipped to next declaration.
Line: 15
----------
Warning: Error in parsing value for property 'background'. Declaration
dropped.
Line: 18
----------
Warning: Unknown property 'zoom'. Declaration dropped.
Line: 19
----------
Warning: Error in parsing value for property 'font'. Declaration dropped.
Line: 24
----------
Warning: Expected color but found '$'. Error in parsing value for
property 'color'. Declaration dropped.
Line: 27
----------
Warning: Expected color but found '$'. Error in parsing value for
property 'color'. Declaration dropped.
Line: 30
----------
Warning: Error in parsing value for property 'font'. Declaration dropped.
Line: 31
You actually look like you are using a server-side pre-ASP/PHP variable
substitution technique I used to construct more than a decade ago.
Problem is that these '$' variables are not legal CSS.
>
<html>
<head>
<style>
body {background-color: $background-color; background-image:url('') ;
font:normal $global-font-size $text-font; text-align:center;
width:100%;margin:0;color:$text-color; }
.clear {clear:both; display:block; font-size:1px; height:1px;
line-height:-1;}
#maintype #caption {background-color:#fff; padding:15px;}
#container {margin:0 auto; text-align:left; width:760px; border-bottom:
1px solid #000000;border-left: 1px solid #000000;
border-right: 1px solid #000000; $page-border-color; background-color:
#ffffff;}
#header {background:$header-background-color
url('$header-background-image') ; zoom:1; min-height:75px;} /* _height
and zoom are MS hacks */
#header:after {clear:both; content:"."; display:block; height:0;
visibility:hidden;}
#brandmark {float:left; font:normal $company-name-text-size
$company-name-text-font; width:500px;} /* 510 + 250 = 760 */
#brandmark a {color:$company-name-text-link-color; display:block;
padding:0 0 5px 13px; text-decoration:none;}
#slogan {color:$tagline-content-text-color; display:block; float:right;
font:normal $tagline-content-text-size $tagline-content-text-font;
padding:2.7em 15px 10px 10px; width:225px; text-align:right;} /* 225 +
25= 250 */
</style>
</head>
<body class="vertical" id="maintype">
<div id="container">
<div id="header"><br class="clear" />
An etago <element/is legal and required XHTML, but not HTML.
<h3 id="brandmark"><a href="index.html" title="company name
text">company name text</a></h3>
<strong id="slogan">tagline</strong>
</div>
</div>
As to your question, it's not even described by your HTML. You have two
DIV elements, one nested in another. Your question however is described
schematically as follows:
+-----------------------------+--------------------------+
| DIV 1 with some text | DIV 2 with some text |
+-----------------------------+--------------------------+
| the "container" upon which these two DIVs sit |
+--------------------------------------------------------+
This is how I interpret your question.
If this is what you want, there is at least one way I would approach this:
Float DIV2 to the right, or float DIV1 to the left. The floated DIV must
always be parsed first in the web document.
Thus:
<div style="float:left;width:50%;">
DIV 1 with some text
</div>
<div>
DIV 2 with some text
</div>
<div id="some-container-that-sits-below-it-all">
the "container" upon which these two DIVs sit
</div>
OR
<div style="float:right;width:50%;">
DIV 2 with some text
</div>
<div>
DIV 1 with some text
</div>
<div id="some-container-that-sits-below-it-all">
the "container" upon which these two DIVs sit
</div>
I have used the style attribute approach rather than style element but
only to be illustrative, but you should prefer the latter as you seem to
have. The width property is crucial as to how the floated div will share
the same space in being vertically positioned with the other div. I use
either the percentage of the parent container (this case, body) width but
sometimes a character width ('em' value).
Another approach would be to do absolute positioning, but there are people
more knowledgeable about the use of this (and its caveats), and maybe they
will say something here that both you and I can follow.
>
</body>
</html>
