having some trouble with css positioning

Question

I have am trying to make something like this.

so, basically here is my HTML code:

<div class="container">
        <div id ="header">
                <img class= "header-img" src ="img/header-img.jpg">

            <div class="header-logo">
                <img class = "logo" src="img/logo.png">
            </div>

            <div class = "header-nav">
                <img class = "rectangle" src="img/rectangle.png">

                <ul>
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Contact</li>
                    <li>Protofilo</li>
                </ul>
            </div>
        </div>
    </div>

And here goes the CSS, I thought the float should be working but its not.

*{
margin:0px; padding:0px;}

.container{
margin:0 auto;}

#header{
width:100%;}

.header-img{
width:100%;}

.header-logo{
margin:0 auto;width:307px;height:95px;
position:absolute;float:left;top: 0px;}

.header-nav {
 position:absolute;
 top: 0px; float:right;width:846px;
}

the float is not working. help me anyone?

Answer 1

I would go about it differently, as you are using some conflicting styles and missing quite a few.

.container{
    margin:0 auto;
}

You're trying to place your items in the container, but it will not contain those items, as there is no type of "clear" on your floats either and the height auto won't function that way.

Here is a basic fiddle with a very basic solution to a similar layout you are requesting.

http://jsfiddle.net/t71fm3nm/

Answer 2

You don't need the position: absolute in there because it's interfering with your float properties. There's a bunch of things that need to be adjusted for this to look the way you want it to, and to make things more manageable:

1) Remove both instances of position: absolute, they're not necessary and aren't helping.

2) Move your background image from HTML into CSS, find out how tall you want it to be and set your height in the #header selector. This allows you to move the divs you've laid on top of #header much easier.

3) I see you're trying to apply margin: 0 auto to .header-logo. Are you trying to center the logo image? But at the same time you're also setting it to float: left, which negates the margin: 0 auto declaration.

4) You've declared .header-img in your CSS but no class exists within your HTML.

5) You're using an image of a rectangle to get a transparent rectangle for your .header-nav class, but you will probably find it easier to just declare the size of the rectangle on .header-nav and set the background color with an opacity using RGBA.

Here's the revised HTML:

        <div class="container">

        <div id ="header">

            <div class="header-logo">
                <img class = "logo" src="img/logo.png">
            </div>

            <div class = "header-nav">
                <ul>
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Contact</li>
                    <li>Protofilo</li>
                </ul>
            </div>

        </div>

    </div>

Here's the revised CSS:

    * {
    margin: 0px;
    padding: 0px;
    }
.container {
    margin: 0 auto;
    }
#header {
    background: url(img/header-img.jpg);
    width: 100%;
    height: 200px; /*change to desired height of background image*/
    }
.header-img {
    width: 100%;
    }
.header-logo {
    width: 307px;
    height: 95px;
    float: left;
    top: 0px;
    }
.header-nav {
    top: 0px;
    float: right;
    width: 846px;
    height: 30px; /*change to desired height*/
    background: rgba(33, 33, 33, 0.7);
    }