PDA

View Full Version : Floating Div Problem



VonStruve
Oct 1st, 2009, 01:28 AM
Hi, I am currently trying to creat a custom profile layout for a friend on the website Livevideo.

I have created a layout with four sections, a top-left floating div, central section which contains the page content, a top-right floating div and a fixed footer div.

My issue is that although all work to a point, as soon as I input a certain amount of content within the top-right floating div, the entire page layout aligns to the right with the exception of the left-floating div. What is causing this and what's the solution?

Here's the html:


<div id="footer">
<img src="http://www.vonstruve.com/images/chat_footer.png"/>
</div>
<div id="leftdiv">
This is the left-floating div section
</div>

<div id="rightdiv">
<ul align="left">
<h2>heading</h2>
<li>name
<li>name
<li>name
<li>name
<li>name
<li>name
<li>name
<li>name
</ul>
<p>some text</p>
</div>


and here's the CSS:


#footer
{
position: fixed; clear: both; width: 100%; height: 30px; bottom: 0; border: none; padding: 13px 0 0 0; text-align: center; color: #335500; background-color: transparent; z-index: 1;
}
#leftdiv{
position:fixed;
top:10px;
left:10px;
width:140px;
height:500px;
background:#800000;
background:url(http://www.vonstruve.com/images/chat_mod.png);
border: #ffffff 2px solid;
color: #ffffff;
text-align: center;
z-index: 3;
}
#rightdiv{
position:fixed;
top:10px;
right:10px;
width:140px;
height:500px;
background:#002880;
background:url(http://www.vonstruve.com/images/chat_mod.png);
border: #ffffff 2px solid;
color: #ffffff;
text-align: center;
z-index: 4;
}


The problem lies when I try to add more text to rightdiv's "some text" paragraph tag. The actual div size is more than enough to accomodate extra text and this issue doesn't seem to happen to the leftdiv....

Any help with this matter would be greatly appreciated :)
Thanks in advance,
Dave

abduraooft
Oct 1st, 2009, 09:36 AM
Could you post a link your page? Otherwise post your complete code including DOCTYPE.

VonStruve
Oct 1st, 2009, 11:54 AM
Here's the link to the page - http://www.livevideo.com/liveshow/thechathouse (http://www.livevideo.com/thechathouse) (floating div's will be on this page)

And here is the test page I am using before posting the result on his page - http://www.livevideo.com/trixielix

Please note I don't actually have access to the page HTML file, I am having to paste everything inlcuding the html tags into the CSS style sheet - but it seems to work with no problems if I wrap the css in <style> tags and put the div's outside of those tags....

Here is the complete CSS code for the trixielix test page (beware - its damn long!):


<style>
#footer
{
position: fixed; clear: both; width: 100%; height: 30px; bottom: 0; border: none; padding: 13px 0 0 0; text-align: center; color: #335500; background-color: transparent; z-index: 1;
}
#leftdiv{
position:fixed;
top:10px;
left:10px;
width:140px;
height:500px;
background:#800000;
background:url(http://www.vonstruve.com/images/chat_mod.png);
border: #ffffff 2px solid;
color: #ffffff;
text-align: center;
z-index: 3;
}
#rightdiv{
position:fixed;
top:10px;
right:10px;
width:140px;
height:500px;
background:#002880;
background:url(http://www.vonstruve.com/images/chat_mod.png);
border: #ffffff 2px solid;
color: #ffffff;
text-align: center;
z-index: 4;
}
.profileVideo
{
border-left: 2px solid #959595;
border-right: 2px solid #959595;
border-top: 2px solid #959595;
border-bottom: 2px solid #959595;
}
.profilePhoto
{
border-left: 3px solid #D8D8D8;
border-right: 3px solid #D8D8D8;
border-top: 3px solid #D8D8D8;
border-bottom: 3px solid #D8D8D8;
}
.profilePlayerLeft
{
background-image: url(/images/skins/1/pod4_leftbg.gif);
}
.profilePlayerRight
{
background-image: url(/images/skins/1/pod4_rightbg.gif);
}
.profilePod1Header
{
background-image: url(/images/skins/1/hdr1_bg.gif);
background-color: #ffffff;
color: #3F3F3F;
font-size: 13px;
}
.profilePod1Header a
{
color: #003ECC;
text-decoration: underline;
}
.profilePod1Header a:hover
{
color: #003ECC;
text-decoration: underline;
}
.profilePod1HeaderRight
{
background-image: url(/images/skins/1/hdr1_right.gif);
width: 15px;
height: 22px;
}
.profilePod1HeaderLeft
{
background-image: url(/images/skins/1/hdr1_left.gif);
width: 15px;
height: 22px;
}
.profilePod1
{
background-color: #ffffff;
color: #514336;
border: #A6A6A6 1px solid;
padding-bottom: 10px;
}
.profilePod1 a
{
color: #003ECC;
text-decoration: underline;
}
.profilePod1 a:hover
{
color: #003ECC;
text-decoration: underline;
}
.profilePod1Footer
{
background-image: url(/images/skins/1/ftr1_bg.gif);
}
.profilePod1FooterRight
{
background-image: url(/images/skins/1/ftr1_right.gif);
width: 10px;
}
.profilePod1FooterLeft
{
background-image: url(/images/skins/1/ftr1_left.gif);
width: 10px;
}
.profilePod2Header
{
background-image: url(/images/skins/1/hdr2_bg.gif);
background-repeat: no-repeat;
background-color: #AFAFAF;
color: #ffffff;
font-size: 13px;
font-weight: bold;
}
.profilePod2Header a
{
color: #ffffff;
text-decoration: underline;
}
.profilePod2Header a:hover
{
color: #ffffff;
text-decoration: underline;
}
.profilePod2HeaderRight
{
background-image: url(/images/skins/1/hdr2_right.gif);
width: 15px;
height: 22px;
}
.profilePod2HeaderLeft
{
background-image: url(/images/skins/1/hdr2_left.gif);
width: 15px;
height: 22px;
}
.profilePod2
{
background-color: #ffffff;
color: #40352B;
border: #A6A6A6 1px solid;
}
.profilePod2 a
{
color: #003ECC;
text-decoration: underline;
}
.profilePod2 a:hover
{
color: #003ECC;
text-decoration: underline;
}
.profilePod2Footer
{
background-image: url(/images/skins/1/ftr2_bg.gif);
}
.profilePod2FooterRight
{
background-image: url(/images/skins/1/ftr2_right.gif);
width: 10px;
}
.profilePod2FooterLeft
{
background-image: url(/images/skins/1/ftr2_left.gif);
width: 10px;
}
.profilePod3Header
{
background-image: url(/images/skins/1/hdr3_bg.gif);
color: #514336;
font-size: 13px;
}
.profilePod3Header a
{
color: #003ECC;
font-size: 13px;
text-decoration: underline;
}
.profilePod3Header a:hover
{
color: #003ECC;
text-decoration: underline;
}
.profilePod3HeaderRight
{
background-image: url(/images/skins/1/hdr3_right.gif);
width: 15px;
height: 22px;
}
.profilePod3HeaderLeft
{
background-image: url(/images/skins/1/hdr3_left.gif);
width: 15px;
height: 22px;
}
.profilePod3
{
background-color: #ffffff;
color: #514336;
border: #A6A6A6 1px solid;
}
.profilePod3 a
{
color: #003ECC;
text-decoration: underline;
}
.profilePod3 a:hover
{
color: #003ECC;
text-decoration: underline;
}
.profilePod3Footer
{
background-image: url(/images/skins/1/ftr3_bg.gif);
}
.profilePod3FooterRight
{
background-image: url(/images/skins/1/ftr3_right.gif);
width: 10px;
}
.profilePod3FooterLeft
{
background-image: url(/images/skins/1/ftr3_left.gif);
width: 10px;
}
.profilePod4Header
{
background-image: url(/images/skins/1/hdr4_bg.gif);
color: #514336;
}
.profilePod4Header a
{
color: #003ECC;
text-decoration: underline;
}
.profilePod4Header a:hover
{
color: #003ECC;
text-decoration: underline;
}
.profilePod4HeaderRight
{
background-image: url(/images/skins/1/hdr4_right.gif);
width: 10px;
height: 10px;
}
.profilePod4HeaderLeft
{
background-image: url(/images/skins/1/hdr4_left.gif);
width: 10px;
height: 10px;
}
.profilePod4
{
background-color: #ffffff;
color: #514336;
}
.profilePod4 a
{
color: #003ECC;
text-decoration: underline;
}
.profilePod4 a:hover
{
color: #003ECC;
text-decoration: underline;
}
.profilePod4Footer
{
background-image: url(/images/skins/1/ftr4_bg.gif);
}
.profilePod4FooterRight
{
background-image: url(/images/skins/1/ftr4_right.gif);
width: 10px;
}
.profilePod4FooterLeft
{
background-image: url(/images/skins/1/ftr4_left.gif);
width: 10px;
height: 10px;
}
.bgTextNav,.bgTextNav a,.bgTextNav a:hover
{
color: #3F3F3F;
font-weight: bold;
}
</style>
<div id="footer">
<img src="http://www.vonstruve.com/images/chat_footer.png"/>
</div>
<div id="leftdiv">HOO</div>
<div id="rightdiv">
<ul align="left">
<h2>heading</h2>
<li>name
<li>name
<li>name
<li>name
<li>name
<li>name
<li>name
<li>name
</ul>
<p>some text</p>
</div>


Hope this helps...

effpeetee
Oct 1st, 2009, 01:09 PM
You have many errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.livevideo.com%2Ftrixielix&charset=%28detect+automatically%29&doctype=Inline&group=0):eek:

and here too. (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.livevideo.com%2Ftrixielix&profile=css21&usermedium=all&warning=1&lang=en)


Frank

VonStruve
Oct 1st, 2009, 02:20 PM
Unfortunately I am having to make the best of a bad job, I have no control over 99% of the html coding on the site, and the site also has ALOT of restrictions as to what code is even accepted...

It's just a case of trial and error and sometimes forcing the site to do what you want using very messy code...

for instance the location of the div code, although not technically allowed - it does work and its the only way I can put div's onto the page...I don't have access to the page html at all, just the css style sheet.