CODEWITHSUNDEEP
htmlcss
nabeel
nabeel

Reputation: 427

Floating a logo to left using only Css

I want to have my nav bar look like thisenter image description here

But so far this is what i've done so far, When I try to float the logo to the left the header background vanishes. I am so confused as to why is this happening?

*{margin: 0;padding: 0;}
img, fieldset{border: 0; }
img{vertical-align: middle}
h1,h2,h3,h4,h5,h6{font-weight: normal;}

.site-body, .site-header-outer, .site-header, .tag{
  width: 58.7em;
  margin:auto;
}

*{margin: 0;padding: 0;}
img, fieldset{border: 0; }
img{vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}

.site{
  width: 58.7em;
  margin:auto;
}

/*Header*/
.header{
  background-color:#3088f0;
}

.Logo{
  background-color: #f07a30;
  float: left;
  color: #ffffff;
}
<!DOCTYPE HTML5>    
<html>
  <head>
    <title>The Title</title>

    <link href="css/stylesheet.css" rel="stylesheet">
  </head>    
  <body>
    <div class="site">
      <h1>
        <div class="header">
          <div class="Logo">Vatpaints.tk</div>

        </div>
      </h1>    
      <div class="navigation"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </body>    
</html>

Upvotes: 0

Views: 1413

Answers (4)

ido
ido

Reputation: 56

When using overflow:hidden; also consider adding width: 100%;. For some browsers the solution without the width does not work.

Another solution to your problem is to clear the float. You can do this by adding an html element as last child of the container in which the elements are floated. Clear the float using inline CSS by adding style="clear: both;" as attribute to this last child, or better use a css class.

Using inline CSS

<div class="header">
    <div class="Logo">Vatpaints.tk</div>
    <div style="clear: left;"></div>
</div>

Using a CSS class

<style>
    .clear{
        clear: left;
        /* clear: right; */
        /* clear: both; */
    }
</style>

<div class="header">
    <div class="Logo">Vatpaints.tk</div>
    <div class="clear"></div>
</div>

Upvotes: 2

VCL_D
VCL_D

Reputation: 43

I think you need to set a width for your HEADER class div. You can set the witdth 100% or your arbitrary value, then you can manage the position of your logo.

Upvotes: 0

Mike Young
Mike Young

Reputation: 321

Because your header has not content and you have not given it a width. The only content it has is the logo which already has it's own bg color.

If you add in some text like how you would like it in the image you posted then you will be able to see the blue bg color for the header. Otherwise as there is no content in it and you have not set a width it will not display as it has nothing to display.

Upvotes: 0

isherwood
isherwood

Reputation: 61055

.header {
    ...
    overflow: hidden; /* or 'auto'; forces the element to contain the float */
}


* {
  margin: 0;
  padding: 0
}
img,
fieldset {
  border: 0
}
img {
  vertical-align: middle
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal
}
.site-body,
.site-header-outer,
.site-header,
.tag {
  width: 58.7em;
  margin: auto;
}
* {
  margin: 0;
  padding: 0
}
img,
fieldset {
  border: 0
}
img {
  vertical-align: middle
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal
}
.site {
  width: 58.7em;
  margin: auto;
}
/*Header*/

.header {
  background-color: #3088f0;
  overflow: hidden;
}
.Logo {
  background-color: #f07a30;
  float: left;
  color: #ffffff;
}
<div class="site">
  <h1>
        <div class="header">
            <div class="Logo">Vatpaints.tk</div>

        </div>
    </h1> 
  <div class="navigation"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

Upvotes: 0

Related Questions