DIV overlapping

[Luigi Donatello Asero]

How can I prevent the <div> which relates to Italy and the the <div> which
relates to Sweden from overlapping?
https://www.scaiecat-spa-gigi.com/sv/index.php

 

[Els]

How can I prevent the <div> which relates to Italy and the the <div> which
relates to Sweden from overlapping?
https://www.scaiecat-spa-gigi.com/sv/index.php

You probably won't take this advice (deja-vu), but: don't use
position:absolute; if you don't understand the consequences.

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
proclaimed:

You probably won't take this advice (deja-vu)

I'd save your fingers for more useful things, like picking your nose and
typing replies to folk who will listen, if I were you.

 

[Luigi Donatello Asero]

You probably won't take this advice (deja-vu), but: don't use
position:absolute; if you don't understand the consequences.

The consequences can be understood better by trying to use it... and see
what it happens.
I assume that the alternative would be to use
position:relative;

 

[Els]

The consequences can be understood better by trying to use it... and see
what it happens.
I assume that the alternative would be to use
position:relative;

Assumed wrongly.

 

[Els]

Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
proclaimed:


I'd save your fingers for more useful things, like picking your nose and
typing replies to folk who will listen, if I were you.

You're so right!

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Luigi
Donatello Asero finally proclaimed:

I assume that the alternative would be to use
position:relative;

No. The alternative is to not specify *any* value for the position and
to leave out the position rule entirely. You don't need to specify
anything.

 

[Arne]

The consequences can be understood better by trying to use it... and see
what it happens.
I assume that the alternative would be to use
position:relative;

Hint: try "float"

--
/Arne
-- *Joke of the day* ----------------------------------------
Support: Click on 'My Computer' on the left of the screen.
Customer: Your left or my left?
-------------------------------------------------------------

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
proclaimed:

You're so right!

I'm either stupid or full of chocolate and coffee icecream, but he's got
me trying to be helpful too now

 

[Luigi Donatello Asero]

Hint: try "float"

I did it before (float:left with position:relative;
Perhaps should I try (float: bottom?
It does not seem to look very well without setting any position either...

 

[Jonathan N. Little]

The consequences can be understood better by trying to use it... and see
what it happens.
I assume that the alternative would be to use
position:relative;

No, 'position: irrelevant' unless you have a specific reason to do so.

 

[Luigi Donatello Asero]

No, 'position: irrelevant' unless you have a specific reason to do so.

I want the display the boxes on the top
(top left, top centre, top right)
and
(bottom left, bottom centre bottom right)
However, it would be nice if they did not overlap...

 

[Luigi Donatello Asero]

I want the display the boxes on the top

I want to display the div boxes on the top
(top left, top centre, top right)
and
(bottom left, bottom centre bottom right)
However, it would be nice if they did not overlap...

 

[Els]

Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
proclaimed:


I'm either stupid or full of chocolate and coffee icecream,

'or' or 'and'? ;-)

but he's got me trying to be helpful too now

Stop now, or be lost forever

Just a reminder (maybe new info for others): the solution to Luigi's
problems is almost invariably utterly simple. It's the convincing him
of such fact, which is a downright PITA.

 

[Luigi Donatello Asero]

'or' or 'and'? ;-)


Stop now, or be lost forever

Just a reminder (maybe new info for others): the solution to Luigi's
problems is almost invariably utterly simple. It's the convincing him
of such fact, which is a downright PITA.

So, tell me which was your fine solution?

 

[Els]

So, tell me which was your fine solution?

I just *know* you won't use it, but here's anyway:

<div id="top">
<div id="a">bla</div>
<div id="b">bla</div>
<div id="c">bla</div>
</div>
<div id="bottom">
<div id="d">bla</div>
<div id="e">bla</div>
<div id="f">bla</div>
</div>

#top,#bottom{
width:100%;
float:left; /* to avoid peek-a-boo in IE */
clear:left;
margin:20px 0;
}
#a,#d{
width:30%;
float:left;
background-color:yellow;
}
#b,#e{
width:30%;
float:right;
background-color:blue;
}
#c,#f{
margin-left:34%;
margin-right:34%;
background-color:red;
}

 

[Luigi Donatello Asero]

I just *know* you won't use it, but here's anyway:

<div id="top">
<div id="a">bla</div>
<div id="b">bla</div>
<div id="c">bla</div>
</div>
<div id="bottom">
<div id="d">bla</div>
<div id="e">bla</div>
<div id="f">bla</div>
</div>

#top,#bottom{
width:100%;
float:left; /* to avoid peek-a-boo in IE */
clear:left;
margin:20px 0;
}
#a,#d{
width:30%;
float:left;
background-color:yellow;
}
#b,#e{
width:30%;
float:right;
background-color:blue;
}
#c,#f{
margin-left:34%;
margin-right:34%;
background-color:red;
}

--

Did you take into account the structural relationship between for example
the div which relates to "Semesterbostäder i Sverige" and the one which
refers to
"Semesterbostäder i Italien" (both belonging to "Semesterbostäder" but one
being into the "top" and the another into the "bottom" while putting
together 3 divs in the bottom and
3 divs in the top?

 

[Jonathan N. Little]

Luigi Donatello Asero wrote:

I want the display the boxes on the top
(top left, top centre, top right)
and
(bottom left, bottom centre bottom right)
However, it would be nice if they did not overlap...

FWIIW:

<style type="text/css">
#toplists UL, #bottomlists UL {
width: 25%;
float: left;
}
#bottomlists { clear: left; }
#listA { background-color: #F88; }
#listB { background-color: #8F8; }
#listC { background-color: #88F; }
#listD { background-color: #F8F; }
#listE { background-color: #FF8; }
#listF { background-color: #8FF; }
</style>

<div id="toplists">
<ul id="listA">
<li>One A</li>
<li>Two A</li>
<li>Three A</li>
</ul>
<ul id="listB">
<li>One B</li>
<li>Two B</li>
<li>Three B</li>
</ul>

<ul id="listC">
<li>One C</li>
<li>Two C</li>
<li>Three C</li>
</ul>
</div>

<div id="bottomlists">
<ul id="listD">
<li>One D</li>
<li>Two D</li>
<li>Three D</li>
</ul>
<ul id="listE">
<li>One E</li>
<li>Two E</li>
<li>Three E</li>
</ul>

<ul id="listF">
<li>One F</li>
<li>Two F</li>
<li>Three F</li>
</ul>
</div>

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Luigi
Donatello Asero finally proclaimed:

Did you take into account the structural relationship between

....

WTF are you on? Just thanks the nice lady[1] and use the damn code.
Don't worry about trying to imply a /structural relationship/ because if
there is one then you should be using a table anyway!

_____
[1] Els, Apologies for referring to you as "the nice lady".

 

[Els]

Did you take into account the structural relationship between for example
the div which relates to "Semesterbostäder i Sverige" and the one which
refers to
"Semesterbostäder i Italien" (both belonging to "Semesterbostäder" but one
being into the "top" and the another into the "bottom" while putting
together 3 divs in the bottom and
3 divs in the top?

I don't speak Swedish, so I did indeed not take into account any
structural relationship at all. It's easy enough to make it 3 columns
of 2 rows instead of 2 rows of 3 columns, but then you won't have
equal heights. If you want to maintain that relationship /and/ equal
heights to make it look like a table, you're looking for a table, and
you shouldn't use divs to make life difficult.