CODEWITHSUNDEEP
htmlcsspositionwidth
Edvinas
Edvinas

Reputation: 11

Image not in the right place[HTML/CSS]

I want that my image(near-logo.png) be in header-content div, which is in header div. Image at the moment is in the left side, but it has to be in the left side of header-content div. header div is 100% width, header-content div is 946px width.

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <div id="header">
            <div class="header_content">
                <img src="img/near-logo.png"/>
            </div>
        </div>
    </body>
</html>

body {
    margin:0;
    padding:0;
}
#header {
    background-color:#353C3E;
    height:80px;
    width:100%;
    position:relative;
}

.header-content {
    width:946px;
    position:absolute;
    margin:0 auto;
}

Upvotes: 1

Views: 560

Answers (3)

Danila Belov
Danila Belov

Reputation: 83

add 

.header_content {
    position:absolute;
    left: 0; top: 0;
}

Upvotes: 0

James
James

Reputation: 4580

The image is aligned to the left of the div header_content. The problem is the div class name in your html is header_content and the name you have used is header-content in your css.

The other thing is you have used position:absolute for header_content, so that the margin:0 auto won't get applied, so remove the absolute position. Use the below code

.header_content {
    width:946px;
    position:absolute; // Remove this line
    margin:0 auto;
}

Upvotes: 0

Zealot
Zealot

Reputation: 697

I see two problems:

First thing, you have a mistake in your CSS, your class in your div is <div class="header_content">but in your CSS it's .header-content.

Second thing, delete the position: absolute attribute if you want your header content centered.

Upvotes: 1

Related Questions