By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,949 Members | 1,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,949 IT Pros & Developers. It's quick & easy.

CSS div block clear...I don't even know..??

P: n/a
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..???
<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" />
<h3 id="brandmark"><a href="index.html" title="company name
text">company name text</a></h3>
<strong id="slogan">tagline</strong>
</div>

</div>

</body>
</html>

Nov 5 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"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>



Nov 5 '06 #2

P: n/a
On 2006-11-05, Patient Guy <sevisen.adam@gmailDOTHEREcomwrote:
[snip]
As to your question, it's not even described by your HTML.
I can't understand the OP's question either.
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>
You also need to set "clear: both" on that last div I think.
Nov 5 '06 #3

P: n/a
Dave wrote:
TIA for the help.....I need the two
divs with text to display on the same line at the top of the
container..???
No wonder you are having problems with such convoluted coding.
In any case, to have the two line up with your, uhm stuff, adjust the
padding on the one floating right. That will do it.

--
Gus
Nov 5 '06 #4

P: n/a

Gus ,

Thanks you that's what I did and some other tweaks....

Nov 6 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.