CODEWITHSUNDEEP
htmlcss
Caleb
Caleb

Reputation: 489

How can I get my css border to wrap all the way around my html code?

I am having an issue with a border all the way around my HTML text using CSS.

How can I get the border to go around the text completely instead of going through the text?

My HTML and CSS code is the following:

.header2 {
    position: relative;
    float: left;
    height: 75px;
    width: 1250px;
    background-color:white;
    left: 50px;
    top: 45px;
    margin-top: none;
    word-spacing: 25px;
    font-size: 14;
    border: 1px solid black;
    
}
<div class = "header2">  
   <h1>News</h1>
   <h2>
       <a href="#" class="H"><span>Home</span></a> 
       <a href="#" class="N"><span>Caronavirus</span></a>
       <a href="#" class="S"><span>Video</span></a> 
       <a href="#" class="R"><span>World</span></a>
       <a href="#" class="W"><span>US Canada</span></a> 
       <a href="#" class="T"><span>Uk</span></a> 
       <a href="#" class="F"><span>Business</span></a>
       <a href="#" class="C"><span>Tech</span></a> 
       <a href="#" class="M"><span>Science</span></a>
       <a href="#" class="M"><span>Stories</span></a>
       <a href="#" class="M"><span>More</span></a>
   </h2>
</div>



The results are the border interrupting the text at the bottom, rather than wrapping around it.

html css code 1]

Upvotes: 0

Views: 259

Answers (2)

Johannes
Johannes

Reputation: 67768

You defined height as 75px, which simply isn't high enough, i.e. higher than the contents. Change that to auto to automatically adjust the height (and with it the border) to the contents:

.header2 {
    position: relative;
    float: left;
    height: auto;
    width: 1250px;
    background-color:white;
    left: 50px;
    top: 45px;
    margin-top: none;
    word-spacing: 25px;
    font-size: 14;
    border: 1px solid black;

}
<div class = "header2">  
         <h1>News</h1>
         <h2>
             <a href="#" class="H"><span>Home</span></a> 
             <a href="#" class="N"><span>Caronavirus</span></a>
             <a href="#" class="S"><span>Video</span></a> 
             <a href="#" class="R"><span>World</span></a>
             <a href="#" class="W"><span>US Canada</span></a> 
             <a href="#" class="T"><span>Uk</span></a> 
             <a href="#" class="F"><span>Business</span></a>
             <a href="#" class="C"><span>Tech</span></a> 
             <a href="#" class="M"><span>Science</span></a>
             <a href="#" class="M"><span>Stories</span></a>
             <a href="#" class="M"><span>More</span></a>
         </h2>
</div>

Upvotes: 1

Aidan
Aidan

Reputation: 1

The problem is the height of your header div is an absolute value (px) and 75px is shorter than your links.

You can fix the border going through the links by increasing the height of the header class.

For example:

.header2 {
  position: relative;
  float: left;
  height: 120px;
  width: 1250px;
  background-color: white;
  left: 50px;
  top: 45px;
  margin-top: none;
  word-spacing: 25px;
  font-size: 14;
  border: 1px solid black;
}

Upvotes: 0

Related Questions