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

Corner of the Border Revealing a Clear Sky above

Looking to enhance my navigation bar (menu) by adding a cornered border when the user hovers over it. <nav> <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#blog">Blog</a ...

css

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

javascripthtmlangularjs

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

After spending a considerable amount of time trying to center two buttons in Bootstrap, I came across the "text-center" class offered by Bootstrap. However, no matter where I include this class, it doesn't seem to have any effect on the alignment of t ...

javascripthtmlcsstwitter-bootstrap

Redefining the colors of an SVG when it is a CSS background image in code

I currently have an SVG icon encoded within my CSS file. I'm looking to change the color of this icon when a user hovers over it without creating a duplicate icon in a different color. Here's a snippet from my CSS file: background-image: url("d ...

htmlcsssvgbackground-image

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

javascriptjqueryhtmlcss

What could be the reason behind encountering an NaN error while using these particular functions?

I recently delved into the world of JavaScript, starting my learning journey about two months ago. While going through a few tutorials, I stumbled upon an intriguing project idea. However, I've hit a roadblock that's impeding my progress. Every t ...

javascripthtml

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is the ...

javascripthtmlangularjs

The onbeforeunload event should not be triggered when the page is refreshed using a clicked button

Incorporated into my webpage is a sign-up form. I would like it to function in a way that if the user accidentally refreshes, closes the tab, or shuts down the browser after entering information, a specific message will appear. <input type="text" place ...

javascriptphpjqueryhtmlinput

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

javascriptjqueryhtmlweb

What is the process for calling a class in HTML from a <Div> tag?

I am struggling with the following code snippet: <p class=‘majed’ style="color:#FF0000";>Red paragraph text</p> How can I reference the 'majed' class above? <Div class=‘majed’ > </Div> Your help is greatly appr ...

html

Is there a way to ensure a dialog box is positioned in the center of the window?

After adjusting the dimensions of my jQuery UI dialog box with the following code: height: $(window).height(), width: $(window).width(), I noticed that it is no longer centered on the window. Do you have any suggestions on how I can recenter it? ...

javascriptjquerycssjquery-uijquery-dialog

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...

htmlcssmedia-queries

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

phpjavascriptjqueryhtmlajax

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll

I'm having trouble keeping a Google Map div fixed on the screen while allowing my background, consisting of multiple scrolling divs with content inside, to scroll as normal. My attempt to wrap the map div in another fixed div resulted in the map disa ...

htmlcss

The Boostrap card-deck appears to be see-through and malfunctioning

This problem has been puzzling me for quite some time now, and I just can't seem to find the solution! Kindly disregard the other language and code - the card is located under the jumbotron. (To access the link, remove spaces: https://code pen.io/ano ...

htmlcssbootstrap-4

Highlight particular terms (key phrases) within text contained in a <td> tag

I am currently working on a project and facing a challenge that I am unfamiliar with. My task is to highlight specific keywords within text located inside a <td> element. I cannot manually highlight the keywords as the texts are dynamic, originating ...

javascriptjqueryhtmljsp

Is there any practical reason to choose tables over CSS for controlling layouts?

As I dive into updating a large amount of code for a web application, I've noticed that tables are heavily used throughout to manage layout. Being relatively new to HTML programming, I find myself questioning the necessity of using tables when CSS co ...

htmlcssbrowserhtml-table

navigation bar icons alignment problem

Help with positioning an icon next to the navbar text Example Code: <ul> <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-arrow ui-nodisc-icon">Set Filter</a></li> <li> ...

htmlcss

Encountering difficulty in accessing game.html following button clicks

Why isn't the redirection to game.html happening after clicking on the buttons in index.html? The file structure consists of server/server.js, public/index.html,public/game.html. <!DOCTYPE html> <html> <title>QUIZ GAME</title ...

javascripthtmlnode.jsexpresssocket.io

Guidelines for redirecting a page after a jQuery ajax call is made?

I'm working on a login form code and facing an issue where, after the statement is true, it doesn't redirect to the home page. Instead, it just displays the home page on my index page. How can I redirect jQuery Ajax to another page after the sta ...

phpjqueryhtmlajax