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

Styling multiple divs using CSS

How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Swap out symbols for pictures

Is there a way to retrieve the modal's viewport height in Angular?

default browser's drag and reposition feature

Having trouble getting CSS media query to work in my Rails mailer template

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

Having trouble with media queries on my iPad

Guide to implementing a universal animated background with Angular components

Creating JavaScript Objects from HTML Form data with the help of serializeJSON

The script is not functioning properly when placed outside of the HTML body tag

Bokeh is having trouble loading from the CDN

What is the reason that `font-size` does not match the `height`? For example, if the `<span>` on the left is 2rem, on the right I could fit 2 smaller `<span>`s, each with a size of 1rem

Taking pictures with the camera in three.js on an iPhone

Creating a unique data attribute in Alpine.js - A step-by-step guide

Escape sequences do not seem to be functioning properly when using innerHTML

Challenges with the efficiency of hover effects

Obtain ID and Class details from an HTML webpage using VBA

Exploring Bootstrap: Understanding column stacking and the requirement for a new row to stack upon resizing