4 Replies - 197 Views - Last Post: 02 November 2015 - 03:26 PM

#1 rshah  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 35
  • Joined: 21-October 15

Div next to image in list splits into different lines

Posted 02 November 2015 - 02:31 PM

So i'm creating a 'twitter'-like feed, and I have an image (avatar) next to the content of the feed.

Now when I type normal text it appears kind of fine, but when using my div it splits into different divs, looking like separate li elements!

Here is my code:

http://jsfiddle.net/Lfpxgtnn/
Is This A Good Question/Topic? 0
  • +

Replies To: Div next to image in list splits into different lines

#2 NormR  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 228
  • View blog
  • Posts: 1,544
  • Joined: 25-December 13

Re: Div next to image in list splits into different lines

Posted 02 November 2015 - 02:37 PM

Is this a java programming problem? div sounds like javascript which is another language.

This post has been edited by NormR: 02 November 2015 - 02:37 PM

Was This Post Helpful? 0
  • +
  • -

#3 rshah  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 35
  • Joined: 21-October 15

Re: Div next to image in list splits into different lines

Posted 02 November 2015 - 02:39 PM

Oh crap! Haha my mistake, so tired today!
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Speak up, I'm wearing a towel
  • member icon

Reputation: 5232
  • View blog
  • Posts: 20,241
  • Joined: 12-December 12

Re: Div next to image in list splits into different lines

Posted 02 November 2015 - 03:22 PM

You should post relevant code directly here and not just as a fiddle.

Were you building and testing this in stages? In which case, at what point did it start to go wrong?

If not, start with a simple, textual ul list, then start to add content to the first li, modifying the CSS as you progress.

You have a number of properties that can be problematic, alone or together: absolute positioning and specified heights spring to mind. Setting display: flex on the a element in particular has a significant impact. This property is creates a flex container and is not normally applied to an a-tag, partly because everything within the flexbox will be part of the link. But you don't do anything other than setting the flex container in any case.



Question moved to HTML/CSS forum as currently this has nothing to do with Javascript (or Java).

This post has been edited by andrewsw: 02 November 2015 - 03:23 PM

Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1078
  • View blog
  • Posts: 3,933
  • Joined: 15-January 14

Re: Div next to image in list splits into different lines

Posted 02 November 2015 - 03:26 PM

You also have things like nested <a> tags, block elements inside inline elements, etc. All of these things combine to cause problems.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1