ansaurus

Question

Blueprint: Push column partially in to another column

Answer 1

+2 A:

Here's a different approach to the problem. It's downfall is that the pull-out content is duplicated (one to float left, one right).

http://jsbin.com/ewahu

EDIT

Alternate version using JQuery to duplicate the content of the pull into the spacer:

http://jsbin.com/uzawe

EDIT

Improved, cleaner and leaner version, using clone to duplicate the pull-out.

http://jsbin.com/ugaka

graphicdivine 2010-01-08 10:50:38

I'd be willing to settle for that if there's some JS to accompany it (jQuery to automatically duplicate the content in to the spacer).

sirlancelot 2010-01-11 23:41:29

That would be pretty easy to implement if that's how you want to do it. Personally I'd think it's more robust to keep it javascript-free.

graphicdivine 2010-01-12 19:17:54

I'm going for a sort of progressive enhancement. If they don't have JS enabled, then the column won't show up in the middle. It will simply show up to the side and be generally boring.

sirlancelot 2010-01-15 19:04:33

This is a great solution. I've pledged my support of it :)

sirlancelot 2010-01-15 19:17:47

Could I claim my bounty then, please?

graphicdivine 2010-02-02 11:36:54

Answer 2

A:

Are you able to use positioning to achieve this effect? If you have a fixed width it should be fairly easy to achieve.

<div id="container">
<div id="primary">
    <p>test</p>
    <p>test</p>
</div>
<div id="secondary">
    <p>test</p>
    <p>test</p>
</div>
<div id="tertiary">
    test
</div>

CSS

#container { position: relative; width: 200px; } #primary { position: absolute; top: 0; left: 0; width: 50%; background-color: red; } #secondary { position: absolute; top: 0; right: 0; width: 50%; background-color: blue }

#tertiary { position: relative; top: 0; margin: 0 auto; width: 50px; background-color: green; }

atxryan 2010-01-11 23:57:01

This will not allow the text to wrap around the middle column as shown here: http://jsbin.com/ewahu

sirlancelot 2010-01-12 00:25:44

Answer 3

A:

It doesn't seem that hard to modify the AListApart example to do this with just a little javascript so you don't need a fixed height:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
Cross-Column Pull-Out: Example 3
</title>
<style type="text/css">
* {margin:0;padding:0;}
p {padding:.625em 0; text-align:justify; line-height:20px;}
#overall {width:755px; margin:0 auto;}
.col {width:365px; padding:0 5px; float:left;}
.CCspace {width:175px; padding:5px; float:right;}
.CCpullout {width:350px; padding:5px; float:left; margin-left:-185px;}
.CCpullout span {width:350px; position: absolute; text-align:center; font-size:.9em; font-weight:bold;}
</style>
</head>
<body>
<!-- The Cross-Column Pull-Out technique was developed by Daniel M. Frommelt and Matthew Latzke from the University of Wisconsin - Platteville -->

<div id="overall">
    <h1>Example 3: Fixing the Pull-Out</h1>

    <div class="col">
        <span class="CCspace">&nbsp;</span>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.</p>
        <p>Praesent congue sagittis elit. Nullam sagittis tortor ut dui. Praesent tristique feugiat ligula. Quisque congue ante vel augue facilisis nonummy. Nulla auctor, purus id ullamcorper ultrices, justo metus venenatis odio, eu nonummy pede urna pretium tortor. Aliquam erat volutpat. Nullam ante. Aenean feugiat. Etiam lacinia dolor sagittis nunc. Maecenas nibh risus, suscipit vel, elementum vitae, posuere et, purus. Vivamus ipsum nunc, mattis non, gravida ut, tempor et, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sem. Integer accumsan mi sed metus porta volutpat. Duis sollicitudin enim at diam. Donec ultrices sem aliquam ante ullamcorper placerat.</p>
    </div>
    <div class="col">
        <span class="CCpullout"><span><img src="http://www.alistapart.com/d/crosscolumn/monkey.jpg" alt="" /></span>And then some more text<br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.</span>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tristique arcu vitae dui. Ut tempus wisi eget urna. Nullam laoreet scelerisque felis. Aliquam turpis libero, iaculis nec, porta nec, condimentum The office monkey, riding the office camel.  sit amet, dolor. Proin cursus orci eu purus. In quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan, augue vitae vehicula viverra, risus velit consequat nunc, ut molestie erat risus non dui. Morbi placerat leo. Maecenas iaculis elit at eros. Cras sem. Phasellus augue.</p>

        <p>Integer molestie eros et urna. Aenean egestas lectus ac mi. Etiam semper lectus at ipsum. Nunc cursus wisi eget urna. Donec pretium tristique sapien. Integer ligula nunc, malesuada gravida, posuere luctus, semper sit amet, nunc. Cras sagittis blandit urna. Nunc eu arcu sed magna vestibulum dictum. Fusce pretium interdum risus. Praesent bibendum lacinia sem. Aliquam erat volutpat.</p>
        <p>Nunc arcu. Ut faucibus purus in risus. Morbi sem. Nunc consequat, sem a suscipit scelerisque, leo tortor sollicitudin nibh, quis vehicula turpis nibh et lorem. Fusce facilisis semper felis. Cras quis magna. In hac habitasse platea dictumst. Etiam quam nisl, bibendum et, tincidunt vel, tristique sed, eros. Cras laoreet. Etiam nisl eros, luctus nec, eleifend vitae, aliquam id, sapien.</p>
    </div>
    <script>
        var pullout = document.getElementsByClassName('CCpullout')[0];
        var spacer = document.getElementsByClassName('CCspace')[0];
        spacer.style.height = pullout.offsetHeight + 'px';
    </script>
</div>

</body>
</html>

The only thing I did was remove the fixed heights (you could put in min-height if wanted but it doesn't matter much) and add a small script at the earliest possible point to minimize any visible movement as the page rendered.

Rob Van Dam 2010-01-14 07:50:48

Answer 4

A:

Just use this style

 #Main
 {
     width: 950px;
     height: auto;
     padding: 0px;
     margin: 0px;
 }
 #Top
 {
     width: 950px;
     height: 100px; /* you can use ato or whatever else */
 }
 #Bottom
 {
     width: 950px;
     height: 100px; /* you can use ato or whatever else */
 }
 #TLeft, #TMiddle, #TRight
 {
     display: inline-block; /* this is neceesarybecause we use span */
     border: solid 1px black;
     width: 310px;
     height: 100px; /* you can use ato or whatever else */
     vertical-align: top;
 }
 #TLeft
 {
     float: left;
 }
 #TMiddle
 {
     float: none;
 }
 #TRight
 {
     float: right;
 }/* note that You can use all of them as float:left or, float:right */
 #BLeft, #BRight
 {
     display: inline-block; /* this is neceesarybecause we use span */
     border: solid 1px black;
     width: 445px;
     height: 100px; /* you can use ato or whatever else */
     vertical-align: top;
 }
 #BLeft
 {
     float: left;
 }
 #BRight
 {
     float: right;
 }/* note that You can use all of them as float:left or, float:right */

 <div id="Main">
      <div id="Top">
           <span id="TLeft">
                 TopLeft
           </span>
           <span id="TMiddle">
                 TopMiddle
           </span>
           <span id="TRight">
                 TopRight
           </span>
      </div>
      <div id="Bottom">
           <span id="BLeft">
                 BottomLeft
           </span>
           <span id="BRight">
                 BottomLeft
           </span>
      </div>
 </div>

just note that you can change the width for gaining better alignment.

Nasser Hadjloo 2010-01-17 06:58:07

ansaurus

tags:

views:

answers:

Blueprint: Push column partially in to another column

related questions