0

I'm still quite new to CSS, so please forgive me if this is obvious, but I have this html:

<html>
    <head>
    <!-- external includes -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <!-- local includes -->
        <link rel="stylesheet" href="{% static 'css/site.css' %}">
        <title>gAnttlr</title>
    </head>
    <body>
        <div class="page-header fixed-div">
            <img src ="{%static 'svg/antler3.svg'%}" class="antler-icon fit-div" alt="Medium sized antler">
            <h1>gAnttlr</h1> 
        </div>
    </body>
</html>

I'm using django template-y stuff, if it helps pretend src ="{%static 'svg/antler3.svg'%}" is src ="/svg/antler3.svg"

And my relevant css is:

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}
.page-header img{
  float: left;
  width: 100%;
  height: 100%;
}
.page-header h1 {
  position: relative;
}
img .fit-div{
    width: 100%;
    max-height: 100%;
    display:inline;
}

div.fixed-div{
    height:110px;
}

But instead of this example from here, I have this:

snip of my broken website

Here the logo and the h1 tag just don't want to share the header div! I think it's because somewhere I've got some css saying "Grab the whole width of the page!!!1" but I can't see it.

Can someone help spot why these two won't share?

Community
  • 1
  • 1
AncientSwordRage
  • 7,086
  • 19
  • 90
  • 173

2 Answers2

1

The problem is that your image have 100% of width and occupies all your header

Set your image width with auto or give the right dimensions 

.page-header img {
    float: left;
    height: 100%;
    width: auto;
}

It will be good that you make display: inline-block at H1 to not occupies all your header too.

.page-header h1 {
  position: relative;
  display: inline-block;
}
Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
1

Depending on what your general design is (is it responsive?) this might be a bad solution but.. Try to change the page-header h1 to

.page-header h1 {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
}

Doing so you can change the position using absolute coordinates and the h1 will not influence your logo. Beware all h1 elements in page-header class divs will be affected.

Steak Overflow
  • 7,041
  • 1
  • 37
  • 59