0

How do I make the rose pictures (see image below) on the right, [id="right-column"] not extend beyond the content [id="left-column"]? Note that the height of the content is not fixed.

* Sample Code *

<div>

    <div id="left-column" style="width:70%; float: left;">
        <p>Content goes in here.</p>
    </div>

    <div id="right-column" style="width:20%;  float: right;">
        <!-- add images go in here -->
    </div>

    <div id="bottom-bar"></div>

</div>

* Sample screenshot of ad overflow (ads are rose images right) *

Ad overflow

Michael Lafayette
  • 2,972
  • 3
  • 20
  • 54
  • 1
    Can you give a code example that uses display:table-cell such that the right column has more content then the left column, but is made to have a scroll bar so that it appears to be the same vertical length? – Michael Lafayette Dec 27 '15 at 16:27
  • Please, at least try for yourself for more than 2.5 minutes to interpret the answers to the other question and solve your problem with the new information (and there are dozens of other similar questions with answers too!). If you would not be able to solve your problem after a significant period of trying and researching, ask a new question, and don't forget to include the results of your experiments, and the relevant part of the code that needs styling. – GolezTrol Dec 27 '15 at 16:29
  • Alright, alright. I'll try using "display: table-cell;" and "overflow: scroll;" and see if it gives the right result. – Michael Lafayette Dec 27 '15 at 16:39
  • 1
    Also you have to provide some code what have you tried or you will prolly get downvoted like this time. – Nenad Vracar Dec 27 '15 at 16:40
  • @NenadVracar - like I said, not using fixed heights [the amount of content - announcements and what not - in the left div changes]. – Michael Lafayette Dec 27 '15 at 16:41
  • The source code doesn't really matter - it's just two divs with a horizontal bar above the two divs and a horizontal bar below the two divs. But fine. – Michael Lafayette Dec 27 '15 at 16:42
  • Well it does matter, that is why you got downvoted, also cut down on text and put some picture instead – Nenad Vracar Dec 27 '15 at 16:44
  • 3
    I disagree with this post having been closed. The question was not specifically answered in the linked post. – Steve Harris Dec 27 '15 at 17:00
  • 1
    CSS: #divMain { display: block; position: relative; width: 100%; padding: 0px; margin: 0px; } #divContent { display: block; width: 75%; } #divAds { display: block; position: absolute; width: 25%; top: 0px; bottom: 0px; right: 0px; overflow: hidden; } HTML:
    ...
    ...
    – Steve Harris Dec 27 '15 at 17:01
  • Try this https://jsfiddle.net/2Lzo9vfc/429/ or this https://jsfiddle.net/2Lzo9vfc/430/ – Nenad Vracar Dec 27 '15 at 17:27

1 Answers1

-2

You can use a style like - 

#right-column{
   overflow : hidden;
   width : 20%;
}

If I understand your problem then it will help you.

Sajeeb Ahamed
  • 6,070
  • 2
  • 21
  • 30