2

I am having trouble with my CSS.

I have attached 2 images. The first one shows the height of the div set to 110px and you can see the height is set correctly compared to the image next to it and it shows a scroll bar.

Now I want to change the height of the div so that it's height is 100% (level with the picture) and it will show a scroll bar because the text doesn't fit. Instead, as you can see in the second screenshot, the text goes past the height of the picture.

How can I get the div to be the same height as the image so then the scroll bar will appear?

<section class="slideInRight">
    <div class="wrap">
        <img src="img/slide1.png" class="alignright size-75">
        <div class="alignleft size-20 scrollText">
            <p>In this course, we’re focussing on three main areas.</p>
            <p><strong>The Software Development Lifecycle</strong><br />
                This is essential in understanding how development teams work within IT. Questions around the software
                development life cycle will pop up in interviews so it’s essential to grasp the knowledge around this
                area.</p>
            <p><strong>IT Support and Testing</strong><br />
                These two areas are perfect to step into an IT career and progress further. They start off non-technical
                so anyone can make a start in it and then you can decide if you want to progress to a more technical
                role or branch out to different areas in IT.</p>
        </div>
    </div>
</section>

Here is my css:

.scrollText{
    font-size:medium;
    overflow: auto;
    height: 80%;
}

enter image description here

u

Viral
  • 935
  • 1
  • 9
  • 22
BruceyBandit
  • 3,978
  • 19
  • 72
  • 144

2 Answers2

0

I think you should take a look at some of these solutions and see if one of them fits your case.

You should try changing the value of height in your styling to actual number instead of a percentage, and see if that has any effect on presentation. Solutions above have exact values for height and seem to work that way.

And here is a solution that deals with image in div specifically:

Evgenii Klepilin
  • 695
  • 1
  • 8
  • 21
0

To level the div with picture give height to image same as div

Charanpreet Singh
  • 1
  • 2