All geek questions in one place

What is a cross-browser compatible way to align child divs and align parent divs to get its width from children?

I have a bunch of child <div>variable widths that I want to right-justify inside the parent. I also want the parent <div>not to be wider than it should have children. (I don’t know in advance how wide the children will be - they will contain dynamically created content.)

Here is an example that works correctly in IE 8.0, but not in Firefox 3.5 (child <div>does not align to the right):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      #parentDiv{float:left; text-align:right; background-color: gray;}
      .childDiv{clear:both; border: 1px solid black; background-color: white;}
    </style>
  </head>
  <body>
    <div id="parentDiv"> 
      <div class="childDiv" style="width: 25px">&nbsp;</div>
      <div class="childDiv" style="width: 50px">&nbsp;</div>
      <div class="childDiv" style="width: 100px">&nbsp;</div>
    </div>
  </body>
</html>

If I add float:rightCSS to childDiv, it works in Firefox 3.5, but not in IE 8.0 (the width of the parentDiv is no longer determined by the width of its children).

?

UPDATE: , float: divs IE, IIS. ( , .) , IIS? IIS 6.0

# 2: , , IIS 6 IE7. , ( float:right, divs) IE8 Firefox, , , IE7.

, : IE7? ( CSS IE7, .)

+3
4

21 2010 @21:00 MST: div . divs, IE7. Firebug, , . Firefox 3.5, IE7, IE8, Chrome Safari 4.

CSS HTML ( / , ):

   <style type="text/css">
      #parent {
         margin:0;
         background:#ccc;
         float:right;
         padding:20px;
      }
      #parent div {
         background:#eee;
         margin:0 0 20px;
         text-align:right;
      }
   </style>

    ...

   <div id="parent">
      <div>Nulla facilisi. Suspendisse potenti. Sed sed euismod tortor.</div>
      <div>Lorem ipsum, pharetra nec justo. In dapibus neque a libero cursus a laoreet nunc luctus.</div>
      <div>Lorem ipsum dolor sit amdolor.</div>
   </div>

, , , IE7 (. , ). , , IE8 , IE7 ( ).

IE7 , , , , ( , ).

+2

divs , :% 100 clear: both? , IE , , , ( .) : inline on the clear as .

0

position: relative; float: right;

0

You need position: relative;for the parent, and most importantly, you need to clear these floats .

0
source

Source: https://habr.com/ru/post/1729137/

More articles:


All Articles