How to set div width when there is no content inside it

In firefox and ie8 the middle div is ignoring the width when there is not content.
Please help me fix it to work the same way for ie7 also

I cannot remove the width for the main 3 div's

Expand|Select|Wrap|Line Numbers

 **************************************************************************

<head>

    <title>Untitled Page</title>

<link href="ie7.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="divfloatLeft" id="maincontentrow1">

     <div class="healthrisk">

          &nbsp;healthrisk

     </div>

     <div class="healthylifestyles">
 
     </div>

     <div class="regioncontent">

     regioncontent goes here

             </div>

         </div>
 
</body>

</html>
 
**************************************************************************

here is the CSS for the above htm

Expand|Select|Wrap|Line Numbers

 .healthrisk

{

    width:27%;

    padding-right:20px;

    float:left;

}

.healthylifestyles

{

    width:40%;

    padding-right:20px;

    float:left;

    position:inherit;

}

.regioncontent

{

    width:27%;

    float:left;

}

.divfloatLeft

{

    float:left;

    display:inline;

}

#maincontentrow1

{

    width:100%;

}

I can put div inside the main div's like below:

Expand|Select|Wrap|Line Numbers

 <div class="healthylifestyles">

    <div style="margin-top:0px;"></div>

     </div>

Attached Images

ie7.jpg (3.0 KB, 188 views)

May 20 '10 #1

Subscribe Post Reply

3074

drhowarddrfine

7,435

Expert 4TB

When you are setting the percentage, ask percentage of what? It's always the parent. So what is the parent set to?

May 20 '10 #2

padmas

#maincontentrow1
{
width:100%;
}

parent is set to 100%

May 20 '10 #3

drhowarddrfine

7,435

Expert 4TB

And that is 100% of what?

May 21 '10 #4

padmas

you asked what is parent set to ........ the parent Div is set to 100% width...

Its 100% of the browser

May 21 '10 #5

drhowarddrfine

7,435

Expert 4TB

100% of the browser? Where do you set the "browser" width?

May 21 '10 #6

Similar topics

centering float left

by: Jeff Thies | last post by:

I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...

HTML / CSS

Weird IE bug? float:left in <td> together with (any) inline styles?

by: Herman Kuiper | last post by:

Hi, The HTML at the end of this message will render erroneously on IE (at least 5.0) and prperly on Mozilla (as I've been told). That does not surprise me, but I *would* like to find some...

HTML / CSS

float: left with height: 100%

by: patrick h. | last post by:

Greetings, I am encountering some issues regarding using float while desiring to set the height to 100%. This is likely due to my own misunderstanding of the way things actually function -- any...

HTML / CSS

align batch of spans with float:left to a new block

by: TJ | last post by:

I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when...

HTML / CSS

HELP: Float Left box is drifting to the right in ie!

by: jonipony | last post by:

HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600...

HTML / CSS

strange IE float: left problem

by: vytas | last post by:

hi, I've just ran into very strange IE behaviour. I have a table with some content: <table width="200" border="1"> <tr> <td width="50%"> <div class="bord" style="float:...

HTML / CSS

float left and right on same line

by: erikirl | last post by:

http://www.hardwareforfree.com/ I'm trying to get the Consumer Gift Network image to be in the top right corner of the 800px area in the header. I have searched for hours and tried a lot of...

HTML / CSS

css float left and linebreak

by: Gozil | last post by:

Hey, Is it possible to change line on a float object? For example let say I have one <b> tag, one <p> tag and one <img> tag: I want the <img> to have float right and the <b> to have float left...

HTML / CSS

Float Left with auto width, jumps to next line if short

by: dlite922 | last post by:

I'm back again, Intro: I've got a floating div (outerDIV) with fixed width that contains an image (IMG) and a div that contains a short text (innerDIV) Problem: In FF, the innerDIV is...

HTML / CSS

Problem with OPERA CSS Float:left;

by: limelites | last post by:

In IE7, FF, Chrome and Safari, everything looks great but in Opera the display of the additional images in my product page looks awful. This is a site that does attract foreign visitors who do use...

HTML / CSS

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General