My webpage is structured into three sections: left, center, and right. Elements that should be displayed in the center have the attribute class="center", while those intended for the right are marked with class="right". However, I am encountering an issue where the layout does not render as expected when running the following code:
<div id="center">
<div>Hello world </div>
<div><label>Name</label> <input type="text" name="fnam" class="fields" id="fn" /></div>
</div>
Instead of displaying inline, the output appears as:
Hello
world
Name
field (text input)
An unexpected behavior is observed where elements are forced onto a new line if there is any space between them. This issue is consistent for elements under both class="center" and class="right". The CSS styling for these classes is defined as follows:
#right{
position : absolute;
right:500px;
margin-top :-75px;
width : 160px;
padding : 3px;
}
#center {
margin-top:10px;
width: 130px;
margin-left: 500px;
}