Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

left and right but no width 1

Status
Not open for further replies.
derwent

derwent

Programmer
May 5, 2004
428
GB
This works fine in firefox but IE is having a paddy. The right margin is way off and when the browser is resized it doesn`t stick to it's right margin width.

Can someone see an error? The code below generates 3 columns, navigation is on the left, content in the middle (the one with the problem) and sectionimage on the right.

Code: 
#navigation {position: relative; width: 127px; height: 430px; left: 0px; top:4px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699;}
#sectionimage {position: absolute; right:0px; width: 160px; height: 430px; top:96px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699; text-align: center}
#content {position: absolute; left:132px; right: 160px; height: 430px; top:96px; background-color: #003366; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; overflow: auto; padding: 15px}
 
Sort by date Sort by votes
Try margin-left and margin-right instead of left and right declarations in #content.
 
Upvote 0 Downvote
That didn`t work, it is pretty much being ignored in IE.
 
Upvote 0 Downvote
With scarce info you provided (not even an html code to see how all this is structured) it is almost impossible to help you further. I am wondering why is your #content absolutely positioned rather than your other columns but still without knowing how you put all this to use, I cannot help you further.
 
Upvote 0 Downvote
here is pretty much as close as I can get, but it doesn`t work quite right in IE, firefox works a treat.

many thanks for your help

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>
<title>Three columns full height</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>

<style type="text/css">
<!--
html {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:#003366; font-size:80%; font-family: verdana, sans-serif; color: #ffffff;}

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

#header {top:10px; display:block; right: 18px; width: 100%; left: 1px; height:62px; z-index:2; background: #ffffff}

#search {position: relative; top: 2px; height: 28px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699; color: #ffffff; text-align: right;}

#contentleft {position: relative; width: 127px; height: 430px; left: 0px; top:4px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699;}
#contentright {position: absolute; right:0px; width: 160px; height: 430px; top:96px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699;}
#contentcenter {position: absolute; left:132px; right: 165px; height: 430px; top:96px; background-color: #003366; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; overflow: auto}

#footer {position: absolute; display: block; width:100%; height:41px; top: 530px; background-color: #cccccc; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; color: #336696; line-height: 10px}
-->
</style>
</head>

<body>
<div id='header'></div>
<div id='search'></div>

<div id='contentleft'></div>
<div id='contentcenter'>
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
</div>
<div id='contentright'></div>

<div id='footer'></div>

</body>
</html>
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>
<title>Three columns full height</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>

<style type="text/css">
<!--
html { height: 100%; max-height: 100%; overflow: hidden; padding: 0; margin: 0; border: 0; background: #003366; font-size: 80%; 

font-family: verdana, sans-serif; color: #ffffff;}

body { height: 100%; max-height: 100%; overflow: hidden; padding: 0; margin: 0; border: 0; }

#header { top:10px; margin-right: 18px; margin-left: 1px; height: 62px; z-index: 2; background: #ffffff; }

#search { position: relative; top: 2px; height: 28px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: 

#336699; color: #ffffff; text-align: right; }

#contentleft { position: absolute; width: 127px; height: 430px; left: 0px; top: 96px; border-top: 2px solid #6699CC; border-left: 2px 

solid #6699CC; background-color: #336699; }
#contentright { position: absolute; right: 0px; width: 160px; height: 430px; top: 96px; border-top: 2px solid #6699CC; border-left: 2px 

solid #6699CC; background-color: #336699; }
#contentcenter {position: relative; margin-left: 132px; margin-right: 165px; height: 430px; top: 4px; background-color: #003366; 

border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; overflow: auto; }

#footer { position: absolute; height:41px; top: 530px; background-color: #cccccc; border-left: 1px solid #ffffff; border-top: 1px solid 

#ffffff; color: #336696; line-height: 10px; }
-->
</style>
</head>

<body>
<div id='header'></div>
<div id='search'></div>

<div id='contentleft'></div>
<div id='contentcenter'>
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
</div>
<div id='contentright'></div>

<div id='footer'></div>

</body>
</html>
This is how I would switch up your code. I hope it makes sense. Works for me in IE, unfortunately I don't have my Gecko here to test it out in FF.
 
Upvote 0 Downvote
Hey thanks matey, the header and footer are a bit screwy but I can have a play with that later.

The hard part that I really couldn`t figure out was the center column. It looks like margin- is the way to go, rather than just left and right atributes.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
223
lmcate
lmcate
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
776
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
692
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
185
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top