Welcome to WebmasterWorld Guest from 54.161.110.186

Forum Moderators: not2easy

Message Too Old, No Replies

DIV / FLOAT Box Overlap FF2 IE6

     
6:47 pm on Feb 27, 2008 (gmt 0)

5+ Year Member



This is my first post here, please forgive my formatting. My code is formatted (tabbed) but the [code] style doesn't work on this forum like other forums, so it looks messy below.

If you copy the following HTML into a document and open it up in Firefox 2.0 (Mozilla 5.0) and Internet Explorer 6.0, you'll see my problem.

I would like the left box to look like it does in IE6 and the right box to look like FF2. That is, the text is inside the border, and border is inside the containing div's (footer's) border.

I hope that makes sense. I imagine this is an issue with inline/float. I've tried adjusting the padding and margins.
___________________________________________________

<!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" xml:lang="en" lang="en">
<head>
<title>Test Page</title>

<style type="text/css">
body {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
width: 800px;
}
div#body {
width: 800px;
}

div#content {
border: 1px dashed green;
width: 100%;
}
div#header {
border: 1px dashed orange;
height: 175px;
text-align: center;
width: 800px;
}

div#footer {
border: 1px dashed black;
text-align: right;
width: 100%;
}
div#footer .left {
float: left;
}
div#footer div {
display: inline;
border: 1px solid red;
}
</style>

<script type="text/javascript">
</script>
</head>

<body>
<div id="body">
<div id="header">header</div>

<div id="content">content</div>

<div id="footer">
<div class="left">
<a class="footer" href="">Link 1</a>
&nbsp;&nbsp;
<a class="footer" href="">Link 2</a>
</div>
<div class="right">
Right Text
</div>
</div>
</div>
</body>
</html>

[edited by: vol7ron at 7:22 pm (utc) on Feb. 27, 2008]

7:16 pm on Feb 27, 2008 (gmt 0)

5+ Year Member



It may not be the most efficient, but if you set .right to float:right instead of display:inline and add a clearing div I think it will work like you want.

div#footer .left {
float: left;
}
div#footer .right {
float: right;
}
div#footer div {
border: 1px solid red;
}

<div id="footer">
<div class="left">[links]</div>
<div class="right">[text]</div>
<div style="clear:both;border:none;"></div>
</div>

7:53 pm on Feb 27, 2008 (gmt 0)

5+ Year Member



That is exactly what it needs to look like. The borders are just there for placement in the event I do background images, rollovers, etc in the future.

I'll use it for now, but does anyone know of any way to do this without having that third child div?

9:12 pm on Feb 27, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to WebmasterWorld vol7ron!

>>formatting
not the best system here but if you wrap it the [quote] tags it helps a bit though still won't indent/beautify it, but don't worry we're used to that ;)

I'll use it for now, but does anyone know of any way to do this without having that third child div?

yes, you can clear floats a little bit easier these days if you don't want the "clearer" div/element

either float, left or right, the footer div too (it should work for you as it's already got a 100% width)

OR

set

overflow: hidden;
on the footer

reasoning:

  • a floated parent will contain it's floated children
  • the overflow property is the "new fangled" recommended way to get parent divs to contain floated children.

hth
-Suzy

[edited by: SuzyUK at 9:14 pm (utc) on Feb. 27, 2008]

12:32 am on Feb 28, 2008 (gmt 0)

5+ Year Member



Thanks suzy, I was hoping that there was a simple explanation. I've found that in IE overflow is not easy to deal with. For right now wtkad's solution is working nicely.

I'm curious if there's a way to enter a third div, centered. For right now, these two will push it against the right or left one. I don't believe float:none will work.


<div id="footer">
<div class="left">[links]</div>
<div class="left">[centered text]</div>
<div class="right">[text]</div>
<div style="clear:both;border:none;"></div>
</div>


<div id="footer">
<div class="left">[links]</div>
<div class="right">[text]</div>
<div class="right">[centered text]</div>
<div style="clear:both;border:none;"></div>
</div>

___________________________________________________________

The closest I could come without using a script to dynamically size was:


<div style="border:1px dashed black; position:relative; width:100%; height:25px;">
<div style="border:1px solid red; position:absolute; bottom:0; left: 0; height:75%; ">123456789123456789123456789</div>
<div style="border:1px solid blue; position:absolute; bottom:0; right:0; height:75%; ">123456789123456789123456789</div>
<div style="border:1px solid green; position:absolute; bottom:0; left:33%; height:75%; ">123456789123456789123456789</div>
</div>

I guess it's time to use a table again.

8:19 am on Feb 28, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



vol7ron, there's no problem in using a clearing div, lots still do, but you shouldn't need a script to insert a middle div, simply don't float it and let it go back into the flow naturally.

The overflow rule shouldn't cause any problems with IE but my bad I should've said to use either - overflow:visible or overflow: hidden

anyway if you were to add a 'middle' div there would possibly be no need to use either method. The 'middle' div would do the work of the clearing div.. because you would not float it, just leaving it be and centering the text would mean it appears between the floats naturally.

now the only thing is when it would come to text decoration, borders etc.. you just have to know that any non-floated content beside floats actually sits underneath the floats, the actual text will move to clear, but the borders would be underneath - that's how floats work, it's as if they are not there, and why the footer div doesn't know to stretch to clear them if they're all floated - so if the visual decoration is important you could also add margins to middle div to visually clear it at the sides too

try this:

div#footer {
border: 1px dashed black;
text-align: right;
width: 100%;
overflow: hidden; /* remove the middle div and this should still work */
}
div#footer div {border: 1px solid red;}
#footer .left {float: left;}
#footer .right {float: right;}
#footer .mid {
text-align: center; /* center the text, but not the box */
width: 50%; /* width provides visual clearance - remove this and text will stay centered but borders/background are full width */
margin: 0 auto; /* this centers the whole box */
background: #ffc;
}

HTML:
<div id="footer">
<div class="left">[links]</div>
<div class="right">[text]</div>
<div class="mid">[centered text]</div><!-- remove this and overflow should still work -->
</div>

-Suzy

[edited by: SuzyUK at 8:21 am (utc) on Feb. 28, 2008]

7:14 pm on Feb 28, 2008 (gmt 0)

5+ Year Member



Thank you suzy,

While I traditionally use Tables for data representation, I think it's cases like these where a Table also still applies.

IE8 looks promising, since it's passed the Acid 2 test. I think in 2-3 years the web will become more and more standardized. When that's the case I think some of the block-table properties of DIVs will become much more widely used.

Until then as long as I'm not using a table to position images or other content on the screen, I'll use it for tricky cases like these.

7:27 pm on Feb 28, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You're welcome!

but I can't take the credit wtkad did the work by pointing you in the direction of floats in the first place..

and ermm you could have just lit a fire

IE8 looks promising, since it's passed the Acid 2 test.
3:39 am on Feb 29, 2008 (gmt 0)

5+ Year Member



i like to bbq!

thank you both

 

Featured Threads

Hot Threads This Week

Hot Threads This Month