Long text moves a DIV in FF

25 New Member

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.

Expand|Select|Wrap|Line Numbers

 
<!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>

Jun 8 '10 #1

Subscribe Reply

2295

drhowarddrfine

7,435

Recognized Expert Expert

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.

Jun 8 '10 #2

svendok

New Member

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! :)

Jun 8 '10 #3

JKing

1,206

Recognized Expert Top Contributor

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.

Jun 9 '10 #4

svendok

New Member

@JKing
Thanks, JK. I'll try that. The width should include the padding-left & padding-right, right?

Like your avatar. What's it from?

Thanks.

Jun 9 '10 #5

JKing

1,206

Recognized Expert Top Contributor

@svendok
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. :)

Jun 9 '10 #6

svendok

New Member

@JKing
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.

Expand|Select|Wrap|Line Numbers

 
<!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>

Jun 9 '10 #7

svendok

New Member

@JKing
Okay, just making sure this wasn't some monster I should recognize. Never have time to play the games anymore. [Sigh]

Jun 9 '10 #8

drhowarddrfine

7,435

Recognized Expert Expert

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.

Jun 9 '10 #9

svendok

New Member

@drhowarddrfine
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.

Jun 10 '10 #10

Similar topics

7172

ASP, SQL, long text data problems...

by: Adam | last post by:

I have an ASP page that will take form info that a user has entered, then save it into SQL server, and retrive and display the info on another page. My problem is with long text data (10,000 bytes...

Microsoft SQL Server

2145

viewing contents of field type "long text"

by: Paul Thakur | last post by:

I am writing vbscript code in an .asp page. I need to display field values from a sql table consisting of several fields, one of them is of type "Long Text". This field contains XML data. I like to...

ASP / Active Server Pages

6476

HOWTO import *long* text fields from a csv file ?

by: Radu | last post by:

Hi. I got a "|" delimited file, and one of its columns (the last one) is MANY chars long. If I use my try to manually import the file, the text in the last column is cut off at char 255, as it...

Microsoft Access / VBA

1410

Reading "Long Text" from SQL Server

by: RON | last post by:

I have to read a long text field (it's a PDF) from SQL Server in a VB.NET (2003) app. Here's the code I have: Sub GetPDF(byval Path as string) 'objConnection created elsewhere; not the problem...

.NET Framework

1119

Writing out "Long Text" from SQL Server to a file

by: RON | last post by:

have to read a long text field (it's a PDF stored in a column) from SQL Server in a VB.NET (2003) app. Here's the code I have: Sub GetPDF(byval Path as string) 'objConnection created elsewhere;...

Visual Basic .NET

5652

How to store big amount of data in long text field

by: sadf | last post by:

I need to use MySql to store really large amounts of data . but when i try to store ,text file in long text field with LOAD_FILE command, the error i got was like : "Data too long for...

MySQL Database

3727

how to wrap a long text through css.

by: Victor | last post by:

Hi all i have a css question about how to wrap a long text by using css. for example I have a very long text like "ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd" there...

ASP.NET

2938

How to cut long text in MySQL?

by: namhay | last post by:

I have a long text store in MySQL about 10 lines for detail page. But in my home page i want to show Short text only 2 lines by using PHP query and let them click for detail. How can i cut this long...

PHP

5073

Text moves with a Horizontal UL Menu Link

by: stevedude | last post by:

A CSS newbie here: I've been learning CSS as I go along developing a web page. I am trying to make a horizontal menu link for a footer. On 'hover', I want the linked text to have a 'bold' font for...

HTML / CSS

5576

Floating div drops with long text in Firefox (CSS Issue)

by: rblaettler | last post by:

I have two div's with a float:left attribute that I've put into a list. They should align horizontally, which they do as long as the text in them does not need to be wrapped. As soon as the area for...

HTML / CSS

7115

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7190

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

6858

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

4881

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4578

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3086

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

1392

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

633

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

280

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General