CODEWITHSUNDEEP
htmlcss
Desiigner
Desiigner

Reputation: 2336

Text goes beyond a div's border while changing window size

The problem is I have a div surrounded by a border that contains a picture and some text. When I'm changing the size of the browser window everything remains as it was except for text. It goes beyond the border. The same with videos. How to fix it?

HTML:

<div class='banners wow fadeInLeft'>
        <a href='https://link' target='_blank'>
          <img id='left-img' src="images/1.jpeg" alt="Picture" title="Picture">
        </a>
        <p id='right-txt'>
         Advanced extended doubtful he he blessing together. Introduced far law gay considered frequently entreaties difficulty. Eat him four are rich nor calm. By an packages rejoiced exercise. To ought on am marry rooms doubt music. Mention entered an through company as. Up arrived no painful between. It declared is prospect an insisted pleasure. 

Same an quit most an. Admitting an mr disposing sportsmen. Tried on cause no spoil arise plate. Longer ladies valley get esteem use led six. Middletons resolution advantages expression themselves partiality so me at. West none hope if sing oh sent tell is. <br>
              <a href="https://ru.wikipedia.org/wiki/link"
              target="_blank">
                <img id='wiki' class='div-logos' src="images/wiki-logo.png" alt="Wikipedia" title='Go to Wiki'>
              </a>
            </p>
          </div>

CSS:

.banners {
border: 3px solid black;
height: 220px;
margin: 20px;
margin-right: 55%;
}

#left-img {
  width: 27%;
  padding: 10px;
}

#right-txt {
  width: 70%;
  float: right;
}


#wiki {
  float: right;
  padding-right: 5px;
}

How to fix it?

Upvotes: 0

Views: 901

Answers (4)

Ali Rouaki
Ali Rouaki

Reputation: 65

basically you want to make your div responsive, try to use @media rule

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

1- width and height of the viewport

2- width and height of the device

3-orientation (is the tablet/phone in landscape or portrait mode?) resolution

try to change the size of your text and your videos with the media queries technique, do some research about the media rule css to make your layout responsive.

Upvotes: 1

MajiD
MajiD

Reputation: 2585

change white-space to normal

#mydiv {
    white-space: normal;
    border: 3px solid black;
    height: 220px;
    margin: 20px;
    margin-right: 55%;
}

Upvotes: 0

trav
trav

Reputation: 376

You could add the property of "word-break" to contain the text no matter the width.

#mydiv {
border: 3px solid black;
height: 220px;
margin: 20px;
margin-right: 55%;
word-break:break-word;
}

Upvotes: 0

Jim
Jim

Reputation: 7

You could use flexbox to fix the issue. I believe it looks like this

.div-container {
  display: flex;
  flex-wrap: wrap;
}

Upvotes: 0

Related Questions