Welcome to WebmasterWorld Guest from 23.20.37.222

Forum Moderators: not2easy

Message Too Old, No Replies

divs not stacking properly

works in IE, not Mozilla

     
10:15 pm on Jun 27, 2008 (gmt 0)

10+ Year Member



I have been trying to make this work for the past two days with no joy. Can anyone tell me what the problem is? In IE, the right column div sits along side the left column with its content divs nested inside. In Firefox, et.al., the right div extends to the left edge of the browser window and the link3 appears below the other two. The IE presentation is the desired one.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>debug me please</title>

<style type="text/css">
body {
padding: 0 0 0 0;
border-width: 0px;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
margin-left: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
text-decoration: none;
border-left-width: 0px;
border-top-width: 0px;
}
table.one {
background-color: violet;
width: 100%;
table-layout: fixed;
}
td.one {
height: 50px;
}
div.container {
border-top: 0px;
border-left: 1px #006 solid;
border-right: 0px;
border-bottom: 0px;
width: 100%;
}
div.left-column {
float: left;
background-color: yellow;
width: 200px;
font-size: 11px;
text-align: left;
}
div.left-header {
padding: 0px;
margin: 0px;
background-color: navy;
color: white;
width: 100%;
height: 15px;
text-align: center;
line-height: 15px;
}
div.right-column {
background-color: red;
border-right: 20px lime solid;
border-left: 20px lime solid;
height: 200px;
}
div.linkheader {
width:33%;
height: 22px;
float:left;
}
div.greenbar {
height: 25px;
background-color:green;
width:100%;
}
div.bottomlink {
clear:both;
}
table.bottomlink {
padding: 0px;
margin: 0px;
background-color: white;
width: 100%;
border: 1px #006 solid;
font-size: 12px;
table-layout: fixed;
text-decoration: none;
clear: both;
}
td.bottomlink {
padding: 0px;
margin: 0px;
border: 1px solid #006;
height: 22px;
font-size: 11px;
color: #000000;
text-align: center;
}
div.copy {
background-color:aqua;
color: black;
font-size:x-small;
text-align: center;
vertical-align: middle;
clear: both;
}
</style>

</head>
<body>
<table class="one">
<tr>
<td class="one"></td>
</tr>
</table>
<div class="container">
<div class="left-column">
<div class="left-header">Some Content</div>
Some content here
<br />
<br />
blahblahblahblah<br />
blahblahblahblah<br />
etc.
<br />
<br />
End of Content</div>
<div class="right-column">
<div class="linkheader">Link1</div>
<div class="linkheader">Link2</div>
<div class="linkheader">Link3</div>

<div class="greenbar"></div>
</div></div>
<div class="bottomlink">
<table class="bottomlink">
<tr>
<td class="bottomlink">LinkA</td>
<td class="bottomlink">LinkB</td>
<td class="bottomlink">LinkC</td>
<td class="bottomlink">LinkD</td>
<td class="bottomlink">LinkE</td>
</tr>
</table></div>
<div class="copy">
Copyright Whoever Can Tell Me What I&#39;m Doing Wrong ;)</div>
</body>

</html>

Any hint is appreciated. Thanks.

7:39 am on Jun 28, 2008 (gmt 0)

5+ Year Member



Assuming looks right in IE means IE7

Add
margin-left:200px
to
div.right-column {}

Add
float:right;
to
div.greenbar {}

I'll pass on the copyright;)
And stop using tables :)

1:28 pm on Jun 30, 2008 (gmt 0)

10+ Year Member



Thanks appi2!

In hindsight, the margin-left should have been obvious, but after two days of messing with this, I couldn't see straight anymore. A fresh set of eyes looking at it was all it took.

The tables were basically a carryover from some of the alignment ideas I was trying. I would like to get away from them as much as possible.

Thanks again for your help.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month