Images in header go below each other if the resolution is small (or you resize the browser a little)

Question

So, i'm making this page: http://www.fasade-petek.si/

The header has 3 images (logo, text, facebook) - this is inside :

<div id="FB_GPlus_logo">
    <a href="http://www.facebook.com/5ekdoo" target="_blank">
        <img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
    </a>
</div>
<div id="logo">
    <a href="index.html"><img src="img/logo.png" height="80" width="214"></img></a>
    <a href="storitve.html"><img src="img/Napis.png" height="80" width="448"></img></a>
</div>

logo and text (image) are positioned using margins, facebook is float:right.

#FB_GPlus_logo {
float: right; /* add this */
position: relative;
padding-top: 35px;
}

#logo {
/* border: 1px solid #FF0004; */
/* Na sredino */
display: table;
margin: 0 auto;
overflow: hidden; /* if you don't want #second to wrap below #first */
padding-right: 170px;
}

#logo a {
padding-right: 250px;
}

Everything looks good if you have widescreen, but if you resize a window a little, the logo and text will go under each other, what is the best way to fix this? I would be happy if it would just stay where they are and you would have to scroll (left and right), or is there any better way to fix this? I'm sure the header would look bad if you would be viewing it on a mobile too (portrait).

What i wanted to do is:

• Text (image) should be in the center of the header
• Logo should be a little to the left of the text (image) (like 200px to the left of the logo)
• Facebook logo should be on the right

Answer 1

Basically, you want the logo between the left corner and the text image. To achieve perfect symmetry, you need to change your markup. Change the html to this :

<div id="logo">
    <a href="index.html"><img src="img/logo.png" height="80" width="214"></img></a>
    <a href="storitve.html"><img src="img/Napis.png" height="80" width="448"></img></a>
<div id="FB_GPlus_logo">
    <a href="http://www.facebook.com/5ekdoo" target="_blank">
        <img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
    </a>
</div>
</div>

Now select all the elements inside the #logo div and make them all float left and with a proportional width

#logo > a, FB_GPLUS_logo {
float : left;
width:33%;
min-height:80px;
text-align:center;
}

This should create three divs with a width of 33% thereby almost occupying the header and all the content in the divs will be center aligned. As a last point, because all the elements are floats you may need to apply this '.clearfix' class to the parent div in which all theses three divs reside.

.clearfix:after {
content :'';
clear:both;
display:block;
}