html: div messed up

Question

The html file is

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title>Patients Detailed Information Page</title>
<link  href="test.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
    <div id="detailed_div_image">
    </div>
    <div id="detailed_div_basicinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Basic Info</strong></div>
            <div>
                <table id="detailed_table_basicinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Birthday</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="detailed_div_contactinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Contact Info</strong></div>
            <div>
                <table id="detailed_table_contactinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Address</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="detailed_div_reminding">
    <textarea id="detailed_reminding"></textarea>
    <input type="button" class="button" value="update"></input>
</div>

</div>

</body>
</html>

and this is my css file:

body{
margin:0;
padding:0;
}

#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}

#detailed_fistpart {
margin-top: 10px;
}

#detailed_image {
width: 200px;
height: 200px;
}

#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

.detailed_div_captain {
font-size: 20px;
height: 40px;
}

#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

.detailed_table_td {
border-bottom: 1px solid #efefef;
}

#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

#detailed_div_reminding {
width: 900px;
}

#detailed_reminding {
width: 700px;
height: 70px;
}

.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}

And when I use firebug (the extension), I can see that it is the div with id=detailed_div_reminding includes the div with id=detailed_div_basicinfo and div with id=detailed_div_contactinfo rather than the div with id=detailed_fistpart.

One problem is that if you add magin-top: 20px to #detailed_div_reminding, it doesn't produces margin with #detailed_fistpart

Why?

@1337holiday you can see the problem using firebug. And one problem with this is if you add `margin-top: 20px` to the div#detailed_div_reminding. it is not as expected — Cacheing, Apr 14 '13 at 05:44
so you basically want 3 columns? basic_info, contact_info and a form? — 1337holiday, Apr 14 '13 at 05:51

score 2 · Accepted Answer · answered Apr 14 '13 at 05:56

2

hi there u need to add this line <div style="clear:both"></div>

before this line of code <div id="detailed_div_reminding">

answered Apr 14 '13 at 05:56

Afsar

3,104
2
25
35

this is amazing. can you tell me what happened here? – Cacheing Apr 14 '13 at 05:57
i think you need to give a look at this http://www.w3schools.com/cssref/pr_class_clear.asp and you can also take a look at this http://stackoverflow.com/questions/1012131/what-is-the-use-of-style-clearboth – Afsar Apr 14 '13 at 06:00
Do not post w3schools link here in SO and get a downvote.. :) – PSL Apr 14 '13 at 06:09

score 1 · Answer 2 · answered Apr 14 '13 at 06:00

Did you mean that you are not getting the margin on top of your last section? It is because you have floats present and and you need to clear them for subsequent section.

<!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">
<head>
<title>Patients Detailed Information Page</title>
<link  href="test.css" rel="stylesheet" />
<style>
body{
margin:0;
padding:0;
}

#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}

#detailed_fistpart {
margin-top: 10px;
}

#detailed_image {
width: 200px;
height: 200px;
}

#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

.detailed_div_captain {
font-size: 20px;
height: 40px;
}

#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

.detailed_table_td {
border-bottom: 1px solid #efefef;
}

#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}

#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}

#detailed_div_reminding {
width: 900px;
margin-top:20px;
}

#detailed_reminding {
width: 700px;
height: 70px;
}

.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
    <div id="detailed_div_image">
    </div>
    <div id="detailed_div_basicinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Basic Info</strong></div>
            <div>
                <table id="detailed_table_basicinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Birthday</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div id="detailed_div_contactinfo">
        <div class="detailed_div_inner">
            <div class="detailed_div_captain"><strong>Contact Info</strong></div>
            <div>
                <table id="detailed_table_contactinfo">
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
                        <td class="detailed_table_td"></td>
                    </tr>
                    <tr>
                        <td><font color="#9c9a9c">Address</font></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div style="clear:both" ></div>

<div id="detailed_div_reminding">
    <textarea id="detailed_reminding"></textarea>
    <input type="button" class="button" value="update"></input>
</div>

</div>

</body>
</html>

html: div messed up

2 Answers2