Looking for a way to align two child divs next to each other within a parent div? I've tried multiple methods, but none seem to be effective

Question

Looking for a way to align two child divs next to each other within a parent div? I've tried multiple methods, but none seem to be effective

Despite trying various methods like using inline-block and float, the divs in my code continue to stack on top of each other.

What could be causing this issue?

#resources {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 4%;
  background: rgba(0, 160, 255, 1);
  color: white;
  font-size: 1.5em;
  padding: 0.5em;
  border-radius: 10%;
}

#woodResource #stoneResource {
  display: inline-block;
  float: left;
}

<div id="resources">
  <div id="woodResource">
    <img src="/models/wood.png" id="wood"> 0
  </div>
  <div id="stoneResource">
    <img src="/models/stone.png" id="stone"> 0
  </div>

</div>

I have exhausted all possible solutions mentioned online such as using inline-block and float, but none seem to resolve the issue.

html css

Answer 1

Answer №1

1.) To accommodate both children, consider increasing the width of the parent element. A 4% width may be too narrow depending on the size of the parent or window.

2.) Ensure that the selector includes a comma for both elements

#woodResource, #stoneResource { ... }

. Without the comma separating the selectors, the rule will only apply to #stoneResource as a child of #woodResource.

#resources {
position: fixed; top: 0; left: 0;
z-index: 1;
display: block;
width: 20%;
background: rgba(0, 160, 255, 1);
color: white;
font-size: 1.5em;
padding: 0.5em;
border-radius: 10%;
}

#woodResource, #stoneResource {
  display: inline-block;
}

 <div id="resources">
        <div id="woodResource">
            <img src="/models/wood.png" id="wood">
            0
        </div>
        <div id="stoneResource">
            <img src="/models/stone.png" id="stone">
            0
        </div>
    </div>

Pro tip: When using display: inline-block for the parent element, there is no need to specify its width. The width will automatically adjust to fit its contents in this scenario:

#resources {
display: inline-block;
background: rgba(0, 160, 255, 1);
color: white;
font-size: 1.5em;
padding: 0.5em;
border-radius: 10%;
}

#woodResource, #stoneResource {
  display: inline-block;
}

<div id="resources">
        <div id="woodResource">
            <img src="/models/wood.png" id="wood">
            0
        </div>
        <div id="stoneResource">
            <img src="/models/stone.png" id="stone">
            0
        </div>
    </div>

Answer 2

1.) To accommodate both children, consider increasing the width of the parent element. A 4% width may be too narrow depending on the size of the parent or window.

2.) Ensure that the selector includes a comma for both elements

#woodResource, #stoneResource { ... }

. Without the comma separating the selectors, the rule will only apply to #stoneResource as a child of #woodResource.

#resources {
position: fixed; top: 0; left: 0;
z-index: 1;
display: block;
width: 20%;
background: rgba(0, 160, 255, 1);
color: white;
font-size: 1.5em;
padding: 0.5em;
border-radius: 10%;
}

#woodResource, #stoneResource {
  display: inline-block;
}

 <div id="resources">
        <div id="woodResource">
            <img src="/models/wood.png" id="wood">
            0
        </div>
        <div id="stoneResource">
            <img src="/models/stone.png" id="stone">
            0
        </div>
    </div>

Pro tip: When using display: inline-block for the parent element, there is no need to specify its width. The width will automatically adjust to fit its contents in this scenario:

#resources {
display: inline-block;
background: rgba(0, 160, 255, 1);
color: white;
font-size: 1.5em;
padding: 0.5em;
border-radius: 10%;
}

#woodResource, #stoneResource {
  display: inline-block;
}

<div id="resources">
        <div id="woodResource">
            <img src="/models/wood.png" id="wood">
            0
        </div>
        <div id="stoneResource">
            <img src="/models/stone.png" id="stone">
            0
        </div>
    </div>

Looking for a way to align two child divs next to each other within a parent div? I've tried multiple methods, but none seem to be effective

Answer №1

Similar questions

Execute a function in HTML that has been declared in the controller

How to apply new CSS styles to override the existing ones for an element

Shifting Divs/Text while adjusting zoom levels in HTML/CSS with Bootstrap

Website issues being displayed by Internet Explorer

The CSS div gradually descends as I increase the width of the browser

Mapping memory for FirefoxOS is like equivalent strides

A pair of HTML/PHP forms coexisting on a single page

The color of the button does not change when the jQuery onclick event is triggered

JS seems to kick in only after a couple of page refreshes

Enhance Your List with Icon Decorations

What could be causing this jQuery selector to not select any elements?

Struggling to replicate Bootstrap's col-md-6 with Tailwind CSS in React?

What is the best way to place a list within a <div> element?

Switch the color (make it gray) of the selected tab in the navigation bar

col-md is taking precedence over col-sm at lower screen resolutions

The margin-top property in CSS is not functioning as intended for a specific pixel value when applied to

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Steps for aligning two input elements side by side in Bootstrap 4

Expanding the size of your Bootstrap 3 input box

The CSS tag combination of 'position:relative;' and 'top:xx%;;' functions properly in Chrome, however, it does not work in any non-webkit browsers such as Firefox, Internet Explorer, Opera, etc