Tue, 2004-09-21 09:05
Hi Folks,
Anyone have any idea how I can solve this problem? I'll be most grateful. I'm trying to position a DIV element to the top-right of another fluid DIV? The blue-toned photo [please see screenshot] is going right outside of the white content area.
What it should look like:
http://www.johniwhite.com/fr/screenshot.html
What it sadly does look like:
http://www.johniwhite.com/fr/template_skeleton.html
[I've added dotted borders to the DIVS for clarity]
If I get this working, will I have problems with the body text in different pages? Say, if there's no photo, can I get the text to move up automatically? The photo is not within the flow so I have the text at a fixed position.
Finally, the footer with [top-of-page arrow] seems detached when the browser is maximised.
Hoping someone can help - I've been at this a week.
John
Tue, 2004-09-21 11:07
#1
'Absolute' DIV positioning probs in a fluid DIV
SORRY, HERE'S THE HTML:
-------------------------
<!-- START Middle [content] Column -->
<div id="col_middle">
<!-- start content header-->
<div id="header">
<div id="section_title">
<img src="images/middle/ttl_proj_man.gif" width="150" height="52">
</div>
<div id="sectionphoto">
<img src="images/middle/sctn_photo.jpg" alt="photo" width="300" height="105">
</div>
</div>
<!-- end content header-->
<!-- start actual content-->
<div id="content">
is an interactive media agency spe
-------------------------
HERE'S THE CSS
-------------------------
/*-- MIDDLE COLUMN --*/
div#col_middle {
margin: 40px 134px 0 140px;
background-color: #FFF;
}
div#header {
position: relative;
}
div#section_title {
position: absolute;
z-index: 1;
top: 10px;
left: 0;
visibility: visible;
}
div#sectionphoto {
position: absolute;
z-index: 9;
top: 0;
right: 0px;
visibility: visible;
width: 300px; height: 105px;
}
div#content {
font-size: .9em;
line-height: 1.5em;
margin: 105px 10px 10px 10px;
}
Tue, 2004-09-21 11:33
#2
'Absolute' DIV positioning probs in a fluid DIV
It looks like the screeenshot in firefox, but doesn't look to hot in IE 6.
By putting the absolute positioned div inside a relative positioned one, it should fix things in IE.
I'm not 100% though, I've not really used much absolute positioning.
Tue, 2004-09-21 11:44
#3
'Absolute' DIV positioning probs in a fluid DIV
Use floats if you can as in my very limited experience, absolute positioning can cause unessesary problems.
Tue, 2004-09-21 17:53
#4
'Absolute' DIV positioning probs in a fluid DIV
Hi Essential,
thans for the attention. I actually have it as this, with the absolutely positioned photo DIV in the relatively positioned header DIV. Perhaps I just don't have it quite right?:
div#header {
position: relative;
}
div#section_title {
position: absolute;
z-index: 1;
top: 10px;
left: 0;
visibility: visible;
}
div#sectionphoto {
position: absolute;
z-index: 9;
top: 0;
right: 0px;
visibility: visible;
width: 300px; height: 105px;
}
Tue, 2004-09-21 17:55
#5
'Absolute' DIV positioning probs in a fluid DIV
Hi Roy
I tried floats first but the second one [the photo] seems to drop down, lower than the first [Project Management title].
Do I need a clear: both or something somewhere?
God knows I've tried,
Thanks
jOhn