I'd like to position two HTML Div tags horizontally (side by side) with one single CSS class that is compatible with Fire fox and IE.

I am aware of the common ways to positioning Div tags horizontally like:
  Assigning "Float: left" and "Float: right" to the respective div containers, but this method requires two separate CSS classes or attributes.

I want to display Div tags horizontally from a single class - I'm using a custom control that generates tables wrapped in Divs from a asp:Formviews, I really don't want to change the custom control.

An Example:

.FormViewCSS
{
  /*Some CSS Here*/
}

<div class=”FormViewCSS”>

</div>

<div class=”FormViewCSS”>

</div>

Any suggestions?

- Adam Kahtava [http://adam.kahtava.com]

__________________
- Adam Kahtava [http://adam.kahtava.com]

It's not possible, every method requires at least two rules, sometimes more. One rule would logically tell us the divs are identical anyway, and they clearly aren't. You want one on the right and one on the left, that one difference destroys what you want to do.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

That's not the answer I was hoping for. :)

Thanks Rich.

- Adam Kahtava [http://adam.kahtava.com]

Well, you might experiment anyway.

Theoretically, you can float both left or both right. Then set the width to 50%. Problem with that approach, if you don't run into other problems, is IE. It's pretty buggy with percentage measurements (one of the divs will more than likely drop down to the next line, IE just doesn't make 50% + 50% = 100%. Also, since percentage measurement is based on the containing block, if you have padding, borders, or margins you'll go over 50% and get scroll bars. If you want a background or borders or anything like that, you'll have to set the margin of one of the two to margin-left: 50%;

The best approach, IMO, is positioning the content absolutely, which gets around the percentage bug in IE, but that requires at least two rules. One with left: 0;, and the other with left: 50%;

I don't have any experience with ASP, so I'm at a loss to suggest anything else. Imar or one of the other resident ASP gurus might have a suggestion.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

Rich,

Thanks, I am aware of the 50/50, left/right percentage problem with IE and the work around using 48% in place of 50%.

If I use a container box with the style attributes set to "display: inline" will the divs within the container display side by side?


- Adam Kahtava [http://adam.kahtava.com]

The solution:

FormViewCSS
{
  display: inline;
}

<div class=”FormViewCSS”>

</div>

<div class=”FormViewCSS”>

</div>

Both div tags will be displayed side by side or horizontally.

- Adam Kahtava [http://adam.kahtava.com]

> Thanks, I am aware of the 50/50, left/right percentage problem with IE and the work around using 48% in place of 50%.

I think you can also use 49.99%.

> If I use a container box with the style attributes set to "display: inline" will the divs within the container display side by side?

It might work, depends on what the children elements are. Once display is set to inline you can no longer set a width. In IE quirks mode width still applies to inline elements, but every other browser and IE in standards mode ignore width and height on inline elements.

You could use display: inline-block; (width and height still apply there) but that only works in IE, and maybe Opera, and possibly Safari. Doesn't work in Firefox, that I know for sure. Depends on what browsers you're targeting, I guess.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

Thanks Rich,

Greatly appreciated.

- Adam Kahtava [http://adam.kahtava.com]