Having difficulty arranging the elements in a straight line

I am currently working on designing the footer for my website.

My goal is to have 2 divs and one list displayed inline within this footer. However, I am facing an issue where using the CSS Property display:inline-block is not achieving the desired result. While the two divs align properly, the list element appears slightly shifted downwards.

For reference, here is the link to the jsFiddle: http://jsfiddle.net/tw2Wp/2/. Upon examining the JSfiddle, you'll notice that the three divs with the class footerContents are not aligned in-line as intended.

I would appreciate it if someone could provide insight into why this issue is occurring. Is utilizing inline-block the correct approach for this situation, or is there a more effective method available (which I'm certain exists)?

htmlcss

Answer №1

Kindly include the vertical-align property in the .footerContents selector:

.footerContents {
    display: inline-block;
    width: 200px;
    height: 200px;
    padding: 5px;
    margin-top: 30px;
    margin-left: 50px;
    margin-bottom: 5px;
    background-color: red;
    vertical-align: top; /* <<< */
}

View Demo

Answer №2

Have you considered utilizing the css3 flexbox module in this manner?

HTML

<div id="footer">
    <div class="footerContents">
       ...
     </div>

     <ul class="footerContents">
        ...
     </ul>

     <div class="footerContents">
        ...
     </div>
</div>
<div>Copyright © </div>

CSS

#footer {
  height:auto;
  width:100%;
  background-color:#666;
  background-image:url(footer_shade.png);
  background-repeat:no-repeat;
  background-position:50% 0;
  border-top:1px solid #FFF;
  color:#fff;
  font-family:'Bree Serif',serif;
  font-size:16px;
  line-height:20px;

  display:-moz-box;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: justify; 
  -moz-box-pack: justify; 
  -ms-flex-pack: justify; 
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.footerContents {
  width:200px;
  height: 200px;
  padding:5px;
  margin-top: 30px;
  margin: 20px;
  margin-bottom: 5px;
  background-color: red;

  -moz-flex-box:1;
  -webkit-flex-box:1;
  -ms-flex:1 1 200px;
  -webkit-flex: 1 1 200px;
  flex:1 1 200px;
}

Check out the demo. For more information on flexbox, feel free to visit here and here.

Answer №3

An effective solution is to utilize the float property for the elements instead of relying on inline-block. You can view a functional example by visiting this link: http://jsfiddle.net/tw2Wp/2/

It's important to note that an additional div with the class clear has been included to properly clear the floats. This will ensure that your background displays as intended. The reason for adding this extra div is because when elements are floated, the parent div may not automatically adjust its height.

.clear{
    clear:both;
}

Answer №4

Here is an example of how you can achieve this:

HTML

<div id="footer">
    <div class="footerContents">
       ...
     </div>

     <ul class="footerContents">
        ...
     </ul>

     <div class="footerContents">
        ...
     </div>
</div>
<div>Copyright © </div>

CSS

#footer {
  height:auto;
  width:100%;
  
   /* More CSS styles here */
}

.footerContents {
  display:inline-block;
  width:200px;
  height: 200px;
  padding:5px;
  
  /* More CSS styles here */
}

Please take a look at the live demo.

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

Can you guide me on how to activate the pickadate.js calendar above the input field?

Encountering an issue with the Pickadate calendar. There seems to be a problem at the bottom of the page, please refer to the attachment for more details. My challenge is that I need to display the Pickadate calendar above the input field when the field is ...

csshtmlbootstrap-4pickadate

Error with Bootstrap Layout caused by the StringBuilder

After diving into Bootstrap, I encountered an issue with the layout generated by a VB.NET page using StringBuilder. The result was a disorganized mess: Upon further inspection, it became evident that the problem extended to other sections of the page as w ...

htmlcssvb.nettwitter-bootstrap

Tips for modifying a particular element within a class?

I am seeking guidance on how to modify a specific class attribute in CSS/JS/JQuery when hovering over a different element. Here is an example: <h1 class="result">Lorium</h1> <h1 class="result">Ipsum</h1> <h1 class="result">Do ...

javascriptjqueryhtmlcss

Retrieve a specific value in HTML <a> tag using JavaScript-Ajax in Django

I am currently working with Python 3 and Django. Within my HTML code, I have the following: {% for category in categories() %} <li class="c-menu__item fs-xsmall"> <a href="#" id="next-category"> {{ category}} & ...

javascriptpythonhtmlajaxdjango

Trouble arises when trying to use add event listener on dynamically generated elements through (*ngFor)

Expanding the Accordion View Issue Whenever the section button is clicked, the event listener userSelection[i].addEventListener changes the id to 'open', thus expanding the accordion. This functionality works without any issues when not using t ...

htmlangulartypescript

Display a particular frame upon the initial loading of a Lottie animation

I've successfully integrated a lottie animation into my code. On the initial load, I'd like to display a specific frame. When the user hovers over it, I want the animation to start from the beginning and play through in its entirety. Here's ...

htmljsonanimationlottiebodymovin

What is the best method for ensuring that cheese rises to the top?

Is there a way to increase the value of the variable cheese? I suspect it has something to do with how the variable cheese is defined each time the JavaScript is activated, but I'm not sure how to go about it. Can you offer some guidance on this? & ...

javascripthtml

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...

css

Retrieve the position of an element using Python and selenium

Currently, I am working on a project and need to extract the location and size of an element using the following xpath: "//div[@class='titlu']" https://i.sstatic.net/PI1QE.png Upon inspection, it appears that the element is visible with no dist ...

pythonhtmlseleniumselenium-webdriver

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

htmlcssreactjsmaterial-ui

Main menu items failing to display sub menu options

I am in need of assistance as I am facing the same issue on two WordPress twin websites that are using the same theme (Newmagz), which is no longer purchased and therefore not supported. The submenus in the main menu are simply not appearing. I have checke ...

csswordpress

What is the reason behind every element in bootstrap being enclosed within an anchor tag?

I am currently delving into the world of bootstrap for the first time and encountering an issue with the grid system. Somehow, whenever I try to incorporate an - a href="#" - tag within the grid, it distorts the layout inexplicably. I have been struggling ...

phphtmlbootstrap-grid

Achieving a function call within a Backbone view in Backbone.js

Is it possible to call the plotPort function from the plotLoc function using this.plotPort() instead of self.plotPort()? It seems to not work for Internet Explorer when using self.plotPort(). As a workaround, I added an event to lLoca upon reset to call ...

javascriptjqueryhtmlbackbone.js

Automatically populate select boxes with values from a different source using PHP

I'm in the process of setting up automatic population for 2 select boxes on a website. When a user chooses a class, the second select box automatically displays the main specialization of that class. If the user selects Tank (for example), the third ...

javascripthtml

Updating radio button color upon selection in Boostrap

Looking to customize the colors of radio buttons found on this Bootstrap page By default, the background color is white and changes to blue when clicked. <div class="btn-group" role="group" aria-label="Basic radio toggle button ...

htmlcsstwitter-bootstrapbootstrap-5

Footer alignment issue when using react-full-page is causing it to not lineup at the bottom of the page

Currently, I have integrated the react-full-page package into my project. However, after adding the Footer to the routes, I noticed that the footer is only visible in the second section of the page and does not appear at the bottom as expected. If you wan ...

cssreactjs

When using Javascript to append content to the body, it may not be displayed as HTML on

My current project involves creating an HTML document through JavaScript templates. In the code snippet below, I have a const button which serves as my template. By using the replace method, I am able to update the content within the button template from c ...

javascripthtmldocumentfragment

Tips for defining conditions within the style attribute in JSP

Below is the code that I attempted: <div style="width:85%;"> <input class="formbutt" value="AddNew" title="AddNew" type="button" style="{(${projectEnvironmentBean.divStyle}=='dipslay:none') ? 'display:block' :'display: ...

cssjspjpa

The positioning of the parent element shifts as a result of the CSS

What causes a vertical position change in buttons with content floated left or right? Take this example http://jsfiddle.net/8ff6dhou/ <button>aaa</button> <button><div style="float:left">bbb</div></button> <button> ...

css

Utilizing AJAX for XML data parsing

I need help with formatting XML data into a table. The code I've written isn't working as expected. The XML data is structured in branches, causing it to not display correctly. Can someone assist me in fixing this issue? <!DOCTYPE html> &l ...

javascripthtmlajaxxmlxml-parsing