CODEWITHSUNDEEP
htmlcss
kanjas
kanjas

Reputation: 73

Change margin of div positioned after video bug

My layout is this one:

I have it all working position wise.

The problem is when I want to margin my text inside my description container. Whenever I change it the div moves down slightly, and if I choose position absolute in the .contentDesc the div simply disappears. I take it it's because I have the video as the div before this one?

I am stating this as I tried float:left on my video and all goes wrong.

I tried padding top which works, but then the scroll doesn't keep the same height as the text.

My jsfiddle here

Code:

 <div class="Projectscontent">
    <div class="Contentimage"> d</div>
    <div class="footer"> </div>
    <div class="projectchooser"></div>
    <div class="videoP">
      <iframe src="https://player.vimeo.com/video/110053234"?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="ContentDesc">
      <div class="descP">
        <p class>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      </div>
    </div>
  </div>
 <div class="Projectscontent">
    <div class="Contentimage"> d</div>
    <div class="footer"> </div>
    <div class="projectchooser"></div>
    <div class="videoP">
      <iframe src="https://player.vimeo.com/video/110053234"?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="ContentDesc">
      <div class="descP">
        <p class>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      </div>
    </div>
  </div>

Upvotes: 1

Views: 36

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133370

In the jsfiddle you provided you have for descP this css

.descP {
  max-width:400px;
  max-height: 50px;
  margin:0 auto;
  line-height:20px;
  padding-top:10px;
  text-align: justify;
  overflow: scroll;
  overflow-x: hidden;
}

For your goal you have max-width: 400px; and margin 0 auto

The margin 0 mean top and bottom margin = 0 the auto mean equal left right margin depending of the width o text. The width of the text is 400px.

You are already margin the text inside your description container but if you don't like the actual margin change the the max-width value and leave margin auto. Or set left and right margin not setting max-width

Upvotes: 1

Related Questions