Long text moves a DIV in FF

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • svendok
    New Member
    • Jun 2010
    • 25
    #1

    Long text moves a DIV in FF

    Hi,
    I'm trying to set up a table-less layout using CSS. I have a simple two-column layout that works great in IE, but has a bug in FF.

    In the code below, when the contents of the content_area DIV are a few words, the two columns are fine in both IE and FF. However, if the 2nd column contains enough text to run onto the next line, then the column acts like a row in FF. It moves below the 1st column.

    I'm sure it's a simple thing. Any idea what needs to be done?

    Thanks.

    Code:
    <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>2 col</title>
<style type="text/css">
<!--

body{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}

.page_container{margin-left:0;margin-right:auto;width:800px; padding-left:0; margin-top:0; padding-top:0; background-color:#FFFFFF; overflow:auto}
.nav_area{display:inline;float:left;margin-left:10px;margin-right:10px;  max-width:110px; min-width:110px; border:dotted}
.content_area{display:inline;float:left;margin-left:10px;margin-right:10px; background-color:#99FFFF; min-width:300px; white-space:nowrap}


body {
	background: #123;
	color: #333;
}

-->
</style>
</head>
<body>
<div class="page_container">	
	<div class="nav_area">
	blah blah
    </div>
	<!-- end .nav_area -->
	<div class="content_area">
		<p>sss ssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss sssss</p>

		
	</div>
	<!-- end .content_area -->
	<div class="clear"></div>
	
</div>
<!-- end .page_container -->
</body>
</html>
    Tags: css, layout
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      In your CSS you are saying 'white-space:nowrap' and FF appropriately does what you told it to do. Never, ever trust IE to do anything right.

        Comment

        • svendok
          New Member
          • Jun 2010
          • 25
          #3
          Thanks. Actually, I added that at the last minute as an experiment and meant to delete it before posting my message. The 2nd div jumps down in FF whether it's there or not.

          I'm sure this is IE's fault, but I don't know what property I should be looking at to control this behavior. I imagine there's no "jump-on-wordwrap:" setting! :)

            Comment

            • JKing
              Recognized Expert Top Contributor
              • Jun 2007
              • 1206
              #4
              I suggest using fixed widths on your divs to control the layout. Especially the nav div where you have declared min and max width to be 110px.

              If you still would like to maintain the min-width property of your content div then you can wrap it in another div that has a fixed width.

                Comment

                • svendok
                  New Member
                  • Jun 2010
                  • 25
                  #5
                  Originally posted by JKing
                  I suggest using fixed widths on your divs to control the layout. Especially the nav div where you have declared min and max width to be 110px.

                  If you still would like to maintain the min-width property of your content div then you can wrap it in another div that has a fixed width.
                  Thanks, JK. I'll try that. The width should include the padding-left & padding-right, right?

                  Like your avatar. What's it from?

                  Thanks.

                    Comment

                    • JKing
                      Recognized Expert Top Contributor
                      • Jun 2007
                      • 1206
                      #6
                      Originally posted by svendok
                      Thanks, JK. I'll try that. The width should include the padding-left & padding-right, right?

                      Like your avatar. What's it from?

                      Thanks.
                      The width should not include padding.
                      Here is a good reference for the box model Box Model

                      The avatar was just a random gif I found years ago. :)

                        Comment

                        • svendok
                          New Member
                          • Jun 2010
                          • 25
                          #7
                          Originally posted by JKing
                          I suggest using fixed widths on your divs to control the layout. Especially the nav div where you have declared min and max width to be 110px.

                          If you still would like to maintain the min-width property of your content div then you can wrap it in another div that has a fixed width.
                          Looks like I fixed it. Doesn't seem like it was the width settings that did the trick but simply experimenting with the position: property.


                          Code:
                          <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>2 col</title>
<style type="text/css">
<!--

body{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background: #123;color: #333;padding-top:0px;}

.page_container{margin-left:0;margin-right:auto;width:800px; padding-left:0; margin-top:0; padding-top:0; background-color:#ffffff; overflow:auto;  min-height:500px; padding-top:0px;}
.logo_area{margin-left:0;margin-right:auto;width:800px; padding-left:0; margin-top:0; padding-top:0; background-color:#ffffff; overflow:auto;  padding-top:0px;}
.nav_area{display:inline;float:left;margin-left:10px;margin-right:10px;  max-width:110px; min-width:110px; width:130px; border:none; border-bottom-style:double; border-color:#0066FF; overflow:auto; position:relative}
.content_area{display:inline;float:left;;margin-right:10px; width:650px; background-color:#FFFFFF; white-space:normal; border:groove; border-color:#0066FF; position: absolute; padding-top:0px; }



-->
</style>
</head>
<body>
<div class="page_container">	
<h1 align="center"><img src="http://bytes.com/topic/images/banner.gif" width="581" height="130"> </h1>

	<div class="nav_area">
	<!--#include file="../menu.js"-->
	&nbsp;
    </div>
	<!-- end .nav_area -->
	<div class="content_area
		<p>sss ssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss ssssss sssss</p>

		
	</div>
	<!-- end .content_area -->
	<div class="clear"></div>
	
</div>
<!-- end .page_container -->
</body>
</html>

                            Comment

                            • svendok
                              New Member
                              • Jun 2010
                              • 25
                              #8
                              Originally posted by JKing
                              The width should not include padding.
                              Here is a good reference for the box model Box Model

                              The avatar was just a random gif I found years ago. :)
                              Okay, just making sure this wasn't some monster I should recognize. Never have time to play the games anymore. [Sigh]

                                Comment

                                • drhowarddrfine
                                  Recognized Expert Expert
                                  • Sep 2006
                                  • 7434
                                  #9
                                  Be careful of using old, deprecated markup. "align" was deprecated 10 years ago in HTML 4.01 and does not exist in HTML5. It works because browsers must maintain backwards compatibility but you never know when it will go away.

                                  Don't use clearing divs or I will have to start mentally abusing you. They should not be needed just as "spacer gifs" were not needed once CSS came around.

                                    Comment

                                    • svendok
                                      New Member
                                      • Jun 2010
                                      • 25
                                      #10
                                      Originally posted by drhowarddrfine
                                      Be careful of using old, deprecated markup. "align" was deprecated 10 years ago in HTML 4.01 and does not exist in HTML5. It works because browsers must maintain backwards compatibility but you never know when it will go away.

                                      Don't use clearing divs or I will have to start mentally abusing you. They should not be needed just as "spacer gifs" were not needed once CSS came around.
                                      Thanks for the reminder, Dr. H.

                                      I do realize "<h1 align=center>" is bad form--that was inserted by Dreamweaver--but being new to CSS I don't know why the clearing DIV's are bad (or even why they're there in the first place to be honest). I got the basic code from a CSS generator site.

                                      Guess I need to educate myself on this.


                                      Thanks.

                                        Comment

                                        Previous template Next
                                        Working...