Question

I want to set layout something like

What i thought that i will have to set some thing like this

Means main div, and on the top of main div, i have other divs. I used something like this

<div id="headerImage" >

        <div id="help_About">               
            <a href="#">Help</a>
            <a href="#">About</a>                                           
        </div>

        <div id="myLogout">               
            <input type="text" value="Basit" />
            <a href="#">Logout</a>                                                          
        </div>

        <div id="myImage">
            <img width="20" height="20" src="resources/images/tools_icon.png" /> 
        </div>

        <img src="resources/images/2b.jpg"/>

    </div>

    #headerImage{ 
        border-style :solid;
        border-width: thin;
        width: 100%;
        height: 20%;           
        background: url(${imgUrl}/2b.jpg) no-repeat top left;            
        padding: 0px;
        border-top: 0px;
        border-bottom: 5px #eeeeee solid;
        z-index: 1;
    }

    #headerImage #help_About{ 
        margin-left: 10%
        margin-top: 2%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

    #headerImage #myLogout{ 
        margin-left: 30%
        margin-top: 4%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

    #headerImage #myImage{ 
        margin-right: 10%
        margin-top: 4%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

I just gave the border style and width and height for physical appearance. But then i am getting something like this

what i am doing wrong? How can i set the layout of my divs?

Thanks

Answer 1

Try this – http://jsfiddle.net/SQwFK/

HTML

<header>
    <div id="left"></div>

    <div id="rightTop"></div>
    <div id="rightBottom"></div>
</header>

CSS

    header {
    background: url(http://lorempixel.com/600/300);
    height: 300px;
    width: 600px;
    position: relative;
}

#left {
    position: absolute;
    top: 100px;
    left: 50px;
    background: #ffe;
    height: 100px;
    width: 250px;
}

#rightTop, #rightBottom {
    position: absolute;
    right: 50px;
    top: 25px;
    background: #fef;
    height: 100px;
    width: 100px;
}

#rightBottom {
    top: 175px;
}

New EDIT
—————————————————————————-

Working

<div id="headerImage" >
....
</div>
<div id="menuBodyContainer" >
    <div id="menu">
    </div>
    <div id="myBody">
    </div>  
</div>

Now i tried with your code like

  #headerImage{ 
        position: absolute;
        border-style :solid;
        border-width: thin;
        width: 100%;
        height: 20%;           
        background: url(${imgUrl}/2b.jpg) no-repeat top left;            
        padding: 0px;
        border-top: 0px;
        border-bottom: 5px #eeeeee solid;
        z-index: 1;            
    }

    #headerImage #help_About{ 
        position: absolute;
        display: inline-block;
        top: 4%;
        left: 4%;
        opacity:0.4;
        z-index: 2;            
    }

    #headerImage #myLogout{ 
        position: absolute;
        display: inline-block;
        right: 50px;
        top: 25px;
        z-index: 2;           
    }

    #headerImage #myImage{
        position: absolute;
        top: 2%;
        right: 2%;
        z-index: 2;           
    }

This is working.

But i have another problem now. As you can see i set the #help_About and #myLogout {display:inline-block}. But #help_About making a big square. Also i want that the white square don’t show. It appears that the elements in the div are actually on the image. Same for #myLogout. I set display to inlne-block but they are appearing on two different lines, i want then inline and also it is showing white square as a background i don’t want it. How can i do it? If i set transparency then it set the transparency of whole div including elements not just div. tThanks

Now what ?