CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 27394

CSS: Make two floating elements overlap

I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).

How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.

Code (unfortunately I cannot jsfiddle this as their servers are read only atm):

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: right;
}

Upvotes: 28

Views: 67101

Answers (8)

T.Todua
T.Todua

Reputation: 56557

Excellent Solution: http://jsfiddle.net/A9Ap7/237/


So, dont use:

  MARGIN-LEFT:100px...

== or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems! so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.

Upvotes: 0

R Reveley
R Reveley

Reputation: 1584

Can you add an extra div in there?

<div id="container"> 
    <div id="left">
        <div id="left-inner">left</div>
    </div> 
    <div id="right">right</div> 
</div> 
<style>
#container { 
    width: 400px; 
} 

#left { 
    float: left;
    width: 0px;
    overflow:visible; 
} 

#left-inner { 
    float: right;
    width: 250px; 
} 

#right { 
    width: 250px; 
}
</style>

Upvotes: 1

Gareth
Gareth

Reputation: 5718

Use a negative margin-right on the left box so that the right box is allowed to overlap:

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
    margin-right:-104px;
}

The 104 pixels is the overlap amount plus 4px for borders.

Here's a jsfiddle.

Upvotes: 46

zozo
zozo

Reputation: 8612

Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.

Upvotes: 0

ZX12R
ZX12R

Reputation: 4826

How about pulling the right div with negative margin. Something like this?

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    position: relative;
    width: 400px;
    height: 110px;
    background-color: #eee;
}

#left {
    width: 250px;
    height: 100px;
    border: 1px solid green;
    float: left;
}

#right {
    position: relative;
    float: right;
    width: 250px;
    height: 100px;
    top: -100px;
    border: 1px solid red;
}

Upvotes: -1

Boris
Boris

Reputation: 749

Try this one:

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
<style>
#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    margin-left: 150px;
    position: absolute;
}
</style>

Upvotes: -1

thenetimp
thenetimp

Reputation: 9830

You can only do that with positioning.

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
    position: relative;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

Upvotes: 2

Stelian Matei
Stelian Matei

Reputation: 11623

You could create the divs with absolute position and add a positive z-index to the one you want to be in front.

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
    position: relative;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}

Upvotes: 1

Related Questions