Solved

Float and clear problem in IE, div is jumping up to the top

Posted on 2007-11-15
7
471 Views
Last Modified: 2013-12-08
I have a problem with divs floating to the top in IE (tried in IE 6 and IE 7 with the same result).  

This is how it should look:  On the right side of the page we first have one div (brown in the example), under this another (green).  Under the green we should have two divs that together are just as wide as the green one: One red at the right, and left to the red; one in blue.  The red and the blue are not of the same length.  Around all this there should be text wrapping around it.  Here is a picture of how it should look:
http://iris.idg.no/ulf/div/skisse.jpg

Firefox and Opera renders this just fine with the blue and the red next to each other lying under the green.  But in IE, the blue jumps to the top next to the brown.

I have been able to get the red and the blue boxes next to each other in IE (with various versions of clear both in a div above them), but then the text wrapping around all the divs fails, and the text body starts at the same height as the red and blue.

Any idea how this design could be made working in IE?
<style>
 

.ad 

{

    background-color:#996600;

    float: right;

    width: 300px;

    height: 200px;

}
 

.article_image

{

    float: right;

    margin: 0 0 0px 10px;

    clear: right;

    background-color:#339966;

    width: 200px;

    height: 150px;

}
 

#redBox

{

  width:100px; 

  height:300px;

  float: right;

  clear:right;

}
 

#blueBox

{

  width:100px; 

  height:150px;

  float:right;
 

}
 

.text

{

    float: left;

    margin: 0 0 10px 10px;

    clear: left;

}
 

#tittel

{

    margin: 0 0 10px 0px;

}
 

#ingress

{

    margin: 0 0 10px 0px;

}
 
 

</style>
 

</head>
 

<body>
 
 

<div id="Text" class="text">

    <div id="tittel">

    <b>This is a long and fine title.   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </b> 

    </div>
 

  <div id="ingress">

    This is a lead text.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 	vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  </div>

    

    <div class="ad">

        Advertisement

    </div>

    

    <div class="article_image">

        Article image

    </div>

        <div id="redBox" style="background-color:#CC0000">

	    Red box

	    Lorem Ipsum

        </div>

        

        <div id="blueBox" style="background-color:#0066FF">

	    Blue box

	    Lorem Ipsum

        </div> 
 

    
 
 

    <div id="body">

    This is the article body. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

  </div>

    
 

</div>

Open in new window

0
Comment
Question by:ulf_hh
  • 4
7 Comments
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20287950
Do this:


      <div style="float:right; width:200px; height:300px; clear:right">      
            <div id="redBox" style="background-color:#CC0000">
                        Red box
                        Lorem Ipsum
            </div>  
            
            <div id="blueBox" style="background-color:#0066FF">
                        Blue box
                        Lorem Ipsum
            </div>
 </div>
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20287955
So I just nested the two divs in a div that does exactly what the other divs do ... float:right and clear:right
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20287966
The only problem is .. the text will not wrap under the blue div as the height of its' parent is that of the red div. Not sure if that is a major issue but I can't think of any other way you could do it?
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:ulf_hh
ID: 20287992
I've already thought about this, but I'm afraid this will be a major issue (as this will not fit with objects under these boxes that are not shown in this example).  The text must flow around and leave no "blank boxes" like this.
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20288108
Then I am stumped!
0
 
LVL 12

Accepted Solution

by:
oceanbeach earned 500 total points
ID: 20302746
Hello ulf_hh,

This question caught my attention & I could not stop thinking about the behavior of IE6.   I tried a few things &  this seems to work in IE6, FF, Opera & Safari.  Although, this will only work if both the height of the blue div is known & the width of the red div is known.

In the HTML, switch the places of the red & blue divs, so that the blue div appears first.  Also, add a few styles your the css...

I hope this helps!

oceanbeach
HTML:

  <div id="blueBox" style="background-color:#0066FF"> Blue box Lorem Ipsum </div>

  <div id="redBox" style="background-color:#CC0000"> Red box Lorem Ipsum </div>
 

CSS:

#redBox

{

  width:100px; 

  height:300px;

  float: right;

  clear:right;

  margin-top: -150px;

}

#blueBox

{

  width:100px; 

  height:150px;

  float:right;

  clear:right;

  margin-right: 100px;

  display: inline;

}

Open in new window

0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
IPhone using PC internet 17 46
Responsive CSS question 2 42
Re-position the objects 7 52
push text up below h2 tag 1 8
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now