homepage Welcome to WebmasterWorld Guest from 54.205.207.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
DIV / FLOAT Box Overlap FF2 IE6
vol7ron

5+ Year Member



 
Msg#: 3586316 posted 6:47 pm on Feb 27, 2008 (gmt 0)

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]

 

wtkad

5+ Year Member



 
Msg#: 3586316 posted 7:16 pm on Feb 27, 2008 (gmt 0)

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>

vol7ron

5+ Year Member



 
Msg#: 3586316 posted 7:53 pm on Feb 27, 2008 (gmt 0)

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?

SuzyUK

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



 
Msg#: 3586316 posted 9:12 pm on Feb 27, 2008 (gmt 0)

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]

vol7ron

5+ Year Member



 
Msg#: 3586316 posted 12:32 am on Feb 28, 2008 (gmt 0)

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.

SuzyUK

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



 
Msg#: 3586316 posted 8:19 am on Feb 28, 2008 (gmt 0)

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]

vol7ron

5+ Year Member



 
Msg#: 3586316 posted 7:14 pm on Feb 28, 2008 (gmt 0)

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.

SuzyUK

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



 
Msg#: 3586316 posted 7:27 pm on Feb 28, 2008 (gmt 0)

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.

vol7ron

5+ Year Member



 
Msg#: 3586316 posted 3:39 am on Feb 29, 2008 (gmt 0)

i like to bbq!

thank you both

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved