Fixing text that is pushed left from floating image on the right

HTML & CSS
1

Hi guys,

I’m trying to sort out a fairly simple website for my work. I’m trying to figure out the best way to line a few images up, by floating them to the right in my header. However, whenever I do that, it seems to push the text that is supposed to be centered on my page to the left. I’ve tried to adjust margins/padding but haven’t been able to figure it out.

Is there a way to make the images technically behind the text, and then maybe it wouldn’t effect the text at all? Here is the part where I’m having the issue in my HTML…

    <header>
        Business Name<br />
                              <p id="headerP">
                                  Business Address
                                  <img src="pictures/igicon.png" alt="Our Instagram Page" class="icon" />
                                  <img src="pictures/fbicon.png" alt="Our Facebook Page" class="icon" />
                              </p>


    </header>

Here is my CSS…

#headerP {
    text-align: center;
    font-family: "Book Antiqua", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: white;
    font-size: 18px;
}
.icon{
    height: 52px;
    width: 52px;
    float: right;
    border: 2px;
    border-style: solid;
    border-color: white;
}

Any help on figuring this out would be greatly appreciated.

2

They could be behind if they were made into background images. But if they are content they should be actual images.
One way to stop them interfering with the alignment is to take them out of the flow with absolute positioning. I’m not usually an advocate of using absolute positioning in most cases. But I think here we can get away with it being just small icons.
You probably should reorganise the structure of the html too.

I’m not sure the exact layout you want, but this is based on the code you supplied.

3

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