Two nested divs positioned below text within a parent div

Question

Two nested divs positioned below text within a parent div

I am styling a content div with text and two child divs positioned next to each other within the content div.

My goal is to have the child divs display below the text, rather than beside it.

body {
  text-align: center;
}
#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  display: flex;
  clear: both;
}
#second {
  background-color: yellow;
  padding-bottom: 500px;
  width: 100px;
  display: inline;
  position: relative;
}
#first {
  background-color: palegoldenrod;
  padding-bottom: 500px;
  width: 400px;
  display: inline;
  position: relative;
}

<div id="content">div id="content"
  <div id="second">div id="second"</div>
  <div id="first">div id="first</div>
</div>

Check out this Jsfiddle example to see how it currently appears.

html css

Answer 1

Answer №1

Check out the latest version on JSFiddle

#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  clear: both;
}
#second {
    background-color: yellow;
    padding-bottom: 500px;
    width: 100px;
    position: relative;
    float: right;
}
#first {
    background-color: palegoldenrod;
    padding-bottom: 500px;
    width: 400px;
    position: relative;
    float: left;
}

#content::after {
    content: "";
    clear: both;
    display: block;
}

View Demo

Answer 2

Check out the latest version on JSFiddle

#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  clear: both;
}
#second {
    background-color: yellow;
    padding-bottom: 500px;
    width: 100px;
    position: relative;
    float: right;
}
#first {
    background-color: palegoldenrod;
    padding-bottom: 500px;
    width: 400px;
    position: relative;
    float: left;
}

#content::after {
    content: "";
    clear: both;
    display: block;
}

View Demo

Answer 3

Answer №2

To create a layout with two divs nested inside another div, follow this structure:

<div id="content">
    <div id="twoboxes">
        <div id="second">div id="second"</div>
        <div id="first">div id="first"</div>
    </div>
</div>

Then, in your CSS file, use the display: flex property to style it accordingly. Here is an example of the CSS code:

#first, #second {
    border: solid green 2px;
}
#content {
    border: solid purple 2px;
    display: block;
    clear: both;
}
#twoboxes{
    display: flex;
}
#second {
    background-color: yellow;
    padding-bottom: 500px;
    width: 100px;
    display: inline;
    position: relative;
}
#first {
    background-color: palegoldenrod;
    padding-bottom: 500px;
    width: 400px;
    display: inline;
    position: relative;
}

Answer 4

To create a layout with two divs nested inside another div, follow this structure:

<div id="content">
    <div id="twoboxes">
        <div id="second">div id="second"</div>
        <div id="first">div id="first"</div>
    </div>
</div>

Then, in your CSS file, use the display: flex property to style it accordingly. Here is an example of the CSS code:

#first, #second {
    border: solid green 2px;
}
#content {
    border: solid purple 2px;
    display: block;
    clear: both;
}
#twoboxes{
    display: flex;
}
#second {
    background-color: yellow;
    padding-bottom: 500px;
    width: 100px;
    display: inline;
    position: relative;
}
#first {
    background-color: palegoldenrod;
    padding-bottom: 500px;
    width: 400px;
    display: inline;
    position: relative;
}

Answer 5

Answer №3

One possible approach is to wrap the first and second div elements, then adjust the flex-direction property of the content div to column. (I removed the padding: 500px as its purpose was unclear.)

#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  display: flex;
  flex-direction: column;
  clear: both;
}
#second {
  background-color: yellow;
  width: 100px;
  display: inline;
  position: relative;
  flex: 1;
}
#first {
  background-color: palegoldenrod;
  width: 400px;
  display: inline;
  position: relative;
  flex: 1;
}

.main_content {
  display: flex;  
}

<div id="content">
div id="content"
<div id="main_content">
  <div id="second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <div id="first">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  </div> 
</div>

Answer 6

One possible approach is to wrap the first and second div elements, then adjust the flex-direction property of the content div to column. (I removed the padding: 500px as its purpose was unclear.)

#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  display: flex;
  flex-direction: column;
  clear: both;
}
#second {
  background-color: yellow;
  width: 100px;
  display: inline;
  position: relative;
  flex: 1;
}
#first {
  background-color: palegoldenrod;
  width: 400px;
  display: inline;
  position: relative;
  flex: 1;
}

.main_content {
  display: flex;  
}

<div id="content">
div id="content"
<div id="main_content">
  <div id="second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <div id="first">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  </div> 
</div>

Two nested divs positioned below text within a parent div

Answer №1

Answer №2

Answer №3

Similar questions

Creating web applications using Eclipse IDE and HTML5

Activate Bootstrap button functionality with JavaScript

Embeddable video player failing to adjust size properly within parent div

Press on Selenium with Python

Show content based on information from an array using JavaScript

Positioned in the middle is a collection of left-aligned divs

Step by step guide on how to connect a stylesheet in CSS

What is the method for aligning navbar items to the right in Bootstrap 4?

bootstrap 4 - logo in navbar brand stays the same even when scrolling

Is a Text-Only View Possible with WebView?

Site's design compromised by AJAX refresh intervention

Move the footer to the bottom of the content

Safari iOS does not properly support responsive images when using srcset and sizes

The border on the right side of the accordion does not continue down

Simple code styling tool

Is there a way to extract all the <a> elements from the <ul> element, which acts as the parent node in my HTML code?

Leveraging an HTML form for searching and fetching data from MySQL Workbench using PHP

Implementing dynamic database content into a Wow Slider on a jQuery Mobile platform

What is the method for formatting within the <textarea> element?

Ways to maneuver the vehicle by using the left or right key inputs