homepage Welcome to WebmasterWorld Guest from 54.205.188.59
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
divs not stacking properly
works in IE, not Mozilla
jdkuehne




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

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.

 

appi2




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

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 :)

jdkuehne




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

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.

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