CODEWITHSUNDEEP
htmlcss
Vitalii Maximov
Vitalii Maximov

Reputation: 27

Html Absolute positioning

I have div, which position is set to absolute. Also I have couple paragraphs inside of it. When I move right side of explorer to the left, the paragraphs move with it and try to adjust to size of window. I tried to position them absolutely, but them still move. How can I set that div or paragraphs inside it, so they remain on the same spot? Please... Here is the code:

HTML: 

<div id="search_slogan" > <!-- search_slogan Slogan--> 
    <p style="font-size: 26px; ">  Free Business Name Search </p>
    <p style="font-family:gothic; "> Enter any potential business name.
        We'll let you know if the company name is available for use in your state, </p>
    <p style="font-family:gothic; "> usually within 1 business day. </p>
</div> <!-- END search_slogan Slogan-->

CSS:

#search_slogan{
    line-height: 15%;
    position: absolute;
    top: 150px;
    left: 200px;
    font-family:basic_gothic;
    font-size: 18px;
}

Upvotes: 0

Views: 78

Answers (2)

Ian Hazzard
Ian Hazzard

Reputation: 7771

The problem was your line:height property, that was set to 15%. That will cause letters to pile up. I cleanen up your HTML and created a JSFIDDLE HERE.

Upvotes: 0

Tom Prats
Tom Prats

Reputation: 7931

Your problem might be that your box has no set width, so it fills the space remaining.

Add a set width like below and it won't move anymore.

#search_slogan{
  line-height: 15%;
  position: absolute;
  top: 150px;
  left: 200px;
  width: 400px;
  font-family:basic_gothic;
  font-size: 18px;
}

There are additional solutions with things like hiding the overflow, but setting the width is the simplest.

Upvotes: 2

Related Questions