'Absolute' DIV positioning probs in a fluid DIV

[johnnyivan]

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

 

[Foamcow]

Try making the blue image the background of the DIV and set it to top right.

http://www.foamcow.com

"I'm making time

 

[wing2x]

The search form does not exist on your template. That's why your header div is filling up the col_middle div.

 

[johnnyivan]

I'll check out what you said about the Form and get back wing2x - and the BG image suggestion foamcow.
Thanks!


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

 

[wing2x]

You could also try posting to

http://lists.evolt.org/mailman/listinfo/thelist

I've been lurking there and that list is very active. You should find a lot of help.

 

[johnnyivan]

Thanks very much wing2x,
I'll see how your advice goes first.
John

 

[johnnyivan]

Hi wing2x
I put the form in and it still doesn't work I'm afraid.

http://www.johniwhite.com/fr/template_skeleton.html

I have the photo DIV as position: absolute

 

[Foamcow]

You have a lot of unnecessary DIVs in your code.

Consider the structure of your page, strip the code down, simplify it.

For example:

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

You don't need to wrap divs around the images. An image is a block level element in it's own right, you are putting it in another block level element.
It's like buying something in a box, which comes in a box.

Why not set up a header div, put the title image in it so its on the left and then use the blue image as a background to header div, fixing it top right with no repeat?

div#header {
position: relative;
border:1px solid black;
background:url(images/middle/sctn_photo.jpg) top right no-repeat;
height:100px;
padding:0;
}

http://www.foamcow.com

"I'm making time

 

[Foamcow]

With a very small modification I got your page to work (in my opinion). I've only tested it in IE6 and Firefox but I am confident it will work across the board with minimal tweaking.

First off, change your CSS for the header div like so;

div#header {
	position: relative;
	background:url(images/middle/sctn_photo.jpg) top right no-repeat;
	height:100px;
	padding-top:30px;
}

div#content {
	font-size: .9em;
	line-height: 1.5em;
	margin: 0px 0px 10px 10px;
}

#content p {
	padding-right:10px;
}

Then change your HTML structure slightly

<div id="content">
	[COLOR=red]<div id="header">
			<img src="images/middle/ttl_proj_man.gif" width="150" height="52">
	</div>
	[/color]
	   [COLOR=red]<p>[/color] is an interactive media agency specialising in the development of interactive solutions. Set up in July 2002 by the ex-management of Windmill Lane production of projects for corporate, government, educational and not-for-profit clients. This experience spans effective project planning and execution, clear identification
of the client needs and choosing the best personnel for the job. [COLOR=red]</p>[/color]
	</div>

Note:
I put the header div inside the content div and set the background etc as I mentioned earlier.
I changed the margins on the content div so it buts up to the right column.
I put <p> tags around your copy and set a style to add padding to them.

This will need tweaking and tidying up.
The page could be stripped down and the code simplified. This would probably make it more apparent where problems are and how to solve them.

Hope that is some help, and fits in with what you want to do.

http://www.foamcow.com

"I'm making time

 

[johnnyivan]

Hi Foamcow,
Thanks for that! I'll see how it goes and get back to you,
John

 

[Foamcow]

Like I said, it will need tweaking.

You will run into a problem setting the height of the left column to match the content panel.

It's a nice design and it will work, but I think you may need to construct it slightly differently.

Take a step back and rethink how you structure your page based on what I have done above.

http://www.foamcow.com

"I'm making time

 

[Vragabond]

You don't need to wrap divs around the images. An image is a block level element in it's own right, you are putting it in another block level element.

Actually, this is not right. By default, image is an inline element. However, through CSS you can transform its behaviour to be block level element by doing one of:
display: block;
float: left;
float: right;

Just as a clarification.

 

[Foamcow]

Oops, yes, of course you are correct.

http://www.foamcow.com

"I'm making time