Currently, my goal is to place a div underneath two other divs. Here is the code snippet that I am working

Question

Currently, my goal is to place a div underneath two other divs. Here is the code snippet that I am working

I am attempting to position the div with id 4 so that it appears after the divs with ids 2 and 3, which are placed next to each other. However, when I try to do this, I notice that the div with id 4 seems to start from the top itself. Even though the content within div 4 is displayed below the content in divs 2 and 3 as intended (with the buttons appearing at the bottom), the borders of div 4 seem to indicate that it has started at the top, causing some confusion.

<div id="1" style="width:100%;">
<div id="2" style="float:left; width:50%; border: 5px solid black" ></div>
<div id="3" style="float:right; width:50%; border: 5px solid red"></div>
</div>
<div id="4"style="border: 5px solid cyan"></div>

html css

Answer 1

Answer №1

One reason for this issue could be due to the floats not being cleared properly. An easy fix is to insert a new div with the class clear. You can then define it in your CSS like so:

.clear{
  clear:both;
}

You can see the difference in the result here: http://jsfiddle.net/xt0ns1p7/

UPDATE:
Another consideration is to utilize box-sizing: border-box; for your div elements. This style will maintain the specified width and height, while pushing all borders and margins inside the div.

You can view the revised outcome here: http://jsfiddle.net/xt0ns1p7/1/

Answer 2

One reason for this issue could be due to the floats not being cleared properly. An easy fix is to insert a new div with the class clear. You can then define it in your CSS like so:

.clear{
  clear:both;
}

You can see the difference in the result here: http://jsfiddle.net/xt0ns1p7/

UPDATE:
Another consideration is to utilize box-sizing: border-box; for your div elements. This style will maintain the specified width and height, while pushing all borders and margins inside the div.

You can view the revised outcome here: http://jsfiddle.net/xt0ns1p7/1/

Currently, my goal is to place a div underneath two other divs. Here is the code snippet that I am working

Answer №1

Similar questions

Is there a way to alter the text color using JavaScript on the client side?

Ways to enlarge a YouTube thumbnail upon loading using JavaScript

Move the DIV element to a static section within the DOM

What is the purpose of activating hover styles when tapping on mobile devices?

Are You Able to Develop a Floating Window That Stays Persistent in JavaScript?

What methods can be used to troubleshoot an issue of an AngularJS function not being called

Tips for aligning an icon in the middle of the Bootstrap 3 grid vertically

What is the best way to ensure all table rows have consistent heights that are not affected by image sizes?

Using the Play framework to showcase data in an HTML table

What is the best way to ensure that text highlighting appears consistent on all browsers?

Incorrect legend colors in Highcharts pie chart

Issue with showing multiple images on HTML page

Upon rerender, React fails to refresh the style changes

necessitated in specified input with assigned value

Remove a div element with Javascript when a button is clicked

What is the best way to have a text field automatically insert a hyphen after specific numbers?

Tips for creating responsive emails

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Struggles with implementing CSS Grid's dynamic column heights and expanding rows

scrollable list using bootstrap