CODEWITHSUNDEEP
csshtmlbackgroundbackground-color
mirhossein
mirhossein

Reputation: 737

html containers background issue

I have problem when I try to set a background to .header - nothing changes, please help, I am so confused.

HTML

<div class='container'>
    <div class='header'>
        <div class='logo'></div>
        <div class='search'>
            <form class="search" method='post'>
                <input type='text' name='text'>
                <input type='submit' value='search'>
            </form>
        </div>
        <div class='utility'></div>
    </div>
  </div> <!-- excuse me i forgot to type </div> here in the post -->

CSS file 

html {
    background: #62B0FF;
}

body {  
    text-align:left;
    font: 13px /1.5 arial,helvetica,tahoma;
    color: black;
}

/* i wanted to put 120px free space
   to see background
   but nothing is there */

.container {
    width: 960px;
    margin:0 auto;
}

.header {     
    margin-bottom: 20px;
    background: black;
}

.logo {     
    width: 220px;
    float: left;
}

.search {    
    float: right;
    text-align: right;
    width: 620px;
}

.utility {
    width: 500px;
    float: right;
}

Upvotes: 1

Views: 350

Answers (4)

My Head Hurts
My Head Hurts

Reputation: 37665

Try adding overflow: hidden to .header. If you are floating any child elements (input, .logo, .search etc) and then not clearing them, the .header element will not expand to fit the content.

So, the chances are that the background of the .header element is red, but you just cannot see it.

See these examples:

Float, no clear - shows the behaviour you are describing

http://jsfiddle.net/qrS3u/

Float, with clear - background is red

http://jsfiddle.net/qrS3u/1/

Edit

For more information about why this happens with floating elements and how to fix them, check out this CSS-Tricks article

Upvotes: 3

Jasp3r_
Jasp3r_

Reputation: 103

You could try changing your CSS from this:

.header {
    background-color: red;
}

to this:

.header {
    background: red;
}

Upvotes: 0

dku.rajkumar
dku.rajkumar

Reputation: 18568

you are just missing </div> . otherwise its just working fine.

check the Fiddle Example : http://jsfiddle.net/Znw7P/

Upvotes: 2

Tarandeep Gill
Tarandeep Gill

Reputation: 1536

You are missing one closing div ( "</div>" ) tag. That could be a factor.

Also, you need to wrap the CSS code in <style> tags. Instead of the last three lines, use this:

<style type="text/css" media="screen">
    .header {
             background-color: red;
               }
</style>

Upvotes: 0

Related Questions