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

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

Abandoned <li> and </li> elements

Adding a combination of HTML and Javascript to an element can result in unexpected behavior

Redirecting files from the file system to the emulator is not functioning properly

I am attempting to display the Δ symbol on my website, however, it is not appearing on the webpage

What is the best way to create a collage of images with a random and unique arrangement?

Learn how to showcase a text file uploaded to a webpage with NODE js and HTML

How can I ensure that my jQuery code only executes after the mobile CSS has been loaded

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Utilize the href attribute on an image, whether it be through a class

Positioning a centered div with absolute positioning may result in offset issues on Android devices when the content exceeds the viewport size

Using AJAX to send data with a POST request in Django may not function properly

Exploring the possibilities of applying CSS to customize the color of various elements

What is the best way to store checkbox statuses in local storage and display them again in a JavaScript to-do list?

Ensure that PHP form validations are checked when submitting the form using jQuery

I'm having trouble with my code - I suspect the issue might be related to the header() function

Try implementing a body template when using the mailto function

Issue with Firefox browser: Arrow keys do not function properly for input tags in Twitter Bootstrap drop down menu

In Safari, my layout is disrupted by the mere mention of the word 'City'