Overlap relative positioned div's

[Cruelemort]

All,

I have a div in my page that has a set width of 1000px, height of
200px, inside this i declare two more div's, both relatively
positioned and floated left, the first is placed to the top left of
the box and is a 30px square, the other one is set to 970px and is
naturally positioned next to the square and so fills all the way to
the right hand edge of the box.

Now i need the second (wider) box to overlap the square and so start
at the left hand edge of the box - this has been achieved by setting
the left property of the wider box to -30 but obviously this leads to
a gap on the right hand side of 30 pixels, however when i increase the
width of the wider box by the extra 30 pixels required to put it's
right edge all the way to the edge of the containing div (or if i even
make it one pixel wider - 971px) it automatically pushes the box down
to the next line because of the relative positioning.

It seems that the CSS is not taking into account the fact that the box
has been pushed 30 pixels to the left when calculating if there is
enough space to fit the box on the same line as the square.

Has anybody come across anything like this before - is there a
different approach that can be taken to solve the problem without
using the float property? I would like to try to avoid the use of
absolute positioning if possible.

Cheers

Ian

[rf]

"Cruelemort" <ia********@gmail.comwrote in message
news:11**********************@p77g2000hsh.googlegr oups.com...

All,

I have a div in my page

url?

[Cruelemort]

On May 11, 12:19 pm, "rf" <[e-mail]:

"Cruelemort" <[e-mail] in message

news:11**********************@p77g2000hsh.googlegr oups.com...

All,

I have a div in my page

url?

Can't give a link to the actual app because it is not on an external
web server, however i have just built an example application which
demonstrates the problem -

http://thepartyhouse.co.uk/sandbox/css/index.html

Strangely this example works fine in Firefox (my actual app does not)
but IE still shows the problem, the style sheet (http://
thepartyhouse.co.uk/sandbox/css/stylesheet.css) shows the containing
div is 800px wide and the other_div is 780px wide, the other div is
shifted 30px left to enable overlap with the square div so it should
start at the left edge of the containing div and go to 20 pixels short
of the right edge, but instead it is dropped to the row below.

Ian

[Jonathan N. Little]

Cruelemort wrote:

All,

I have a div in my page that has a set width of 1000px, height of
200px, inside this i declare two more div's, both relatively
positioned and floated left, the first is placed to the top left of
the box and is a 30px square, the other one is set to 970px and is
naturally positioned next to the square and so fills all the way to
the right hand edge of the box.

Now i need the second (wider) box to overlap the square and so start
at the left hand edge of the box - this has been achieved by setting
the left property of the wider box to -30 but obviously this leads to
a gap on the right hand side of 30 pixels, however when i increase the
width of the wider box by the extra 30 pixels required to put it's
right edge all the way to the edge of the containing div (or if i even
make it one pixel wider - 971px) it automatically pushes the box down
to the next line because of the relative positioning.

If you are "floating" then it is not "left" but "margin-left" property
that you want to set. Also you did not indicate whether or not you have
margins, borders and padding value that also are added to the overall
width...

>
It seems that the CSS is not taking into account the fact that the box
has been pushed 30 pixels to the left when calculating if there is
enough space to fit the box on the same line as the square.

Has anybody come across anything like this before - is there a
different approach that can be taken to solve the problem without
using the float property? I would like to try to avoid the use of
absolute positioning if possible.

It does seem that absolute positioning is really what you are trying to
do. BTW it is going to "really look good" to folks with 800x600 displays...
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Cruelemort]

On May 11, 2:32 pm, "Jonathan N. Little" <[e-mail]>
wrote:

Cruelemort wrote:

All,

I have a div in my page that has a set width of 1000px, height of
200px, inside this i declare two more div's, both relatively
positioned and floated left, the first is placed to the top left of
the box and is a 30px square, the other one is set to 970px and is
naturally positioned next to the square and so fills all the way to
the right hand edge of the box.

Now i need the second (wider) box to overlap the square and so start
at the left hand edge of the box - this has been achieved by setting
the left property of the wider box to -30 but obviously this leads to
a gap on the right hand side of 30 pixels, however when i increase the
width of the wider box by the extra 30 pixels required to put it's
right edge all the way to the edge of the containing div (or if i even
make it one pixel wider - 971px) it automatically pushes the box down
to the next line because of the relative positioning.

If you are "floating" then it is not "left" but "margin-left" property
that you want to set. Also you did not indicate whether or not you have
margins, borders and padding value that also are added to the overall
width...

It seems that the CSS is not taking into account the fact that the box
has been pushed 30 pixels to the left when calculating if there is
enough space to fit the box on the same line as the square.

Has anybody come across anything like this before - is there a
different approach that can be taken to solve the problem without
using the float property? I would like to try to avoid the use of
absolute positioning if possible.

It does seem that absolute positioning is really what you are trying to
do. BTW it is going to "really look good" to folks with 800x600 displays...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Ok looking at margin-left and absolute positioning.

It is a throw-away prototype so does not matter how good it looks to
800x600 displays, so long as it is done very quickly.

Thanks for your help.

Ian

[John Hosking]

Cruelemort wrote:

I have a div in my page that has a set width of 1000px,

Consider yourself duly chastized.

height of
200px, inside this i declare two more div's, both relatively
positioned and floated left,

Both? What does that do?

the first is placed to the top left of
the box and is a 30px square, the other one is set to 970px and is
naturally positioned next to the square and so fills all the way to
the right hand edge of the box.

[trimmed]

>
Has anybody come across anything like this before - is there a
different approach that can be taken to solve the problem without
using the float property? I would like to try to avoid the use of
absolute positioning if possible.

You haven't really explained -- this may surprise you -- what your real
problem is. You've just presented a mash of conflicting restrictions and
asked us to solve the conflict. One of the advantages of a real URL is
that we get to see what you're trying to do and (with some guessing)
why. Your floating and positioning are probably not your real goals,
just your attempts to get there. Right?

Is it true you want a square box to appear in front of a wider
rectangle, both of them starting at the exact same upper-left corner?
And that this corner is also the upper-left corner of the bigger
containing div (set in your example to 1000px)?

One (apparent) solution: Change the markup to have nested divs. Might
not make sense for your content, but we can't know that. Using your
example at http://thepartyhouse.co.uk/sandbox/css/index.html, try

<div id="containing_div" class="containing_div">
<div id="other_div" class="other_div">
<div id="square_div" class="square_div"></div>
</div>
</div>

with float and z-index and positon:relative and left:-30px removed from
the CSS:

div.containing_div
{ position: absolute;
left: 50px;
width: 800px;
height: 200px;
border: 1px solid black; }

div.square_div
{ width: 30px;
height: 30px;
top: 0px;
left: 0px;
background-color: red; }

div.other_div
{ width: 780px;
height: 50px;
top: 0px;
background-color: blue; }

In your other post you mentioned differences between IE and FF. I'm not
sure what _that_ was, but in general, you will have much better results
if you put the browsers into standards mode, as opposed to quirkss mode.
Add <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"to the start of your
HTML. Also add a <titleelement and a character encoding, then check
for validation errors. Don't forget to include borders, margins, and
padding when you're doing something crazy like attempting pixel-perfect
block fitting.

--
John

[Ben C]

On 2007-05-11, Jonathan N. Little <lw*****@centralva.netwrote:

Cruelemort wrote:

>All,

I have a div in my page that has a set width of 1000px, height of
200px, inside this i declare two more div's, both relatively
positioned and floated left, the first is placed to the top left of
the box and is a 30px square, the other one is set to 970px and is
naturally positioned next to the square and so fills all the way to
the right hand edge of the box.

[...]

If you are "floating" then it is not "left" but "margin-left" property
that you want to set.

left will work since it's a relatively positioned float.

[Ben C]

On 2007-05-11, Cruelemort <ia********@gmail.comwrote:

All,

I have a div in my page that has a set width of 1000px, height of
200px, inside this i declare two more div's, both relatively
positioned and floated left, the first is placed to the top left of
the box and is a 30px square, the other one is set to 970px and is
naturally positioned next to the square and so fills all the way to
the right hand edge of the box.

Now i need the second (wider) box to overlap the square and so start
at the left hand edge of the box - this has been achieved by setting
the left property of the wider box to -30 but obviously this leads to
a gap on the right hand side of 30 pixels, however when i increase the
width of the wider box by the extra 30 pixels required to put it's
right edge all the way to the edge of the containing div (or if i even
make it one pixel wider - 971px) it automatically pushes the box down
to the next line because of the relative positioning.

It seems that the CSS is not taking into account the fact that the box
has been pushed 30 pixels to the left when calculating if there is
enough space to fit the box on the same line as the square.

Yes, that's exactly what it's doing. For relative positioning,
everything is laid out as if it weren't relatively positioned first,
then, at the last minute, translated by the relative offset you set with
top, left, etc.

Has anybody come across anything like this before - is there a
different approach that can be taken to solve the problem without
using the float property? I would like to try to avoid the use of
absolute positioning if possible.

Why? Absolute positioning is the obvious way to do this.

I don't know what's in the second div. If it doesn't contain any inline
content, just leave it as normal flow display: block (the default). It
will get stacked behind the left float, but you can bring it in front of
it with "position: relative; z-index: 1"