Floated div with floated divs inside doesn't adjust width on IE 7

Discussion in 'CSS' started by gastongr, Sep 3, 2011.

0
  1. #1
    I have a right floated div that contains the background of a menu, menu items are divs also floated right.
    The container div hasn't the width set, this is because the menu items will vary from page to page.

    Problem is that IE 7 makes the container div 100% wide, while other browser adjust the width to the content (menu items)
    In other words, putting two floated divs one inside the other makes the outher one 100% wide

    Sample: gastongreco.com.ar/test.html
    
<html>
<head>
<title>Floats Test</title>
<style type="text/css">
.usermenu{
background: url('http://ppeppd.offter.com/images/menubg.gif') no-repeat left top;
height: 27px;
float:right;
padding-left:8px;
}
.menuitem{
font-size: 9pt;
float:right;
padding: 0.3em 0.6em 0.3em 0.6em;
}
</style>
</head>
<body>

<div class="usermenu"> 
	<div class="menuitem"><a href="author/contact.php">Contact</a></div> 
	<div class="menuitem"><a href="author/contact.php">Home</a></div> 
</div> 
	
</body>
</html>
    HTML:
    Help is appreciated :)
     
    gastongr, Sep 3, 2011 IP
  2. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #2
    The width of the container div is adjusted if everything is floated to the left instead of right..
    Love IE7...
     
    gastongr, Sep 3, 2011 IP
  3. neoberg

    neoberg Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,
    If i understood the problem correctly; Create a class like:
    And create a blank div after floated objects. Like:
     
    neoberg, Sep 8, 2011 IP