0

I have used float and made 3 divs floated, left, right and center. Left one and right one have images, Where as center one has text in it. But, when the center div's text is overflowed, it's text is displayed below. For example, I have programmed my html file based on my laptop browser. I have used padding so that the text will be fit exactly in between those 2 images. But when I have opened the same html file in my mobile, which has less pixels, the text has been displayed in 2 lines.

Now, my problem is that, I want to make the text fixed in between those 2 images no matter in which device or browser the file is opened. How can I do that?

Here is my code:

<header>
    <div style="float:left;padding-left:24%">
      <img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
    </div>
    <div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
    <div style="float:center;padding-top:1%">
        <h1>Welcome to AHK Organization</h1>
    </div>
</header>

I do not have any fixed tags as of in: How can I make an element on a webpage fixed BUT relative to another element?

The solution over there says to fix the center and make left and right tags relative to the center tag. I don't want to fix any tag.

Community
  • 1
  • 1

1 Answers1

0

try this fiddle use display:inline-block rather than float

<header>
    <div style="display:inline-block;width:25%;">
      <img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
    </div>
    <div style="display:inline-block;width:44%;">
        <h1>Welcome to AHK Organization</h1>
    </div>
    <div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>
gurvinder372
  • 66,980
  • 10
  • 72
  • 94