Forum Moderators: not2easy
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>
¦
<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]
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>
I'll use it for now, but does anyone know of any way to do this without having that third child div?
>>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;reasoning:
hth
-Suzy
[edited by: SuzyUK at 9:14 pm (utc) on Feb. 27, 2008]
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%; ">123456789¦123456789¦123456789</div>
<div style="border:1px solid blue; position:absolute; bottom:0; right:0; height:75%; ">123456789¦123456789¦123456789</div>
<div style="border:1px solid green; position:absolute; bottom:0; left:33%; height:75%; ">123456789¦123456789¦123456789</div>
</div>
I guess it's time to use a table again.
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]
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.
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.
thank you both
