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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to position my tumblr posts side by side?

    I would like some help fixing a simple problem on my tumblr based Portfolio website.

    My website is [www.ellekorhaliller.co.uk][1]

    I would like to change the layout so that I can position my posts side by side. For instance instead of having just the single column of posts, I would like there to be a row of 2 posts and below that another row of two posts and so forth.

    I'm sure this is a very easy matter to fix but it would be much appreciated if someone could point me in the right direction of what CSS I need to change.

    Please see below for code.

    Elle

    Code:
    <html>
    <head>
        <title>Elle Korhaliller - Fashion Stylist</title
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
    <link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>
    
    
    
    <!--
                                                  
     .d8888b.  888b     d888 8888888b.  888      
    d88P  Y88b 8888b   d8888 888   Y88b 888      
    Y88b.      88888b.d88888 888    888 888      
     "Y888b.   888Y88888P888 888   d88P 888      
        "Y88b. 888 Y888P 888 8888888P"  888      
          "888 888  Y8P  888 888        888      
    Y88b  d88P 888   "   888 888        888      
     "Y8888P"  888       888 888        88888888 
    
    Disassemble 3.0 Theme for Tumblr by Georgia Harris
    www.smpldesign.co.uk
    
    -->
    
    <!-- DEFAULT COLORS -->
            <meta name="color:Background" content="#ffffff"/>
            <meta name="color:Text" content="#000000"/>
            <meta name="color:Video Corner Fold" content="red">
            <meta name="font:Font" content="'BrownBold'">
            <meta name="if:Show Captions" content="0"/>
            <meta name="if:Uppercase Links" content="0">
            <meta name="if:Fade On Hover" content="0">
            <meta name="if:Show Tags on Index Page" content="0">
    
    <style type="text/css">
    body {
    background-color:#ffffff;
    font-family:'BrownBold', 'Muli', sans-serif;
    color:#000000;
    font-size:16px;
    line-height:25px;
    }
    
    a { 
    padding-bottom:2px;
    color:#000000;
    text-decoration:none;
    
    }
    img {
    border: none;
    border : 0;
    outline:none;
        width: 500px;
        height: auto;
    
    max-width: 50%
    
    }
    a img {
    outline: none;
    }
    iframe#tumblr_controls {  
    display:none;
    
    
    }
    
    
    #header {
        position: fixed;
        background-color: #ffffff;
        padding-bottom:1cm;
     
        z-index:5000;
        width:100%;
        top: 0px;
    left:0px;
    margin: 0px auto;
    height: 40px;
        
    }
    
    #wrapper {
    margin: 50px auto auto auto; 
    width: 1000px;
    max-width: 100%
    height: auto;
    
    
    }
    #post {
    padding:20px 0 0 0;
    width:100% !important;
    
       position:relative !important;
       font-size:14px;
    
    }
    #post img {
        width: 50%;
        height: auto;
    
    
    
    }
    #post img:hover {
    
    
    
    }
    #post embed, #post iframe {
    width:100% !important;
    }
    #post .photoset a:first-child {
    
    }
    #post .photoset a {
    display:none;
    }
    .title {
    width:100%;
    text-align:center;
    margin:auto;
    position:fixed;
    top:20px;
    z-index:5000;
    }
    .follow {
    position:fixed;
    top:20px;
    right:20px;
    z-index:5000;
    }
    
    
        
    .archive {
    position:fixed;
    top:20px;
    left:20px;
    z-index:5000;
    }
    .message {
    position:fixed;
    bottom:20px;
    left:20px;
    z-index:5000;
    }
    .random {
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:5000;
    }
    #toTop {
    width:100%;
    text-align:center;
    margin:auto;
    z-index:5000;
    position:fixed;
    display:none;
    bottom:20px;
    cursor:pointer;
    }
    
    #page-nav {
        z-index:5000; !important
    position:fixed;
    margin-left: auto;
        margin-right: auto;
        text-align:center;
        text-decoration: none !important ;
        padding: 30px;
    }
        
    .player {
    background:#000;
    width: 1000px;
    max-width: 100%
    height: auto;
    }
    ul.chat {
    list-style-type:none;
    width: 1000px;
    max-width: 100%
    height: auto;
    
    }
    #infscr-loading {
    display:none !important;
    }
    
    .corner {
    top:6px;
    right:40px;
    position:absolute;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    overflow:hidden;
    z-index:4000;
    
    }
    .corner:before {
    content:"";
    position:absolute;
    top:0px;
    right:0px;
    border-width:0 25px 25px 0;
    border-style:solid;
    border-color:#fff #fff red red;
    background:#fff;
    display:block; width:0; /* Firefox 3.0 damage limitation */
    }
    
    .contentcolumn{
    margin:auto;
    width: 100%;
    
    </style>
    
    
    
    <script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
    
    
    <script type="text/javascript">
    $(function() {
        $(window).scroll(function() {
            if($(this).scrollTop() != 0) {
                $('#toTop').fadeIn();    
            } else {
                $('#toTop').fadeOut();
            }
    	});
    	$('#toTop').click(function() {
    		$('body,html').animate({scrollTop:0},800);
    	});	
    });
    </script>
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36376336-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    </head>
    
    <body>
    
    {block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
    <div id="header">
    
    <div class="title"><a href="/"><a style="border-bottom-style: solid; border-bottom-width: 2px">{Title}</u></a></div>
    <div class="archive"><a href="http://www.ellekorhalillerweb.tumblr.com/information">Information</a></div>
    <div class="follow">{block:PermalinkPage}{block:Posts} {/block:Posts}{/block:PermalinkPage}<a href="http://www.ellekorhalillerweb.tumblr.com/contact">Contact</a></div></div>
        
    
    <div class="message"><a href="http://www.ellekorhalillerweb.tumblr.com">Editorial</a></div>
    <div class="random"><a href="http://www.ellekorhalillercommercial.tumblr.com">Commercial</a></div>
    <div id="toTop">Back to top</div>
    {block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}
    
    <div id="wrapper">
    <div class="contentcolumn">
    {block:Posts}
    <div id="post" 
    
    {block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
    > 
    
    {block:Text}
    {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
    {Body}
    {/block:Text}
    
    {block:Link}
    <a href="{URL}" class="link" {Target}>{Name}</a>
    {block:Description}<div class="description">{Description}</div>{/block:Description}
    {/block:Link}
                    
    {block:Quote}
    <a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
    {block:Source}
    <p>&mdash; {Source}</p>
    {/block:Source}
    {/block:Quote}
    <center>
    {block:Photo}
    {block:IndexPage}<a href="{Permalink}"><div style="border:none"><img src="{PhotoURL-HighRes}"  alt="{PhotoAlt}" border="0"align="center"/></div></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Photo}
    </center>
    {block:Chat}
    {block:Title}<h2>{Title}</h2>{/block:Title}
    <ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
    {/block:Chat}
    
    {block:Video}
    {block:IndexPage}<a href="{Permalink}"><div class="corner"></div></a>{/block:IndexPage}
    <div id="video"> 
    {Video-500}
    </div>
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Video}
    
    {block:Photoset}
    {block:IndexPage}<div class="photoset">{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-HighRes}" align="center"></a>{/block:Photos}</div>{/block:IndexPage}
    {block:PermalinkPage}{/block:PermalinkPage}
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Photoset}
             
    {block:Audio}
    {block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}"></a>{/block:AlbumArt}
    <div class="player">{AudioPlayerBlack}</div>
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Audio}
             
    {block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}
             
    </div></div>
    {/block:Posts}
    
    {block:NextPage}<div id="page-nav"><a href="{NextPage}">↓</a>{/block:NextPage}
    
    </div>
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    At the moment on http://www.ellekorhaliller.co.uk/, I do not see any posts. Just images side by side and on the left. According to code posted here, page "wrapper" is set to 1000px and the "contentcolumn" is 100%. The "post" selector is set to 100%. The actual source code on your page is not matching what you have here.

    For a two column layout, you can float one div left and one right with the right CSS rules controlling how you want it to look.

    Have you looked at this theme?: http://www.tumblr.com/theme/35249
    Last edited by Major Payne; 09-06-2013 at 04:28 PM.
    ☠ ☠RON☠ ☠

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Ron,

    Thanks very much for your response.

    I apologise that the codes don't match.. I have been fiddling around with the code since I posted this yesterday which is why they aren't matching.

    I have added my most recent code now at the bottom of this post.

    The images you see on my website are tumblr posts, I have just simply posted an image instead of text.
    I don't think I am able to simple float left and right two divs as you suggested because the tumblr posts are just one feed if you know what I mean?

    I am actually already using the theme that you suggested- disassemble 3.0 but which obviously has two columns but I wanted a layout that had equal spacing between columns and rows and the dissassemble theme is more of a jumbled layout. Is there any easy way to make them in line? If there is, I can just copy the original code from the theme.

    If not, please do look at my up to date code below if you can see somewhere where I am going wrong and blocking this from allowing a two column layout.

    Thanks,

    Elle.

    Code:
    <html>
    <head>
        <title>Elle Korhaliller - Fashion Stylist</title
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
    <link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>
    
    
    
    <!--
                                                  
     .d8888b.  888b     d888 8888888b.  888      
    d88P  Y88b 8888b   d8888 888   Y88b 888      
    Y88b.      88888b.d88888 888    888 888      
     "Y888b.   888Y88888P888 888   d88P 888      
        "Y88b. 888 Y888P 888 8888888P"  888      
          "888 888  Y8P  888 888        888      
    Y88b  d88P 888   "   888 888        888      
     "Y8888P"  888       888 888        88888888 
    
    Disassemble 3.0 Theme for Tumblr by Georgia Harris
    www.smpldesign.co.uk
    
    -->
    
    <!-- DEFAULT COLORS -->
            <meta name="color:Background" content="#ffffff"/>
            <meta name="color:Text" content="#000000"/>
            <meta name="color:Video Corner Fold" content="red">
            <meta name="font:Font" content="'BrownBold'">
            <meta name="if:Show Captions" content="0"/>
            <meta name="if:Uppercase Links" content="0">
            <meta name="if:Fade On Hover" content="0">
            <meta name="if:Show Tags on Index Page" content="0">
    
    <style type="text/css">
    body {
    background-color:#ffffff;
    font-family:'BrownBold', 'Muli', sans-serif;
    color:#000000;
    font-size:16px;
    line-height:25px;
    }
    
    a { 
    padding-bottom:2px;
    color:#000000;
    text-decoration:none;
    
    }
    img {
    border: none;
    border : 0;
    outline:none;
        width: 450px;
        height: auto;
    
    
    }
    a img {
    outline: none;
    }
    iframe#tumblr_controls {  
    display:none;
    
    
    }
    
    
    #header {
        position: fixed;
        background-color: #ffffff;
        padding-bottom:1cm;
     
        z-index:5000;
        width:100%;
        top: 0px;
    left:0px;
    margin: 0px auto;
    height: 40px;
        
    }
    
    #wrapper {
    margin-top: 50px; 
        width:50%;
    
    
    height: auto;
    
    
    }
    #post {
    padding:20px 0 0 0;
    width:450px !important;
       position:relative !important;
       font-size:14px;
    
    }
    #post img {
        height: auto;
        width:450px !important;
        
    
    
    
    }
    #post img:hover {
    
    
    
    }
    #post embed, #post iframe {
    
    }
    #post .photoset a:first-child {
    
    }
    #post .photoset a {
    display:none;
    }
    .title {
    width:100%;
    text-align:center;
    margin:auto;
    position:fixed;
    top:20px;
    z-index:5000;
    }
    .follow {
    position:fixed;
    top:20px;
    right:20px;
    z-index:5000;
    }
    
    
        
    .archive {
    position:fixed;
    top:20px;
    left:20px;
    z-index:5000;
    }
    .message {
    position:fixed;
    bottom:20px;
    left:20px;
    z-index:5000;
    }
    .random {
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:5000;
    }
    #toTop {
    width:100%;
    text-align:center;
    margin:auto;
    z-index:5000;
    position:fixed;
    display:none;
    bottom:20px;
    cursor:pointer;
    }
    
    #page-nav {
        z-index:5000; !important
    position:fixed;
    margin-left: auto;
        margin-right: auto;
        text-align:center;
        text-decoration: none !important ;
        padding: 30px;
    }
        
    .player {
    background:#000;
    width: 1000px;
    max-width: 100%
    height: auto;
    }
    ul.chat {
    list-style-type:none;
    width: 1000px;
    max-width: 100%
    height: auto;
    
    }
    #infscr-loading {
    display:none !important;
    }
    
    .corner {
    top:6px;
    right:40px;
    position:absolute;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    overflow:hidden;
    z-index:4000;
    
    }
    .corner:before {
    content:"";
    position:absolute;
    top:0px;
    right:0px;
    border-width:0 25px 25px 0;
    border-style:solid;
    border-color:#fff #fff red red;
    background:#fff;
    display:block; width:0; /* Firefox 3.0 damage limitation */
    }
    
    
    </style>
    
    
    
    <script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
    
    
    <script type="text/javascript">
    $(function() {
        $(window).scroll(function() {
            if($(this).scrollTop() != 0) {
                $('#toTop').fadeIn();    
            } else {
                $('#toTop').fadeOut();
            }
    	});
    	$('#toTop').click(function() {
    		$('body,html').animate({scrollTop:0},800);
    	});	
    });
    </script>
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36376336-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    </head>
    
    <body>
    
    {block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
    <div id="header">
    
    <div class="title"><a href="/"><a style="border-bottom-style: solid; border-bottom-width: 2px">{Title}</u></a></div>
    <div class="archive"><a href="http://www.ellekorhalillerweb.tumblr.com/information">Information</a></div>
    <div class="follow">{block:PermalinkPage}{block:Posts} {/block:Posts}{/block:PermalinkPage}<a href="http://www.ellekorhalillerweb.tumblr.com/contact">Contact</a></div></div>
        
    
    <div class="message"><a href="http://www.ellekorhalillerweb.tumblr.com">Editorial</a></div>
    <div class="random"><a href="http://www.ellekorhalillercommercial.tumblr.com">Commercial</a></div>
    <div id="toTop">Back to top</div>
    {block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}
    
    <div id="wrapper">
    {block:Posts}
    <div id="post" 
    
    {block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
    > 
    
    {block:Text}
    {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
    {Body}
    {/block:Text}
    
    {block:Link}
    <a href="{URL}" class="link" {Target}>{Name}</a>
    {block:Description}<div class="description">{Description}</div>{/block:Description}
    {/block:Link}
                    
    {block:Quote}
    <a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
    {block:Source}
    <p>&mdash; {Source}</p>
    {/block:Source}
    {/block:Quote}
    
    {block:Photo}
    {block:IndexPage}
    <a href="{Permalink}"><div style="border:none"><img src="{PhotoURL-HighRes}"  alt="{PhotoAlt}" border="0" width="450px"/></div></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-450}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Photo}
    
    {block:Chat}
    {block:Title}<h2>{Title}</h2>{/block:Title}
    <ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
    {/block:Chat}
    
    {block:Video}
    {block:IndexPage}<a href="{Permalink}"><div class="corner"></div></a>{/block:IndexPage}
    <div id="video"> 
    {Video-500}
    </div>
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Video}
    
    {block:Photoset}
    {block:IndexPage}<div class="photoset">{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-HighRes}" align="center"></a>{/block:Photos}</div>{/block:IndexPage}
    {block:PermalinkPage}{/block:PermalinkPage}
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Photoset}
             
    {block:Audio}
    {block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}"></a>{/block:AlbumArt}
    <div class="player">{AudioPlayerBlack}</div>
    {block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
    {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
    {/block:Audio}
             
    {block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{/block:Date}{/block:PermalinkPage}
             
    </div></div>
    {/block:Posts}
    
    {block:NextPage}<div id="page-nav"><a href="{NextPage}">↓</a>{/block:NextPage}
    
    </div>
    
    </body>
    </html>


  •  

    Posting Permissions

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