CSS Float Problems

#1

I'm just becoming comfortable with using CSS. At least, I thought I was. I put
together a test page and it worked on IE 7. Then, I downloaded Firefox and
Safari to check compatability on other browsers.

I have a centered page with a top navigation bar, content area, and a footer
(bottomNavBar). Inside the content area I have two sections, a left section and
a right section. In the left there should be text, some sort of welcome text.
In the right some sort of Flash intro video the user can play when they choose.

The problem: I got the float to work in IE 7 (Sometimes it wouldn't. It seems
tempermental.). However, the floats won't work on the other 2 browsers. In the
other 2 it puts the first div listed above the second instead of side by side
like in IE 7.

Here is the code:

***First is the HTML***

<body>
<div class="header">
<img src="Logo001.png" />
</div>
<div class="container">
<div class="topNavBar">
<ul class="topNavBarUL">
<li class="topNavBarLI"><a class="topNavBarLinksCurrent"
href="index.htm">Home</a></li>
<li class="topNavBarLI"><a class="topNavBarLinks"
href="page2.htm">Link2</a></li>
<li class="topNavBarLI"><a class="topNavBarLinks"
href="page3.htm">Link3</a></li>
<li class="topNavBarLI"><a class="topNavBarLinks"
href="page4.htm">Link4</a></li>
</ul>
</div>
<div class="content">
<div class="contentIndexFlashIntro">
<script type="text/javascript">
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=9,0,28,0','width','350','height','350','ti tle','IntroVideo','src','Intro
Video002','quality','high','pluginspage','http://www.adobe.com/shockwave/downloa
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','IntroVideo002' ); //end
AC code
</script><noscript><object
classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=9,0,28,0" width="350" height="350" title="IntroVideo">
<param name="movie" value="IntroVideo002.swf" />
<param name="quality" value="high" />
<embed src="IntroVideo002.swf" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
n=ShockwaveFlash" type="application/x-shockwave-flash" width="350"
height="350"></embed>
</object></noscript>
</div>
<div class="contentIndexWelcome">

<p class="smallText">Paragraph 1</p>
<p class="smallText">Paragraph 2</p>
<hr/>
<ul><u class="smallText">Unordered List</u>
<li><span class="smallText">Item 1</span></li>
<li><span class="smallText">Item 2</span></li>
<li><span class="smallText">Item 3</span></li>
<li><span class="smallText">Item 4</span></li>
<li><span class="smallText">Item 5</span></li>
<li><span class="smallText">Item 6</span></li>
</ul>
<hr/>
<p class="smallText">Concluding Paragraph</p><br />
</div>
</div>
<div class="bottomNavBar">
<p>© Copyright 2008</p>
</div>
</div>
</body>

*********************************
***Next is the external CSS.***

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
margin: 0px;
}

.header {
background-color: #FFFFFF;
width: 100%;
margin: 0px;
padding: 0px 0px 0px 0px;
top: 0px;
}

.container {
background-color: #FFFFFF;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
}

/* top navigation bar class
** I prefer to have a nav bar to the top rather than the left
*/
.topNavBar {
width: 800px;
height: 22px;
background-color: #0080EE;
border: 0px solid #FFFFFF; /* I turned off the pixel width because I didn't
** want a border right now. But I left the rest in case
** I wanted to change it back to 1px.
*/
}

/* topNavBar link properties
** The idea is to have each link highlight when cursor comes over any part
** of the section, not just the words. Then goes back to normal when cursor
** leaves. The current page should have its own link highlighted always.
*/
ul.topNavBarUL {
height: 17px;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}

li.topNavBarLI {
display: inline;
}

a.topNavBarLinks:link, a.topNavBarLinks:active, a.topNavBarLinks:visited {
float: left;
text-decoration: none;
color: #FFFFFF;
background-color: #0080EE;
padding: 0.15em 0.6em;
border-right: 1px solid #FFFFFF;
}

a.topNavBarLinks:hover {
color: #FFFFFF;
background-color: #FF9900;
text-decoration: none;
}

a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
a.topNavBarLinksCurrent:visited, a.topNavBarLinksCurrent:hover {
float: left;
text-decoration: none;
color: #FFFFFF;
background-color: #00FF33;
padding: 0.15em 0.6em;
border-right: 1px solid #FFFFFF;
}

/* content class
** This is the part of the page that the content will go in.
** It should have the full width of the container class and
** stretch in height based on the content with a minimum
** height of 500px.
*/
.content {
width: 800px;
min-height: 400px;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

/* content links
** The links in the content area will just be the regular links.
** Navigation links will all be given special classes to define them.
*/
a:link, a:active, a:visited {
color: #0080EE;
text-decoration: none;
}

a:hover {
color: #FF9900;
text-decoration: underline;
}

/* content headings, hr
*/
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
color: #00FF33;
margin-bottom: 2px;
}

hr {
color: #0080EE;
}

p {
text-indent: 20px;
margin-top: 4px;
}

ul {
margin-top: 4px;
}

li {
list-style: square;
color: #00FF33;
}

.contentIndexFlashIntro {
padding-top: 2px;
padding-right: 2px;
float: right;
}

.contentIndexWelcome {
float: left;
text-align: justify;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 4px;
}

#2

To make your contentIndexFlashIntro & contentIndexWelcome divs sit
side-by-side you have to assign each a width. The combined total of those
widths must be <=800px.

--

Walt

"JasonTheAdobeFan" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

I'm just becoming comfortable with using CSS. At least, I thought I was. I
put
together a test page and it worked on IE 7. Then, I downloaded Firefox and
Safari to check compatability on other browsers.

I have a centered page with a top navigation bar, content area, and a
footer
(bottomNavBar). Inside the content area I have two sections, a left
section and
a right section. In the left there should be text, some sort of welcome
text.
In the right some sort of Flash intro video the user can play when they
choose.

The problem: I got the float to work in IE 7 (Sometimes it wouldn't. It
seems
tempermental.). However, the floats won't work on the other 2 browsers. In
the
other 2 it puts the first div listed above the second instead of side by
side
like in IE 7.

Here is the code:

***First is the HTML***

body
div class="header"
img src="Logo001.png" /
/div
div class="container"
div class="topNavBar"
ul class="topNavBarUL"
li class="topNavBarLI"><a class="topNavBarLinksCurrent"
href="index.htm">Home</a></li
li class="topNavBarLI"><a class="topNavBarLinks"
href="page2.htm">Link2</a></li
li class="topNavBarLI"><a class="topNavBarLinks"
href="page3.htm">Link3</a></li
li class="topNavBarLI"><a class="topNavBarLinks"
href="page4.htm">Link4</a></li
/ul
/div
div class="content"
div class="contentIndexFlashIntro"
script type="text/javascript"
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=9,0,28,0','width','350','height','350','ti tle','IntroVideo','src','Intro
Video002','quality','high','pluginspage','http://www.adobe.com/shockwave/downloa
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','IntroVideo002' );
//end
AC code
/script><noscript><object
classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=9,0,28,0" width="350" height="350" title="IntroVideo"
param name="movie" value="IntroVideo002.swf" /
param name="quality" value="high" /
embed src="IntroVideo002.swf" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
n=ShockwaveFlash" type="application/x-shockwave-flash" width="350"
height="350"></embed
/object></noscript
/div
div class="contentIndexWelcome"
!--<center><h2>Welcome</h2></center
hr/>--
p class="smallText">Paragraph 1</p
p class="smallText">Paragraph 2</p
hr/
ul><u class="smallText">Unordered List</u
li><span class="smallText">Item 1</span></li
li><span class="smallText">Item 2</span></li
li><span class="smallText">Item 3</span></li
li><span class="smallText">Item 4</span></li
li><span class="smallText">Item 5</span></li
li><span class="smallText">Item 6</span></li
/ul
hr/
p class="smallText">Concluding Paragraph</p><br /
/div
/div
div class="bottomNavBar"
p>© Copyright 2008</p
/div
/div
/body

*********************************
***Next is the external CSS.***

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
margin: 0px;
}

.header {
background-color: #FFFFFF;
width: 100%;
margin: 0px;
padding: 0px 0px 0px 0px;
top: 0px;
}

.container {
background-color: #FFFFFF;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
}

/* top navigation bar class
** I prefer to have a nav bar to the top rather than the left
*/
.topNavBar {
width: 800px;
height: 22px;
background-color: #0080EE;
border: 0px solid #FFFFFF; /* I turned off the pixel width because I
didn't
** want a border right now. But I left the rest in case
** I wanted to change it back to 1px.
*/
}

/* topNavBar link properties
** The idea is to have each link highlight when cursor comes over any part
** of the section, not just the words. Then goes back to normal when
cursor
** leaves. The current page should have its own link highlighted always.
*/
ul.topNavBarUL {
height: 17px;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}

li.topNavBarLI {
display: inline;
}

a.topNavBarLinks:link, a.topNavBarLinks:active, a.topNavBarLinks:visited {
float: left;
text-decoration: none;
color: #FFFFFF;
background-color: #0080EE;
padding: 0.15em 0.6em;
border-right: 1px solid #FFFFFF;
}

a.topNavBarLinks:hover {
color: #FFFFFF;
background-color: #FF9900;
text-decoration: none;
}

a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
a.topNavBarLinksCurrent:visited, a.topNavBarLinksCurrent:hover {
float: left;
text-decoration: none;
color: #FFFFFF;
background-color: #00FF33;
padding: 0.15em 0.6em;
border-right: 1px solid #FFFFFF;
}

/* content class
** This is the part of the page that the content will go in.
** It should have the full width of the container class and
** stretch in height based on the content with a minimum
** height of 500px.
*/
.content {
width: 800px;
min-height: 400px;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

/* content links
** The links in the content area will just be the regular links.
** Navigation links will all be given special classes to define them.
*/
a:link, a:active, a:visited {
color: #0080EE;
text-decoration: none;
}

a:hover {
color: #FF9900;
text-decoration: underline;
}

/* content headings, hr
*/
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
color: #00FF33;
margin-bottom: 2px;
}

hr {
color: #0080EE;
}

p {
text-indent: 20px;
margin-top: 4px;
}

ul {
margin-top: 4px;
}

li {
list-style: square;
color: #00FF33;
}

.contentIndexFlashIntro {
padding-top: 2px;
padding-right: 2px;
float: right;
}

.contentIndexWelcome {
float: left;
text-align: justify;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 4px;
}

#3

Quote:

To make your contentIndexFlashIntro & contentIndexWelcome divs sit
side-by-side you have to assign each a width. The combined total of those
widths must be <=800px.

--

Walt

Hi and thanks for the suggestion. I changed them both to total less than 800px
and the contentIndexWelcome div went to the correct width but still won't start
until the bottom of the contentFlashIntro div. Also, now it does the same thing
in IE 7.

#4

Can you upload the page all supporting files and post a link? If so, I'm
sure we can solve this.

--

Walt

"JasonTheAdobeFan" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

To make your contentIndexFlashIntro & contentIndexWelcome divs sit
side-by-side you have to assign each a width. The combined total of those
widths must be <=800px.

--

Walt

Hi and thanks for the suggestion. I changed them both to total less than
800px
and the contentIndexWelcome div went to the correct width but still won't
start
until the bottom of the contentFlashIntro div. Also, now it does the same
thing
in IE 7.

#5

Quote:

Can you upload the page all supporting files and post a link? If so, I'm
sure we can solve this.

Well since I am still just learning I don't have a domain or host yet. I
didn't want to pay for something I wasn't going to be using so I haven't set
anything like that up yet.

Quote:

as well as the widths mentioned by Walt -
I added a clear to this otherwise unused class

.bottomNavBar {clear:both;}

and it looks the same now in IE6 & 7 , FF & Safari
--

~Malcolm~*...
~*

That was a good idea. I made it so that the paragraphs don't ovelap the footer
and beyond. So, what exactly is the purpose of the clear attribute?

#6

Just as a random part, to anyone who wants to answer, would it be better to
just use tables inside the content area?

Before learning CSS I always used tables to layout my pages. It seemed a whole
heck of a lot easier to make things layout right. Is there any advantage in the
layout to using CSS and not using tables in content areas? Or is it just the
new thing?

Thanks.

#7

Quote:

To make your contentIndexFlashIntro & contentIndexWelcome divs sit
side-by-side you have to assign each a width. The combined total of those
widths must be <=800px.

--

Walt

By the way, I changed the widths small enough that they are where they are
supposed to be now. Thanks.

I just noticed a new problem though. In FF the topNavBar doesn't come down as
far as the links in the ul. It works fine in IE7 and Safari but the links seem
to overlap into the content area. They are lined up correctly, they just don't
extend the div they are in to fit inside it and not overflow.

The font-size is set to 16px and the height of the topNavBar is set to 22px.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

CSS Float Problems

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

CSS Float Problems - 07-11-2008 , 01:42 PM

Re: CSS Float Problems - 07-11-2008 , 02:03 PM

Re: CSS Float Problems - 07-11-2008 , 02:50 PM

Re: CSS Float Problems - 07-11-2008 , 03:11 PM

Re: CSS Float Problems - 07-12-2008 , 01:01 PM

Re: CSS Float Problems - 07-12-2008 , 01:06 PM

Re: CSS Float Problems - 07-12-2008 , 01:32 PM