0

I would like to add a tweetline widget to my page, at the right side of the about section. Although I achieve it, it has an strage behavior since sometimes it works perfectly:

And sometimes, just when I save the .css and .html file it looks like this:

Any idea of why this is happening and how to fix the aforementioned issue?. This is the CSS:

        #about {
            padding:40px 20px;
            overflow:hidden;
        }

        .twitter-timeline, .timeline-section {
            float:left;
        }
        /* Timeline Section */
        .timeline-section {
            width:490px;
            padding-right:60px;
        }

        .timeline {
            margin-bottom: 30px;
        }
        .timeline li {
            margin-bottom:20px;
        }
        .timeline li .timelineUnit {
            line-height:17px;
            margin-left:0px;
            color: #444;
            font-size:13px;
            border-left:1px solid /*mainColor*/#000000;
            padding-left:15px;
        }
        .timeline li .timelineUnit .timelineDate {
            line-height:17px;
            color:/*mainColor*/#000000;
            font-size:14px;
            margin-left:10px;
            font-weight: normal;
            padding:2px 6px;
            float:right;
        }
        .timeline li .timelineUnit h4 {
            line-height:24px;
            font-size:15px;
            color: #444;
        }
        .timeline li .timelineUnit h5 {
            line-height:18px;
            font-size:13px;
            color: #999;
        }
        .timeline li .timelineUnit p {
            color: #666;
            font-size:12px;
            margin-top:5px;
        }
john doe
  • 2,085
  • 6
  • 35
  • 54

1 Answers1

1

If you post the entirety of that pages code I can better customize my answer but this should just be an issue of defining the width and using floats to arrange your content. I gave your .timeline-section a max-width: 50% and float: left and the .twitter-timeline I gave a max-width: 50% and float: right. It works in the below fiddle. Let me know if you still have an issue.

https://jsfiddle.net/o7sxoton/1/

*****UPDATED*****

Thanks for updating your question. Forgive the crude design of the fiddle but I wanted you to see how the elements are lining up. What was pushing your twitter element down was the section element. By applying a max-width: 60% to the #about id we are telling that entire container to not go past 60% of the viewport (no need to add it to the timeline section class unless you want that element smaller than the actual section tag) allowing space for your twitter element to float properly on the right. I also added a display: inline-block to that element so it would eventually line up with the twitter element.

Secondly I gave the twitter-timeline element a max-width: 30% (feel free to adjust these values as you see fit and remember to account for your padding in the calculation) floated that element right and also applied a display: inline-block. I just gave the element a set height, width, and background color so you could see its now aligned to the right of your main column. I hope this answers your question.

see the updated fiddle below https://jsfiddle.net/kdec97vr/1/

gwar9
  • 1,052
  • 1
  • 12
  • 26
  • Thanks for the help, Its a quite large section of code, for that reason I did not was able to put it on the question. I am still having issues with the tweetline I updated the status of the question – john doe Jun 01 '16 at 16:53
  • 1
    @johndoe I noticed when I put together the fiddle you were missing a closing div before the closing section tag that could cause problems. Also don't forget to apply the max-width property to the #about id and to the twitter-timeline class. If you are still having issues could you provide a link to your site? – gwar9 Jun 01 '16 at 19:14
  • Thanks for the help gwar, I am still having problems with my site. The problem is that since I am building it I am not able to provide you a link. Any idea of how can I share you the code in order to show you what happen?. – john doe Jun 02 '16 at 02:10
  • I tried to move a little bit down as [follows](https://jsfiddle.net/asdsadassadasdanon/kdec97vr/2/) – john doe Jun 02 '16 at 03:25
  • 1
    @johndoe the float works, was there a reason you wrapped the twitter link/script in a p tag? If you get rid of that it works. – gwar9 Jun 02 '16 at 13:22
  • Thanks for the help!, I tried a different approach. I updated the status of the question, although it worked I have a weird behaviour with the html and css – john doe Jun 02 '16 at 22:33
  • 1
    @john doe is your console throwing any errors? F12 on your keyboard – gwar9 Jun 02 '16 at 22:41
  • I check fire bug's console and I got this: `carouFredSel: the touchwipe-plugin is DEPRECATED, support for it will be removed. Use the touchSwipe-plugin instead.` – john doe Jun 02 '16 at 22:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113683/discussion-between-john-doe-and-gwar9). – john doe Jun 02 '16 at 22:45