CODEWITHSUNDEEP
htmlcss
0TTT0
0TTT0

Reputation: 1322

Img float affecting centering

I am trying to add a back button to my page, I put it in the top left corner and it is floating.

But since I added it in the centering of track-image has been affected, it is pushed over 3 rem, the width of the floating back button.

HTML

  <body>  
    <a href="entry.html" style="display: inline-block; float: left;">
      <img src="backArrow.png" style="width:3rem; margin: .5rem; float: left">
    </a>
    <div id="track">
      <img id="track-image" src="track.png">
      <p id="track-fraud"> Track Fraud </p><br>
    </div>
  </body>

CSS

#track {
    text-align: center; 
}

#track-fraud {
    font-size: 3rem;
    margin: 0;
}

#track-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 10rem;
}

Upvotes: 0

Views: 77

Answers (2)

bl0cklevel
bl0cklevel

Reputation: 151

You could use position: absolute on the button which will take it out of the document flow, so it will no longer push the other content over. https://jsfiddle.net/7frLasx5/

#track {
   text-align: center; 
}

.track-back {
  position: absolute;
  left: 10px;
}

#track-fraud {
    font-size: 3rem;
    margin: 0;
}

#track-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 10rem;
}

Upvotes: 0

user3919071
user3919071

Reputation: 11

As a general rule, I suggest you avoid float, as it comes with weird implications for the rest of the page.

Still, trying it on jsFiddle, float works in your context : 

.topContainer{
  background-color:black;
  width:90%;
  text-align:center;
  padding:20px;
}

.backButton{
  float:left;
  width:30px;
  height:30px;
  background-color:red;
}

.centerImage{
  background-color:blue;
  width:200px;
  height:30px;
}

.topElement{
  display:inline-block;
}
<div class="topContainer">
  <div class="backButton topElement"></div>
  <div class="centerImage topElement">
    TrackFraud
  </div>
</div>

Maybe you should add "display:inline-block" to the elements of your top bar?

Upvotes: 1

Related Questions