Home/ Questions/Q 9120993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:45:27+00:00

I have a problem with positioning logo and title divs. Logo works fine but

  • 0

I have a problem with positioning logo and title divs. Logo works fine but the title div doesn’t position where exactly I want. Its positioned becomes relevant to logo instead of header content div.

Thanks in advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style>
    *
    {
        margin:0px;
        padding:0px;
    }

    #header_wrap
    {
        float: left;
        width: 100%;
        height: 150px;
        background: #dddddd;
    }

    #header_content
    {
        width: 850px;
        height: 150px;
        margin: 0 auto 0;
        background: #cccccc;
    }

    #logo
    {
        width: 50px;
        height: 50px;
        background: #ffffff;
        position: relative;
        left: 10px;
        top: 50px;
    }

    #title
    {
        width: 100px;
        height: 50px;
        background: #ffffff;
        position: relative;
        left: 100px;
        top: 10px;
    }
    </style>
</head>

<body>

    <div id="header_wrap">
        <div id="header_content">
            <div id="logo">LOGO</div>
            <div id="title">TITLE</div>
        </div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    position:relative; will change the position of an element with respect to its original position:

    relative

    The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position.

    You want to use position:absolute in order to change the position of an element with respect to the next parent which position isn’t static:

    #logo, #title{
    position: absolute;
}

#header_content{
    position: relative;
}

    Keep in mind that this will remove your elements of the content flow, so you might need to apply a height on #header_content.

    See also:

    • 0