Position 2 identical classes side by side on the horizontal axis

Currently enrolled in the MIMO HTML course and facing a challenge where I am unable to align both elements with the class="column" attribute horizontally using display: inline-block;

I have attempted using float:right and other CSS properties to achieve alignment, but there seems to be something preventing it from working

.column {
  min-width: 300px; /*This method is not effective*/
  display: inline-block; /*Alignment isn't working as expected*/
  vertical-align: top; /*Does not produce desired results*/
}
<div id="footer">
  <!--Footer-->
  <div class="container">
    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
                </a>
        <br>
        <a href="https://www.youtube.com">Youtube <!--Link-->
                </a>
      </p </div>
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm aspiring music website creator!
        </p>
      </div>
    </div>
  </div>

The display: inline-block; property is supposed to arrange the elements side by side according to MIMO's guidelines, however, this is not happening as expected

htmlcssclass

Answer №1

You should align it to the left. Additionally, there seems to be a mistake in the closing tags... </p </div>

.column {
  min-width: 300px;
  display: inline-block;
  vertical-align: top;
  float: left;
}
<div id="footer">
  <!--Footer-->
  <div class="container">
    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link--></a>
        <br>
        <a href="https://www.youtube.com">Youtube <!--Link--></a>
      </p>
      </div>
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm aspiring music website creator!
        </p>
      </div>
    </div>
  </div>

Answer №2

To fix your HTML, make sure to delete the </p tag and include float: left; within the column class.

Answer №3

Here is an example that you can follow:

.column {
  min-width: 300px; /*NOT FUNCTIONING*/
display: inline-block; /*NOT FUNCTIONING*/
vertical-align: top; /*NOT FUNCTIONING*/
}
<div id="footer">
  <!--Footer-->
  <div class="container">

    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
                </a>
        <br>
        <a href="https://www.youtube.com">Youtube</a>
      </p>
      </div>
      
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm aspiring music website creator!
        </p>
      </div>
      
    </div>
  </div>

Answer №4

To optimize your layout, consider utilizing the flex property. For your specific scenario, you will need to specify the display as flex for the .container element:

.container{
  display: flex;
}

If you wish for both child elements to have equal width, simply include flex: 1 in their respective CSS declarations.

Feel free to refer to the code snippet below for implementation:

.container{
  display: flex;
}

.column{
  flex: 1;
}
<div id="footer">
  <!--Footer-->
  <div class="container">
  
    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
                </a>
        <br>
        <a href="https://www.youtube.com">Youtube</a>
      </p>
      </div>
      
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm an aspiring music website creator!
        </p>
      </div>
      
    </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for converting HTML to RTF using Java programming language?

When working with the basic API of JAVA using RTFEditorKit and HTMLEditorKit, I encountered a limitation where certain tags like <br/> and <table> were not recognized. In my search for better solutions to convert HTML to RTF, I came across two ...

javahtmlrtf

When resizing the window in IE8, the function DIV offsetWidth/Width/innerWidth returns a value of zero

My page is filled with many elements, one of which is the following DIV: <div id="root"> .................. <div id="child1"> ............. </div> <div id="child2"> ............... </div> & ...

javascriptjqueryhtmlcssinternet-explorer

The integration of Express server with static ejs files, CSS, and JavaScript is experiencing technical difficulties

I am currently working on a website using node.js and have created two routes: /home and /contact. Everything was functioning properly until I added CSS and JS files to both routes. For some reason, the second call does not work as expected. When I access ...

htmlnode.jsexpressejsstatic-files

Does the Width Toggle Animation fail to function in FireFox when using jQuery?

Has anyone else encountered this issue with the jQuery animate function not working in Firefox but working fine in IE8, Opera, and Chrome? I'm experiencing this problem and wondering if there's a workaround to make it work in Firefox as well. ht ...

javascriptjqueryhtmlcssfirefox

The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? Live Demo: https://jsfiddle.net/oLderkuo/ /* Latest compil ...

htmlcsstwitter-bootstrap

Set a maximum character limit for HTML input forms

Is there a way I can limit user input to more than 5 characters for certain fields like name? Additionally, is it possible to restrict a text input field so that only numbers can be entered (for example, an ID)? <tr> <th>ID:</th> ...

phphtmlforms

The navigation toggler seems to be malfunctioning in the browser, but it is functioning properly on Code

I'm having an issue with my navigation bar toggler. The code works fine in Codeply, but not in the browser. The hamburger button appears on mobile, but the lists are not showing up. Here is the code snippet I'm using: <html> <head> ...

htmlcssbootstrap-5

Verify whether a group of div elements overlaps a fixed div while scrolling

I have a layout with a list of posts and a logo positioned at the bottom of the page. The issue I am facing is that sometimes the title of the posts and the logo overlap, and I want to set the logo's opacity to 0.25 only when the text from .cat-date i ...

javascriptjquerycss

Tap, swipe the inner contents of a <div> element without being inside it

(Make sure to check out the image below) I'm facing an issue with a <div> on my website. It's not taking up the full width of the page, and the scrolling functionality within the <body> is not working as expected. I just want the cont ...

javascriptjqueryhtml

Troubleshooting issue: Chrome bug causing JavaScript full height intro section to have incorrect padding and display issues

Trying to create a full-height intro section using basic JavaScript markup has been quite the challenge. Here's a more detailed explanation: I have a parent DIV element that is supposed to adjust to the full height of the viewport. Unfortunately, t ...

javascripthtmlcssgoogle-chrome

Can a sophisticated matrix-like design be created using a CSS grid system?

I'm currently working on implementing a unique grid structure in Material-UI using a CSS grid: Browse the desired complex layout here Here's the current CSS grid layout I've created with Material-UI: View the existing layout here This is ...

htmlcssmaterial-uicss-grid

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

Achieving the perfect button using a combination of material-ui and styled-components

Utilizing the ToggleButton and ToggleButtonGroup components from material-ui, starting with material-ui's gatsby template. To prevent common material-ui errors with production builds, I am attempting to incorporate styled-components as well. The foll ...

cssreactjsmaterial-uigatsbystyled-components

Are there any tools available that can convert inline styles into CSS classes?

Can anyone recommend a package that will transform this text: <p style="width: 500px; height: 500px"> Hello World </p> into this format: <p class="foo"> Hello World </p> .foo { width: 500px; height: 500px; } ...

htmlcssnpm

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

javascripthtmlcss

Accordion button refuses to compress

After following all the steps in my accordion lesson, I encountered an issue where my button refuses to collapse when clicked. Can anyone provide guidance on how to solve this problem? Adding a class of "show" allows the content to display, but it still d ...

htmlbootstrap-5

What is preventing me from concealing my input field when its type is set to "file"?

I've been attempting to conceal my input field of a file type, but even with the hidden attribute, it refuses to hide. Interestingly, once I remove type="file", the code successfully hides itself Does anyone have insight on how I can hide ...

javascripthtmlreactjsmaterial-ui

Implementing a customized mobile style sheet for Google Maps v3

Currently, I am attempting to enforce the Mobile stylesheet for Google Maps v3 JavaScript within a jQueryMobile application. Within the screen stylesheet, the zoom control consistently stays in the top left corner and my efforts to relocate it have proven ...

cssjquery-mobilegoogle-maps-api-3

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

htmlcsstwitter-bootstrap

The appearance of Bootstrap React Nextjs doesn't quite match what's shown in the documentation

I am developing the frontend of my application using a combination of bootstrap, react, and nextjs. I attempted to implement the example provided by react-bootstrap at https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic. ...

cssnode.jsreactjsnext.jsbootstrap-5