Two child DIVs within a single parent DIV

Question

Two child DIVs within a single parent DIV

I am struggling to keep two divs side-by-side within a parent div. Initially, I was able to position the image in the right div successfully, but when resizing the elements, everything became disorganized and I can't seem to fix it. As a beginner, I would appreciate if you could provide a simple solution.

div.surf2
{
position:absolute;
background: #41c3ac;
height: 600px;
}

div.surfleft
{
display: inline-block;
width: 45%;
padding-top: 80px;
padding-left: 20px;
height: 600px;
}

div.surf2right
{
display: inline-block;
height: 600px;
width: 55%;
}

<div class="surf2">
    <div class="surfleft">
    <p class="title1">Interactive games</p>
        <ul style="font-size: 1.5em">
        <li>We offer various games for you to enjoy, including object recognition exercises, multiple-choice quizzes, and error-spotting challenges.</li>
            <li>These games are designed to make learning English engaging and rewarding.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

html css

Answer 1

Answer №1

The inline-block property always creates a space. You can either utilize float: left; or eliminate the space:

div.surf2 {
  position: absolute;
  background: #41c3ac;
  height: 600px;
}
div.surfleft {
  display: inline-block;
  width: 45%;
  padding-top: 80px;
  height: 600px;
}
div.surf2right {
  display: inline-block;
  height: 600px;
  width: 55%;
}

<div class="surf2">
  <div class="surfleft">
    <p class="title1">Interactive games</p>
    <ul style="font-size: 1.5em">
      <li>Explore various game types such as object recognition, multiple-choice exercises, and spot-the-mistake challenges.</li>
      <li>These games are designed to make learning and practicing English enjoyable yet challenging.</li>
    </ul>
  </div><<!--
  --><div class="surf2right">
    <img src="console.png">
  </div>
</div>

Also, consider eliminating the padding-left or using box-sizing: border-box.

div.surf2 {
  position: absolute;
  background: #41c3ac;
  height: 600px;
}
div.surfleft {
  display: inline-block;
  width: 45%;
  padding-top: 80px;
  height: 600px;
  padding-left: 20px;
  box-sizing: border-box;
}
div.surf2right {
  display: inline-block;
  height: 600px;
  width: 55%;
}

<div class="surf2">
  <div class="surfleft">
    <p class="title1">Interactive games</p>
    <ul style="font-size: 1.5em">
      <li>Explore various game types such as object recognition, multiple-choice exercises, and spot-the-mistake challenges.</li>
      <li>These games are designed to make learning and practicing English enjoyable yet challenging.</li>
    </ul>
  </div><<!--
  --><div class="surf2right">
    <img src="console.png">
  </div>
</div>

Answer 2

The inline-block property always creates a space. You can either utilize float: left; or eliminate the space:

div.surf2 {
  position: absolute;
  background: #41c3ac;
  height: 600px;
}
div.surfleft {
  display: inline-block;
  width: 45%;
  padding-top: 80px;
  height: 600px;
}
div.surf2right {
  display: inline-block;
  height: 600px;
  width: 55%;
}

<div class="surf2">
  <div class="surfleft">
    <p class="title1">Interactive games</p>
    <ul style="font-size: 1.5em">
      <li>Explore various game types such as object recognition, multiple-choice exercises, and spot-the-mistake challenges.</li>
      <li>These games are designed to make learning and practicing English enjoyable yet challenging.</li>
    </ul>
  </div><<!--
  --><div class="surf2right">
    <img src="console.png">
  </div>
</div>

Also, consider eliminating the padding-left or using box-sizing: border-box.

div.surf2 {
  position: absolute;
  background: #41c3ac;
  height: 600px;
}
div.surfleft {
  display: inline-block;
  width: 45%;
  padding-top: 80px;
  height: 600px;
  padding-left: 20px;
  box-sizing: border-box;
}
div.surf2right {
  display: inline-block;
  height: 600px;
  width: 55%;
}

<div class="surf2">
  <div class="surfleft">
    <p class="title1">Interactive games</p>
    <ul style="font-size: 1.5em">
      <li>Explore various game types such as object recognition, multiple-choice exercises, and spot-the-mistake challenges.</li>
      <li>These games are designed to make learning and practicing English enjoyable yet challenging.</li>
    </ul>
  </div><<!--
  --><div class="surf2right">
    <img src="console.png">
  </div>
</div>

Answer 3

Answer №2

<html>
<head>
<style type="text/css">
#content {

width: 980px;
height: 500px;
padding: 20 20 20 20;
background-color: #00fcff }
#package_update {

width: 680;
height: 500;
float: left;
background-color: #aaaaaa }
#previous_update {

width: 280;
height: 500;
float: right;
background-color: #ffcc00 }
</style>
</head>
<body>
<div id="content">

<div id="package_update"></div>
<div id="previous_update"></div>

</div>
</body>
</html>

Answer 4

<html>
<head>
<style type="text/css">
#content {

width: 980px;
height: 500px;
padding: 20 20 20 20;
background-color: #00fcff }
#package_update {

width: 680;
height: 500;
float: left;
background-color: #aaaaaa }
#previous_update {

width: 280;
height: 500;
float: right;
background-color: #ffcc00 }
</style>
</head>
<body>
<div id="content">

<div id="package_update"></div>
<div id="previous_update"></div>

</div>
</body>
</html>

Answer 5

Answer №3

To fix the issue of the div going over 100%, remove the padding-left property and add float: left to both divs. You can also consider removing the display: inline-block property.

div.surf2
{
position:absolute;
background: #41c3ac;
height: 600px;
}

div.surfleft
{
width: 45%;
padding-top: 80px;
height: 600px;
}

div.surf2right
{
height: 600px;
width: 55%;
}

div.surf2right, div.surfleft {
    float: left;
}

<div class="surf2">
    <div class="surfleft">
    <p class="title1">Interractive games</p>
        <ul style="font-size: 1.5em">
        <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choice exercises and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice English combining fun with hard work.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

Answer 6

To fix the issue of the div going over 100%, remove the padding-left property and add float: left to both divs. You can also consider removing the display: inline-block property.

div.surf2
{
position:absolute;
background: #41c3ac;
height: 600px;
}

div.surfleft
{
width: 45%;
padding-top: 80px;
height: 600px;
}

div.surf2right
{
height: 600px;
width: 55%;
}

div.surf2right, div.surfleft {
    float: left;
}

<div class="surf2">
    <div class="surfleft">
    <p class="title1">Interractive games</p>
        <ul style="font-size: 1.5em">
        <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choice exercises and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice English combining fun with hard work.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

Answer 7

Answer №4

Give this a shot:

.surf2 {
    width: fit-content;
    position:absolute;
    background: #41c3ac;
    height: 600px;
}


.surf2 div.surfleft {
    float:left;
    display: block;
    width: 45%;
    padding-top: 80px;
    height: 600px;
 }

.surf2 div.surfright {
    float:right;
 }

 <div class="surf2">
    <div class="surfleft">
        <p class="title1">Interactive games</p>
         <ul style="font-size: 1.5em">
            <li>Explore various types of games that challenge your object recognition, test your multiple-choice skills, and assess your ability to spot errors.</li>
            <li>These games are designed to help you enhance your English proficiency through an engaging learning experience.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

The use of width: fit-content will adjust the div's width based on the content inside it

Answer 8

Give this a shot:

.surf2 {
    width: fit-content;
    position:absolute;
    background: #41c3ac;
    height: 600px;
}


.surf2 div.surfleft {
    float:left;
    display: block;
    width: 45%;
    padding-top: 80px;
    height: 600px;
 }

.surf2 div.surfright {
    float:right;
 }

 <div class="surf2">
    <div class="surfleft">
        <p class="title1">Interactive games</p>
         <ul style="font-size: 1.5em">
            <li>Explore various types of games that challenge your object recognition, test your multiple-choice skills, and assess your ability to spot errors.</li>
            <li>These games are designed to help you enhance your English proficiency through an engaging learning experience.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

The use of width: fit-content will adjust the div's width based on the content inside it

Two child DIVs within a single parent DIV

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing JSON and select for dependency management

Get rid of any empty space in the image preview icon

node index of data that has been posted

Tips for retrieving the current value of an input using AJAX

How to truncate text in a cell of a Vuetify data table using CSS styling

Tips for creating a cohesive group of HTML elements within an editable area

Presentation for a div's background image with the use of jQuery

Scrolling through four limited list items automatically

filtering elements with selectable functionality in jQuery UI

Struggling to close the dropdown with jquery

"Enhance your HTML table by selecting and copying cell values with a simple click and CTRL +

Enhance user experience with HTML-tags in tooltips

Tips for creating a hidden tab that only appears when hovered over

Convert HTML files to .csv format

Is there a way to incorporate text fields and input in BootstrapDialog?

Unable to assign unique identifiers to elements within a user interface framework

Tips for managing the onloadedmetadata event

Enhance the functionality of various textareas by implementing bullets for easier organization and formatting

What is the best way to implement a modal that can toggle dark mode using the Konami code, with the added functionality of a close button?

Tips for sending an array of input field values through an Ajax request