CODEWITHSUNDEEP
csscss-float
monkee
monkee

Reputation: 163

Position relative overlaps float:left -

http://klarbild.probiermau.ch/static/index.html

I have blue boxes floating left. i have one orange box - position: relative.

The Orange Box should be put inside the floating blue boxes, not overlapping them. So the blue boxes should be floating around the orange box.

Is this possible? Hints?

Edit: I want to be able to change the position of the orange box only by using css. The blue boxes should always float around the orange one. Without beeing "hidden" behind the orange box.

Thanks a Lot

Upvotes: 1

Views: 162

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Hint: change the position of orange box and float it to the right (without position : relative)

See this example fiddle: http://jsfiddle.net/4Bber/1/

Code: 

<div class="wrapper">
    <div>blue 1</div>
    <div>blue 2</div>
    <div>blue 3</div>
    <div>blue 4</div>
    <div>blue 5</div>
    <div>blue 6</div>
    <div id="orange"></div>
    <div>blue 7</div>
    <div>blue 8</div>
    <div>blue 9</div>
    <div>blue 10</div>
    <div>blue 11</div>
    <div>blue 12</div>
    <div>blue 13</div>
    <div>blue 14</div>
</div>

Css

.wrapper { width: 440px; }
.wrapper div { 
    width      : 100px; 
    height     : 100px;
    background : blue;
    float      : left; 
    margin     : 0 0 10px 10px; 
    color      : #fff;
 }

 #orange { 
    background : orange; 
    width      : 210px; 
    height     : 210px; 
    float      : right;
 }

Upvotes: 1

Related Questions