html: div broken

The HTML document reads as follows:

<?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>

Furthermore, the CSS styling for this HTML page is provided below:

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;
}

An issue was discovered using the 'firebug' extension where the #detailed_div_reminding div was found to include the #detailed_div_basicinfo and #detailed_div_contactinfo, rather than the anticipated #detailed_fistpart.

However, a problem arose when trying to add margin-top: 20px to #detailed_div_reminding, which did not create the desired margin with #detailed_fistpart.

This scenario poses a question of why this unexpected behavior occurred.

csshtmlfirebug

Answer №1

hello, you should include the following line: 

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

prior to this code: 

<div id="detailed_div_reminding">

Answer №2

Are you experiencing issues with the margin at the top of your final section? This may be due to the presence of floats that need to be cleared for subsequent sections.

<!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>Detailed Information Page for Patients</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best approach to effectively manage right-to-left text-input fields?

I have been working on a project involving a multilingual layout. One concern that has arisen is: What is the proper way to handle text-input in this scenario? To better explain my issue, I created a JSFiddle. If I simply add the attribute dir="rtl", ...

htmlcsshebrewbidi

The innerHTML feature in Javascript seems to be malfunctioning

Having a simple javascript issue here. I am attempting to retrieve a date from a textbox and display it in a label for another purpose. However, I encountered some problems along the way. I can successfully alert the date retrieved from the textbox, but wh ...

javascripthtmlasp.netvb.net

Conflicting issues with jQuery's load() method

I am facing an issue with loading two HTML pages into a single div. I have index.html and try.html in the root folder, where try.html is loaded into index.html's div (#content) when Button 01 is clicked on index.html. The problem arises when I further ...

javascriptjqueryhtmlcss

What setting should I adjust in order to modify the color in question?

Looking to Customize Radar Chart Highlighted Line Colors https://i.sstatic.net/PqWc4.png I am currently working on a Radar Chart and I am trying to figure out which property needs to be edited in order to change the color of the highlighted lines. I have ...

javascriptcsstypescriptchart.jsstyling

Effortlessly showcase JSON data in an HTML owl carousel

Is there a way to display JSON data in HTML format? I have a JSON file containing reviews from Facebook, and I would like to showcase them on my website. Each review should be placed in its own div element. The JSON data below is extracted from the Faceboo ...

javascriptjqueryhtmljsonajax

Adjust the height of the Iframe to match the content within it

After conducting my research, I have not been able to find a solution. Although I am not an expert in jQuery, it seems that the code is not functioning properly. Within the iframe are links that expand when clicked to display content. However, the height o ...

javascriptjqueryhtmliframeexpand

Enclose Words Inside Unconventional Outline

Place text within a uniquely shaped border… I am attempting to achieve this goal in the most responsive and backward compatible way possible. I understand that compromise may be necessary. I have made progress with the help of this thread, but the svg ...

css

jquery-enhanced tabs with versatile functionality

HTML: <ul class="tabs"> <li><a href="#tab-one" class="current">Residential</a></li> <li><a href="#tab-two">Commercial</a></li> <li><a href="#tab-three">Agricultural</a></li> < ...

jqueryhtmlcss

Troubles with retrieving Array data for a JavaScript column chart

I am currently developing a Flask app in Python and utilizing render_template to send back 2 arrays, "names" and "deals", to my HTML file. I have confirmed that these arrays are working correctly based on the code snippet below that I tested, which display ...

javascriptpythonhtmlarraysflask

Creating dynamic HTML elements using ngFor within AngularJS allows for increased flexibility and customization on the

I'm a newcomer to Angular 5 and I'm looking to retrieve HTML elements from a .ts file and dynamically add them to an HTML file using ngFor. I attempted to use [innerHtml] for this purpose, but it was not successful and returned [object HTMLSelect ...

htmlangularngfor

When making a jQuery + AJAX request, IE8 is causing a null return value

I'm completely stumped as to why this issue is happening. To start, the code has been checked and validated by the W3C validator as HTML5, except for some URL encoding problems (such as & needing to be &amp;), but I don't have the ability ...

javascriptjqueryhtmlajaxinternet-explorer

Error: Unbalanced parentheses detected in the argument list at file path C:UsersgajjaOneDriveDesktopuser_loginviewsupdate.ejs during ejs compilation

When I try to update, instead of showing the form fill field, an error pops up. Can someone assist me with this? <!DOCTYPE html> <html> <head> <title>Form Data</title> </head> <body> <h1>Form Dat ...

htmlnode.jsexpressejs

Preventing ElementNotVisibleException in Selenium WebDriver

Although I haven't delved into HTML extensively, I might not be entirely correct in what I'm about to discuss. As I was working on my Selenium code, I observed that certain buttons on specific webpages don't redirect to other pages but rath ...

pythonhtmlselenium

Setting a CSS grid column to have a minimum width of `max-content` and a specific

I am trying to create a CSS grid where the column widths adjust based on the content, but with a minimum width of 100px. I attempted using minmax(max-content, 100px), however it did not produce the desired result. In the example below, the narrow column sh ...

htmlcsscss-gridmin

What is the proper way to set a margin on a fixed div that has a width

I am looking to create a fixed header that allows the content (body) to scroll underneath it. The challenge arises when the parent element has some margin-right, causing the fixed header to extend beyond the parent's width and occupy 100% of the windo ...

cssmarginfixed

What are the recommended margins for various alphabets?

When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below? In this code snippet, what is the best way to ad ...

javascripthtmlcss

The issue with Ajax.BeginForm OnSuccess is that it prevents the CSS transition from functioning properly

Apologies if the title is unclear. In my design, I aim to implement a transition effect when the left or right buttons are clicked. However, the transition does not function as expected because the OnSuccess callback seems to occur before the page is rend ...

javascriptcssajaxasp.net-mvc

Excessive whitespace bordering the perimeter of the webpage

I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...

htmlcss

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

I am currently developing a basic tax calculator that requires retrieving the value of an element from a drop-down menu (specifically, the chosen state) and then adding the income tax rate for that state to a variable for future calculations. Below is the ...

javascriptjqueryhtmlforms

Is there a way to update a div element with an image without having to refresh

Currently working on a project for my studies where I am reading the x and y coordinates from a touch pad and drawing it in real time using PHP. I have created a draw page that takes these coordinates and displays them on an image, which is then shown on ...

phpjavascripthtml