Question

Could anyone explain what is going wrong with my html design

<div id="container">
<div id="profile" style="width:200px;float:left;margin-top:20px">
<img src="./profilepic.jpg"  width="190px" height="220px"/>
</div>
<div id="intro" style="width:420px;margin-left:15px;margin-top:30px">
<h3 style="background-color:#000000">Profile  </h3> 
</div> 
</div>

The problem is The div tag (#profile wrapper) is increasing its margin top, if i increase #intro wrapper’s margin-top its so frustrating trying from long time,why does it getting increased if i increase #intro margin top ? and also the back ground color of < h3 > tag is starting from the above of the picture even though i use float but the text of the < h3 > tag works right, I dont undertand why im getting these behavior

I have set width:420 px for #intro and the width is starting from the extreme left side of tha page but not from the start of the < h3 >tag i.e from the word profile ? why does it apply background-color from the left most of the page but not from the current position ?

and working fine if i use unordered list < ul > tag instead of div . Please let me know your answers why its giving wrong>

Answer 1

It looks like you’re trying to get two elements to be next to each other with different top margins.

CSS

.container {
    clear: left;
    width: 635px;
}
.left,
.right {
    float: left;
}
.left {
    width: 200px;
    margin-top: 20px;
    margin-right: 15px;
}
.right {
    width: 420px;
    margin-top: 30px;
}
h3 {
    background-color: #000;
}

HTML

<div class="container">
    <div class="left">
        <img src="/profilepic.jpg" />
    </div><!-- /left -->

    <div class="right">
        <h3>Profile</h3>
    </div><!-- /right -->
</div><!-- /container -->