FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Css - Floating Blocks

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


NewGuyinTown
I have problem in designing a webpage using CSS:

Div id screen (height: auto;) composes (supposedly and intentionally) of one floating div id navigation and one div id bodytext.

It looks perfectly fine for Internet Explorer... (screen automatically resizes itself so that these two boxes will be in screen)

-----

but for Mozilla FireFox/Netscape: if bodytext's height length fails to exceed the height length of navigation, then navigation will not be in screen.

I tried to put the navigation to the left of bodytext in a screen (or box, blocks with a background) by using float. However, in Mozilla FireFox, it doesn't look like the floating div id navigation bar is in "screen."

Can anyone help me fix this? If not, are there any alternatives in doing this with only CSS and HTML?

http://newguyintown.frih.net/programs.php
Screen (static height) consist of two floating blocks. Screen automatically resizes itself in Internet Explorer, but it's static in Mozilla Firefox/Netscape.

Thank you.

Header File:
Code:

<center>
<link rel="stylesheet" type="text/css" media="screen" href="guidance.css" />
<div id="screen">
<center><img src="images/logo.jpg" style="margin:0px; padding:0px;"></center>
<div style="height: auto; float: left; clear: left;">
<div id="navigation"><div id="navtitle"><b>Navigation</b></div>
<a href="scholarship.html">Scholarship</a>
<a href="collegeapp.html">College Application</a>
<a href="admissionterms.html">Admission Terms</a>
<a href="careercalender.html">Career Calender</a>
<a href="collegesearch.html">College Search</a>
<a href="testing.html">Testing</a>
<a href="scholarshipsearch.html">Scholarship Search</a>
</div><p><div id="note">Compatible with:<ul id="specialident">Internet Explorer<br/>Mozilla Firefox<br/>Netscape</ul></p>
Best Viewed with:<ul id="specialident">Internet Explorer</ul></div></div><div align="right" style="margin-top:7px; margin-bottom:7px;"><div id="body">


guidance.css
Code:

div#logo{
   width: 9.3in;
   height: auto;
   text-align:left;
   border:1px solid black;
   border-bottom:0px;
   text-align: center;
   background-color: silver;
   margin: 0px;
   padding: 0px;
   padding-left: 8px;
   padding-right: 5px;
}
div#screen{
   width: 900px;
   height: auto;
   text-align:left;
   border:1px solid black;
   padding-left: 8px;
   padding-right: 5px;
   background-color: silver;
   display: block;
}
div#note{
   font-size: smaller;
}
div#navigation{
   width: 1.8in;
   margin-top: 100px;
   margin-right: 8px;
   border: 1px solid black;
   background-color: white;
}
#navigation a{
   padding-left: 5px;
   text-decoration: none;
   color: blue;
   font-weight: bold;
   display: block;
}
#navigation a:hover{
   color: white;
   background-color: blue;
}
div#navtitle{
   background-color: gray;
   font-weight: bold;
   text-align: center;
   display: block;
}
p#bodytitle{
   font-weight: bold;
   text-align: center;
   display: block;
   font-size: larger;
   background-color: gold;
   margin: 0px;
   border-bottom: 1px solid black;
}
div#prebody{
}
div#body{
   border: 1px solid black;
   width: 7.15in;
   text-align:left;
   background-color: white;
   display: border;
   padding:0px;
}
div#text{
   padding: 7px;
   padding-top:0px;
}
ul#specialident{
   margin:0px; padding-left: 10px;
}
mariohs
I don't get the problem... I took a look into your site using both IE and Firefox, and it's pretty much the same... could you explain it better?
rein
hmm .. something seems to be wrong with your html code. I've got a <div id="main"> inside a an <ul id="main"> wierd. Also, you should consider giving your navigation container div an id; for better control.

As for your css; this page might be helpfull. simple two column css tutorial.

Hope you get it solved. Lots of luck to you.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.