PDA

View Full Version : multi-column css table in relative position


fasttempo123
07-24-2006, 07:22 AM
I have created a table with two columns using css layers in relative position. The table works fine and looks exactly like what I wanted. However I found there is a big empty space between the table and the content below it. I believe this space is taken up by the layers that are positioned on the right. Say I have two relative positon layers that are positioned side by side (two columns). The space below the left layer is taken by the right layer even the right layer is appeared in right hand side above the empty space. This makes the relative position for creating multi-columns css table somewhat useless to me. Is there any way that the empty space can be removed?

chriskq
07-25-2006, 12:37 AM
float both of the columns or wrappers divs left, that way they'll be smack up against eachother.
remember to clear the float after :D

domedia
07-25-2006, 01:03 AM
If that advice didn't help, post the url to your page, or paste the code in here :)

fasttempo123
07-25-2006, 02:51 PM
float both of the columns or wrappers divs left, that way they'll be smack up against eachother.
remember to clear the float after :D

Thank you for your help. I tried your suggestions and it does remove the extra space. I can now view my page properly in IE7 and Firefox 1.5. However I use the page for Ebay auction listing. When I insect my page into ebay's auction page I now got two problems. The first one is with IE7 which will not display centered layout properly. Instead it displays my page as left aligned. The second problem is that my page will overlap with the Ebay contents below it when viewed in Firefox. But the same problem doesn't appear in both browsers. I am not sure those problems have anything to do with float as I didn't check the display in both browsers before and the centering of my css layout is just added in together with float. One thing obvious is that it has got to have something to do with Ebay. I have posted a question in the message board there. And just in case anyone here can help I will paste the code below. I will be more than happy to open up a new thread for the new problems should that be the general practice here. You help will be much appreciated!

1. external css file named "layers.css"

body {
text-align:center;
}
#header {
position:relative;
left:0;
top:0;
width:800px;
height:449px;
z-index:1;
}
#about {
position:relative;
left:0;
top:0;
width:800px;
height:220px;
z-index:2;
}
#middle {
position:relative;
}
#lcontainer {
position:relative;
float:left;
}
#rcontainer {
position:relative;
float:left;
}
#product {
position:relative;
left:0;
top: 0px;
width:400px;
height:310px;
z-index:3;
}
#Shipping {
position:relative;
left:0;
top:0px;
width:400px;
height:290px;
z-index:4;
}
#Payment {
position:relative;
top:0px;
width:400px;
height:450px;
z-index:5;
}
#terms {
position:relative;
top:0px;
width:800px;
height:600px;
z-index:6;
}
#space {
position:relative;
top:0px;
left:0px;
width:400px;
height:50px;
z-index:7;
}
#photos {
position:relative;
left:0px;
top:0px;
width:400px;
height:1000px;
z-index:8;
}
#center {
position:relative;
text-align:center;
margin:0 auto;
width:800px;
}

2. html code:

<link href="../Unnamed Site 2/layers.css" rel="stylesheet" type="text/css" />
<div id="center">
<div id="header">contents removed</div>
<div id="about">contents removed</div>
<div id="middle">
<div id="lcontainer">
<div id="product">contents removed</div>
<div id="Shipping">contents removed</div>
<div id="Payment">contents removed</div>
</div>
<div id="rcontainer">
<div id="space">space box here</div>
<div id="photos">contents removed</div>
</div>
</div>
<div id="terms">contents removed</div>
</div>

chriskq
07-27-2006, 01:46 AM
so the page looks fine in IE 6 to me.
to combat the ebay problem try getting rid of some positioning,
you are using too much position: relative.

you only need to add position relative to a div when a div inside that is being postioned: absolute.

im not familar with ebay site shops sorry.

attahced is the layout i got in IE 6 (i reduced the heights on all divs thou)[/code]