Text not wrapping, can't figure out why

HTML-CSS
1

Hello, my #main-doc text is not wrapping and I cannot figure out why. I’ve tried changing the position to sticky relative static and absolute but nothing seems to work. I have tried changing the display to block. I’ve tried adding height and width tags and setting them to auto. And I’m basically shooting in the dark now.

https://codepen.io/CRhea/pen/eYdPVVL

Can anyone assist with why? Thanks.

2

Hi there,

I’m honestly not quite sure. I did manage to get the text to wrap after taking all the images out of the html. But I’m confused about what’s happening with your html and your css.

  • You have multiple headers in your html. I think you’re confusing <header> with <h1>.

  • You have multiple width rules for the same element in your CSS.

It might be good to review this page about header and other html tags. When your html is set up, the CSS will go much smoother.

Hope this helps.

3

if you mean your text is not wrapping around the image.
we can sort this by giving your image tag class and use float on it eg
//.textwrap would be the name of the class
//margin to give space between the writings and the image
.textwrap{
float: left;
margin: 20px;
}
hope this helps…

4

I’m sorry I should have elaborated what I meant was when I shrink the window the text does not wrap itself causing the page to extend horizontally.

5

To elaborate when I say the text will not wrap I mean when I shrink and stretch the window.

  • I am using multiple headers to meet the user story requirements on the HTML technical documentation test
  • I have corrected that by removing the mi-width rule for both elements

I will see if there is any information in that page that applies to this.

6

Ah, I forgot about that requirement. I’m so used to just seeing one header at the top that contains the navbar.

7

Setting the whole #main-doc to position:fixed will lead to problems, you might have noticed that you can’t scroll down the page. I’d suggest to not set the position at all, and instead move it over to the right with

#main-doc {
  margin-left:300px;
}

Also, to make sure that the page isn’t overflowing to the right, add

img {
  width:100%;
}

And finally, to remove that gap between the red border and the right edge, remove the body margin:

body {
  margin:0;
}

That should give you a good start to work with.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.