2

I have 2 threads in an imageboard stacked on top of each other, each thread has some text and an image file.

I want images to be always on right of the thread, instead of being on top of reply button.

When I float image to right by float: right; the images keep stacking on top of each other instead and form a branch like structure

How do I force images with post-image class to not break <div> structure of following thread and stay on right of screen?

<div class="you" id="thread_27" data-board="b" align="Right"> <div class="files"> <div class="file"> <p class="fileinfo">File: <a href="/b/src/1454704253855.jpg">1454704253855.jpg</a> <span class="unimportant">(78.69 KB, 1024x768, <span class="postfilename">soft-color-background.jpg</span>)</span> </p> <a href="/b/src/1454704253855.jpg" target="_blank"><img class="post-image" src="/b/thumb/1454704253855.png" style="width: 255px; height: 192px; max-width: 98%;" alt=""></a> </div> </div> <div class="post op" id="op_27"> <p class="intro"> <input class="delete" name="delete_27" id="delete_27" type="checkbox"> <label for="delete_27"><span class="name">Anonymous (You)</span> <time data-local="true" datetime="2016-02-05T20:30:54Z">02/05/16 (Fri) 22:30:54</time> </label>&nbsp;<a class="post_no" id="post_no_27" onclick="highlightReply(27)" href="/b/res/27.html#27">No.</a><a class="post_no" onclick="citeReply(27)" href="/b/res/27.html#q27">27</a><a href="/b/res/27.html">[Reply]</a></p> <div class="body">xxxxxx2</div> </div> <br class="clear"> <hr> </div> <div class="you" id="thread_26" data-board="b" align="Right"> <div class="files"> <div class="file"> <p class="fileinfo">File: <a href="/b/src/1454704190918.jpg">1454704190918.jpg</a> <span class="unimportant">(157.33 KB, 1024x768, <span class="postfilename" title="mac-style-presentation-background.jpg">mac-style-presentation-bac….jpg</span>)</span> </p> <a href="/b/src/1454704190918.jpg" target="_blank"><img class="post-image" src="/b/thumb/1454704190918.png" style="width: 255px; height: 192px; max-width: 98%;" alt=""></a> </div> </div> <div class="post op" id="op_26"> <p class="intro"> <input class="delete" name="delete_26" id="delete_26" type="checkbox"> <label for="delete_26"><span class="name">Anonymous (You)</span> <time data-local="true" datetime="2016-02-05T20:29:51Z">02/05/16 (Fri) 22:29:51</time> </label>&nbsp;<a class="post_no" id="post_no_26" onclick="highlightReply(26)" href="/b/res/26.html#26">No.</a><a class="post_no" onclick="citeReply(26)" href="/b/res/26.html#q26">26</a><a href="/b/res/26.html">[Reply]</a></p> <div class="body">xxxxx</div> </div> <br class="clear"> <hr> </div>

when I add CSS

.post-image { float: right; }

it breaks everything.

jsfiddle before

js fiddle after floating post-image to the right

Improve this question
1
  • .you {clear:right} Commented Feb 5, 2016 at 21:38

3 Answers 3

Reset to default
2

This happens because of float left or right. clear controls the float behavior hence, the ideal way is to make all the float properties inside a container usually div. Sometimes, browser renders it differently so whenever coming to a new container or sibling, ideal way is to clear the float(if you don't need the floating property). In your code you could probably

Add this:

.clear{ clear:both; }

to better understand. Also don't forget to play with it to put it ideally where it is required.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

If that doesn't entirely solve your problem check margin and line-height stuff. It should be fixed with a clear afterwards, but does break in some older browsers from time to time.
1

If you can use flexbox (no way to old browsers) try something like:

.row{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; } .col1{ position: relative; flex: 1 1 100%; align-self: stretch; overflow: hidden; } .col2{ position: relative; display: flex; flex-direction: column; flex: 0 1 45px; align-self: stretch; }

on a html strukture like

<div class="row"> <div class="col1"> </div> <div class="col2"> </div> </div>
Improve this answer

Comments

0

Add one more div with "clear: both" styling will fix your problem.

<div class="file"> your code here... <div style="clear:both"></div> </div>

jsfiddle

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.