CODEWITHSUNDEEP
css
Jon
Jon

Reputation: 6541

Float 3 divs around each other

Im a trying to create a css template where 3 text paragrahs interact with each other like this pic:

enter image description here

It will be repeated over hundreds of pages. All P1 Middle & P2 have differing lengths.

Basically

1) Middle starts a few lines down and is justified 2) each section would fill up the page, but give 1/3 of page to element if it has content. For example in the pic, where p2 is longer than middle, p2 takes half the page. And where it is longer than p1, p2 takes up the whole page.

I made a fiddle: http://jsfiddle.net/fVvxb/1/ with a non working image in place of Middle. It wraps nicely bewlow and to the side, but not over the top margin.

And Im a bit at a loss how to add P2 to the party

Any browser, any js framework would work

Upvotes: 1

Views: 415

Answers (5)

ScottS
ScottS

Reputation: 72281

With some additional markup, I think you can achieve your goal assuming:

  1. you know (or by javascript can calculate) the height of the MIDDLE, and
  2. if possible, keep your longest text in the second source ordered div (which may end up left or right at your choosing. If #2 is not possible, I'm sure there could be a way to modify the principles here to still make it work, but it would be easiest if the longer text could be always second in the source.

NOTE: at present I only have access to IE8 browser to test.

The fiddles are: left long http://jsfiddle.net/fVvxb/58/ and right long http://jsfiddle.net/fVvxb/59/.

Some further recommendations are to control it by container class. Minified code:

HTML:

<div class="wrapContainer right"> <!-- change class to left for left short column -->
<div id="p1"> <!-- floats the direction of wrapper's right or left class name -->
    <div class="positioner"></div>
    <img src="img.jpg" class="centerImg">
    <div class="padder">
       ...preferably short text always goes in first group... 
       ...if not, modifications to how this works will need to be made... 
    </div>
</div>
<div id="p2">
    <div class="positioner"></div>
    <div class="dummyImg"></div>
    <div class="padder">
       ...long text should always go here for this solution...          
    </div>
</div>
</div>

CSS

.left #p1 {
    float: left; 
    border: 1px solid blue; /* just for show */
    width: 50%; /* width is needed on this, but that limits it to not wrap below middle image, so this is why it should be applied to the shortest text only */
    margin-right: 10px; /* separating the two columns */
}
.left #p1 .centerImg {
    float: right; /* floated oppostie the p1 */
    clear: right; /* this clears the positioner div */
    margin: 0 -100px 0 10px; /* the negative margin is half picture width */
    width: 200px; 
    height: 99px;
 }

/* all the right version css is just a reversal of the left already explained */
.right #p1 {float: right; border: 1px solid blue; width: 50%; margin-left: 10px}
.right #p1 .centerImg {float: left; clear: left; margin: 0 10px 0 -100px; width: 200px; height: 99px;}

#p2 {border:1px solid red;}
.left #p2 .dummyImg { /* this is used to affect the p2 where the img is in p1 */
    float: left; 
    clear: right; /* both positioner divs are floated the opposite direction as the p1 */
    width: 100px; /* half the middle image width */
    height: 99px; /* this is why height of the middle (img) must be known */
    margin: 0 10px 0 -10px; /* this is just offseting and creating margins */
 }

.right #p2 .dummyImg {float: right; clear: left; width: 100px; height: 99px; margin: 0 -10px 0 10px;}

.left .positioner {
    float: right; /* floated oppostie the p1 */
    width: 0; /* this keeps it from interfering with the columns, letting the text flow above the middle image */
    height: 75px; /* this is the offset from the top for the middle image */
}
.right .positioner {float: left; width: 0; height: 75px;}
.padder {padding: 10px; /* give the text some breathing room */}

Upvotes: 0

Sid Malani
Sid Malani

Reputation: 2116

put P2 at the background and put P1 above P2 and then P3 above P2. So you just have to manipulate zindex of the div.

http://segment7.net/projects/web/z-index.html

Upvotes: 1

Kyle
Kyle

Reputation: 67244

To this with floats would be a headache. You should use positioning, an extra <p> and z-indexes to make this work:

HTML

<div id="wrap">
    <div id="p2">
      <p>  Lorem Ipsum...</p>
    </div>

    <div id="p1">
        Lorem Ipsum ...

    </div>

        <div id="middle">
            Lorem Ipsum...
        </div>

</div>

CSS:

#wrap
{
    border: 1px solid #000;
    width: 100%;
    position: absolute;
    height: 100%;
}

#p1
{
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    height: 95%;
    background-color: #f00;
    z-index: 2;
}

#p2
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0f0;
    z-index: 1;
}

#p2 p
{
    margin-left: 53%;
}

#middle
{
    position: absolute;
    top: 25%;
    left: 40%;
    background-color: #ddd;
    width: 200px;
    height: 200px;
    z-index: 3;
    overflow: hidden;
}

http://jsfiddle.net/AAvF4/

Upvotes: 1

ggzone
ggzone

Reputation: 3721

float P1 and P2 and position "middle" absolute over them

Upvotes: 0

Punit
Punit

Reputation: 1120

are you looking for something like http://jsfiddle.net/fVvxb/2/

Upvotes: 0

Related Questions