Hello as you can probably tell I just started CSS have absolutely nearly no idea what I'm doing only know the syntax and how to control elements as for which commands should I use on the elements to do what I want to do I have no idea.

My problem atm isn't really a problem if the users website loads very fast. As it resizes itself based on ad being loaded but it doesn't resize itself based on logo being loaded which in most cases loads before the ad and messes up the design.

I'll show you a screenshot what I mean Resize problem

Here is the CSS code I use for that

#header
{
    padding: 0.5em;
    margin: 1em;
    background: #FFF;
    border: 1px solid #000;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
}
#logo
{
    margin: 0;
    float: left;
    font-size: 1em;
    margin-left: 1em;
    margin-right: 5em;
}
#logo IMG
{
    display: block;
}

and here is the HTML Code

<body onbeforeunload = "leaveChat();">
    <div id="header">
        <h1 id="logo"><a href="http://<?php echo $home_url ?>"><img src="static/logo.png" alt="<?php echo $title ?>" width="171" height="60"></a></h1>
            <center>
            <?php include("ad.html"); ?>
            </center>
            <div id="onlinecount"></div>
    </div>
//snipped out tons of crap
</body>

Thanks for helping out, sorry for bugging you guys with so much questions I don't know where else to turn it's not as easy to mess with CSS as it is for PHP/HTML/Javascript

2 answers

Doug 1095
0
points

Your #logo has an inherent height thanks to the image it contains, but you've floated it out of the #header, allowing the header to collapse. There are various methods to force the #header to expand to contain the #logo, but the easiest is probably to add float:left to the `#header as well.

Keep in mind that this may cause other problems as your header will be floated out of its parent. You may have to take additional steps to keep any later elements from shifting up or to maintain the margins on the header. But try it and see what happens. This should give your header a height while waiting on the other elements to load.

Some problems can be fixed through the judicious use of clear:both, by floating parent or other elements, or by specifying widths of floated elements. In general, you should always specify a width for your floated elements. A width of 100% on the floated #header will probably head off any other problems.

If you find that you just can't make it work with a floated header, try adding overflow:auto to the #header.

Answered over 8 years ago by Doug
Tony B 86
0
points

it looks like a float "issue". You can fix it a few ways including a gangster fix known as a clearfix. Since you are floating your #logo and not giving #header a height the box does not "expand" until something that has an actual height and isn't floated is loaded in the same container; in this case your ad. I use the following CSS to fix these kinds of issues:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

With that in your CSS, apply the class "clearfix" to every container that will enclose a floated element. There is also an even more gangster way to fix things by adding <div style="clear:both;"></div> right before the closing tag of the container that is having the expansion issue. See if this stuff helps.

Answered over 8 years ago by Tony B
  • Just to clarify, to use Tony B's method, you will have to add the "clearfix" class to your #header div. IMO, though, while this is a well-tested and widely used method, it always seemed heavy-handed to me, and I've always been able to solve the problem without resorting to this. YMMV. Doug over 8 years ago