Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text runaround text across two columns - possible?

    In some layouts a text quote is done as an insert box to the left. This is not difficult to do within a single text column, but what about in a 3 column layout where the insert is to occupy all of the left column and part of the middle column? An example is here in the very bold, quoted inserts to the left (the first is about 10 paragraphs down):
    http://www.nytimes.com/2013/09/29/ma...tion.html?_r=0
    I can't spot from the css (or javascript) files how they have done it and can't find a way to do it myself. Can it be done with CSS?

    G

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    They did it with these 2 stylesheets
    <link rel="stylesheet" href="http://css.nyt.com/projects/assets/softshell/softshell.v1-5073c9896efc975c63ae46cdd3c087b4.css" />
    <link rel="stylesheet" href="http://graphics8.nytimes.com/packages/css/multimedia/bundles/projects/2013/FictionMagDeploy.css" />

    You will find there:
    Code:
    div.nytmm-ss-target p.quote.left {
        float: left;
        margin: 0 30px 30px 0;
    }
    div.nytmm-ss-target p.quote {
        font-weight: 700;
    }
    div.nytmm-ss-target p.quote {
        color: #000000;
        font-family: "CircularBlack",Helvetica,Arial,sans-serif;
        font-size: 25px;
        line-height: 31px;
    }
    div.nytmm-ss-target p.quote {
        color: #000000;
        display: inline;
        font: 600 28px/36px "nyt-cheltenham",georgia,"times new roman",times,serif;
        margin: 0;
        text-align: left;
        width: 336px;
    }
    When you want to find something on a webpage, use Firebug.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot for looking at that, Dznr. I did use browser tools to look at the css. However, I did not find that I could take the styling for those elements and achieve the same result. That is why I asked here.

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    It can be done with CSS in a 3 columns.
    You need a div with an id and z-index in column 1, and use for text next to the insert in column 2, a div with padding-left. This is the old fashion way.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •