elements that do not reside within a div with a float style

I am struggling with a basic CSS layout issue. I have a div container with content that I am trying to divide into two sections using the float property. Despite applying the float to the elements within the div, they do not stay inside as expected.

https://i.sstatic.net/Ybyhx.png

.content {
    border: 5px solid #0099CC;
    width: 90%;
    min-width: 1000px;
    margin: auto;
}

.left {
    float: left;
    width: 300px;
}

.right {
    float: right;
    width: 700px;
}
<div class="content">
    <p>This is my content page</p>
    <div class="left">
        <form>
            <fieldset>
                <legend>User Login</legend>
            </fieldset>
        </form>
    </div>
    <div class="right">
        <form>
            <fieldset>
                <legend>Main Area</legend>
            </fieldset>
        </form>
    </div>
</div>

After removing the float property, the fieldset elements display correctly within the div content. This leads me to believe that the issue may be related to the float property in my CSS.

htmlcss

Answer №1

Make sure to remove the .right class if you have already applied the float: left property

.content {
    border: 5px solid #0099CC;
    width: 90%;
    min-width: 1000px;
    margin: auto;
}

.left{
    float: left;
    width: 300px;
}
<div class="content">
    <p>Here is the content for the webpage</p>
    <div class="left">
        <form>
            <fieldset>
                <legend>User Login</legend>
            </fieldset>
        </form>
    </div>
    <div>
        <form>
            <fieldset>
                <legend>Main Area</legend>
            </fieldset>
        </form>
    </div>
</div>

Answer №2

include 

<div style="clear:both;"></div> after you finish the 'right' div


.content {
    border: 5px solid #0099CC;
    width: 90%;
    min-width: 1000px;
    margin: auto;
}

.left{
    float: left;
    width: 300px;
}

.right{
    float: right;
    width: 700px;
}
<div class="content">
    <p>This is my content page</p>
    <div class="left">
        <form>
            <fieldset>
                <legend>User Login</legend>
            </fieldset>
        </form>
    </div>
    <div class="right">
        <form>
            <fieldset>
                <legend>Main Area</legend>
            </fieldset>
        </form>
    </div>
    <div style="clear:both;">
    
    </div>
</div>

Answer №3

To resolve the issue, simply include the line overflow: hidden; within the .content selector in your CSS:

.content {
border: 5px solid #0099CC;
width: 90%;
min-width: 1000px;
margin: auto;
overflow: hidden;

}

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

Is there a way to retrieve the width and height of a parent element within a nested declaration in SASS?

Is there a way for a child element to automatically adopt the dimensions of its parent? How can I retrieve the width and height values of the parent element in order to achieve this effect? Here is an example code snippet: .thumb { width: 120px; ...

csssass

Show informational pop-up when hovering over selected option

My goal is to create an information box that appears when a user hovers over a select option. For example: <select id = "sel"> <option value="sick leave">Sick leave</option> <option value="urgent leave">Urgent lea ...

javascriptjqueryhtmlajax

Fetching data from local JSON file is being initiated twice

I need some help understanding why my code is downloading two copies of a locally generated JSON file. Here is the code snippet in question: function downloadJson(data, name) { let dataStr = 'data:text/json;charset=utf-8,' + encodeURICompo ...

javascripthtmljson

Utilizing HTML and JavaScript to dynamically switch stylesheets based on the width of

When it comes to using stylesheets for mobile and non-mobile devices, there is a need for different approaches. The idea of comparing browser height and width in JavaScript seems like a good one, but the implementation may not always work as expected. ...

javascripthtmlcssstylesheet

When I forget to use var_dump, PHP fails to load scripts

When I am building CSS links using a function, the CSS doesn't work unless I add a var_dump at the end. What could I be missing or overlooking? Here is the code snippet: private function buildCssLinks(){ $files = $this->findFiles(dirname(d ...

phpcssclass

Showing the SQL table data output

Attempting to present a new table based on the SQL query result. Below is the initial table code shown when the user first loads the page. TABLE: <form action="walkthroughs.php" method="POST"> Platform: <input type="text" name="platform" ...

phphtmlmysql

Tips for positioning a picklist field dropdown on top of a lightning card in Lightning Web Components

Attempting to resolve an issue with CSS, I have tried adding the following code: .table-responsive, .dataTables_scrollBody { overflow: visible !important; } However, the solution did not work as expected. Interestingly, when applying a dropdown pickli ...

javascripthtmlcsssalesforce-lightninglwc

Is it possible to have a button within a table that, when clicked, opens a card overlaying the entire table?

I'm having an issue with a table and card setup. When I click the button in the table, the card that appears only covers part of the table. I want it to cover the entire table area based on the content inside the card. How can I make this happen? I&a ...

htmlcssangulartypescript

showing information from a table column

Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...

javascriptjqueryhtmljsf-2datatables

Having difficulties with JavaScript's if statements

I'm facing an issue with my JavaScript code that is meant to modify the value of a price variable and then display the updated price. The problem arises when I have multiple select options, as the price only reflects the ID of the last statement. Here ...

javascripthtmlif-statement

jQuery effects move divs' margins consecutively

Check out my current setup I want to achieve a smooth image fade-in effect without any text displacement. Is there a specific alteration needed for the .fade-in element in order to accomplish this? ...

jqueryhtmlcss

Incorporating both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines o ...

cssreactjsbootstrap-4

Modify the button's background color for Django's image upload field

In one of the forms in my Django application, I have included a field that allows users to upload an image. Here is the code for this field: image = models.ImageField(upload_to=upload_location, null=True, blank=True) To display this field in my form tabl ...

htmlcssdjangobutton

Is it possible to have 1 million links on a single webpage?

Would the performance suffer if I were to fetch 1 million link elements and add them to the DOM? I am looking to create a navigation list at the top of my website, similar to what Apple has on their site where you can scroll left or right using your keybo ...

javascriptjqueryhtmlajaxdom

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

Place three images in the center of a div container

Recently, I've been working on some HTML code that utilizes the Angular Material library: <div layout="row" layout-wrap style="background: yellow; "> <div ng-repeat="pro in Products" > <md-card class="cardProduct" > ...

htmlcssangularjsangularjs-material

Decoding HTML with C#

When I use my program to visit a URL and read the resulting HTML, the process goes smoothly. string URI = "http://www.testwebsite.com/submit?q=+mydata"; string myParameters = ""; using (WebClient wc = new WebClient()) ...

c#html

create a function that automatically assigns colors to table fields based on their values

I have a table that dynamically displays a field with the id complaint_status, which can have values of "PENDING" or "CLEARED". I need help to set different background colors for the field based on these values: GREEN for CLEARED RED for PENDING Is the ...

phpcss

Showing content in a single line causes it to drop down to the next

Check out my code snippet here: http://jsfiddle.net/spadez/aeR7y/23/ I'm curious about how I can make my header list align on the same line as the header, without dropping down. Here's the CSS code I have for the list: #header li { display: ...

htmlcss

center text vertically in HTML list

Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure: <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="index.html"><i ...

htmlcsstwitter-bootstrap