5 replies [Last post]
johnnyivan
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2004-09-21
Posts: 8
Points: 0

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

johnnyivan
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2004-09-21
Posts: 8
Points: 0

'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;
}

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 16 years 6 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

'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.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 1 week ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

'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.

Life's a b*tch and then you die!

johnnyivan
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2004-09-21
Posts: 8
Points: 0

'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;
}

johnnyivan
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2004-09-21
Posts: 8
Points: 0

'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