1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[CSS] Move articles on home page

Discussion in 'Web Design' started by dragosdydy, Jun 18, 2013.

  1. dragosdydy

    dragosdydy Junior Member

    Joined:
    Jan 23, 2012
    Messages:
    116
    Likes Received:
    49
    Location:
    Italy
    Hi all. I have a theme that have options to display 4 custom categories on the home page. But the categories articles are one under the other.
    The articles are one by one only if those are from the same category, but if i select to show only 1 article from the category, the articles will be one under the other.

    I tried a lot of things but i wasn't able to place two articles from different categories one by one. I will show you the example, website and the CSS source. Thanks a lot.

    Live Theme: http://leadrights.com/
    CSS File: http://pastebin.com/XQ9gKusK

    How it is now: http://i.imgur.com/1QiYVVX.jpg
    How i want to modify: http://i.imgur.com/sY7TinI.jpg

    Thanks a lot! :(
     
  2. WPRipper

    WPRipper Supreme Member

    Joined:
    Mar 24, 2010
    Messages:
    1,379
    Likes Received:
    1,493
    Location:
    Proudly romanian
    You have to give a width to that div and float left.
     
    • Thanks Thanks x 1
  3. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,364
    Likes Received:
    5,425
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    This should work dude.
    Code:
    div#content .list-cat-one, div#content .list-cat-two
    {
    width: 300px;
    }
    div#content .list-cat-one
    {
    float: left;
    }
    div#content .list-cat-two
    {
    float: right;
    }
    
    
    
     
    • Thanks Thanks x 1
  4. dragosdydy

    dragosdydy Junior Member

    Joined:
    Jan 23, 2012
    Messages:
    116
    Likes Received:
    49
    Location:
    Italy
    Thanks a lot, but i have a little issue, the above code almost done the job, but not entirely.
    look how it looks like: http://i.imgur.com/1UhI9JU.jpg

    Thanks a lot for your answers!