Step-by-step guide on arranging/placing/styling two div elements next to each other

I'm facing an issue with my CSS and HTML. I can't seem to get the 2 footer items to display on the same line. Is there a problem with how I've structured my divs and styles?

Any suggestions for improving the code are greatly appreciated. I've already tried using float and inline-block.

/*footer*/
footer {
  color:white;
  background-color: #c2b180;
}
.button-social {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
a {
  text-decoration: none;
}
.sameline.block {
  float:left;
  width:50%;
}
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="sameline.block">
  <div class="about-this-page">
      <h3>About this page</h3>
      <p>Made by Duy Ta</p>
  </div>
    <div class="around-the-web">
      <h3>Around the Web</h3>
       <a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
       <a class="button-social" href="#"><i class="fa fa-github"></i></a>
       <a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
  </div>
  </div>
  <div id="footer-below">qlip © 
    <script>document.write(new Date().getFullYear())</script>. All Rights Reversed
  </div>
</footer>

htmlcss

Answer №1

In addition, make sure to include the float property for elements aligned to the right side as well

#footer-below {float: right; width: 50%;}

Answer №2

A naming convention for classes does not allow the use of a period (dot).

Therefore, consider changing it to something like samelineblock.

After that, target the divs that are direct children of that element and give them a style of inline-block.

You have the flexibility to adjust the width as needed.

/*footer*/

footer {
  color: white;
  background-color: #c2b180;
}

.button-social {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

a {
  text-decoration: none;
}

.samelineblock>div {
  display: inline-block;
  width: 40%;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="samelineblock">
    <div class="about-this-page">
      <h3>About this page</h3>
      <p>Made by Duy Ta</p>
    </div>
    <div class="around-the-web">
      <h3>Around the Web</h3>
      <a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
      <a class="button-social" href="#"><i class="fa fa-github"></i></a>
      <a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
    </div>
  </div>
  <div id="footer-below">qlip ©
    <script>
      document.write(new Date().getFullYear())
    </script>. All Rights Reversed
  </div>
</footer>

Answer №3

To start, avoid using periods in class names. To align two elements next to each other, set their float property to left individually rather than the container. For instance, rename sameline.block to samelineblock and update

.sameline.block {
  float: left;
  width: 50%;
}

to

.samelineblock > div {
  float: left;
  width: 50%;
}

Answer №4

Consider implementing the following CSS snippet to achieve your desired layout:

.samelineblock .about-this-page,.samelineblock .around-the-web {
  display: inline-block;
  padding:0 30px 0 0;
}

Answer №5

To ensure your elements are displayed on the same line, utilize flexbox in your container with the class .sameline-block. Adjust margins, padding, and other styles for child elements with classes .about-this-page and .around-the-web.

/*footer*/
footer {
  color:white;
  background-color: #c2b180;
}
.button-social {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
a {
  text-decoration: none;
}
.sameline-block {
  display: flex;
  flex-wrap: nowrap;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="sameline-block">
    <div class="about-this-page">
        <h3>About this page</h3>
        <p>Made by Duy Ta</p>
    </div>
     <div class="around-the-web">
        <h3>Around the Web</h3>
         <a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
         <a class="button-social" href="#"><i class="fa fa-github"></i></a>
         <a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
    </div>
  </div>
  <div id="footer-below">qlip © 
    <script>document.write(new Date().getFullYear())</script>. All Rights Reversed
  </div>
</footer>

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

Choosing all components except for one and its descendants

I am searching for a method to choose all elements except for one specific element and its descendant, which may contain various levels of children/grandchildren or more. What I'm trying to accomplish is something like... $("*").not(".foo, .foo *").b ...

javascriptjqueryhtmlcss

How to retrieve the same value from multiple selections using Vanilla JavaScript and multiple select options?

Why do we consistently receive the same value and index when using the ctl key to select multiple options? document.querySelector('select').addEventListener('change', function(e) { console.log(this.selectedIndex) console.log(e.ta ...

javascripthtmladdeventlistenermultiple-select

Tips for centering a video vertically within a cell

I need assistance with aligning a video in the center of a fixed height cell while hiding the overflow at the top and bottom. Here is what I have so far: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height ...

htmlcsshtml5-video

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

phpjavascriptjqueryhtmliframe

utilize dynamic variable within the template's views

Here is a snippet of my HTML code var marker; function initMap() { map = new google.maps.Map(document.getElementById("mymap"), myOptions); getMapMetadata([]); // setInterval(function(){ getMapMetadata([]); }, 3000); } function createMarke ...

javascripthtmlajaxdjangotweak

What is the best way to implement jQuery on my website?

Instead of copying all the example code here, you can check out the jQuery demo page: Demo Page I would like to integrate the Latest News example with scrolling text in red from the demo page into my website. The demo page also provides links to the sour ...

javascriptjqueryhtmlcss

"Utilizing ng class with an array of objects: A step-by-step guide

I am facing a scenario in which my response appears as follows: "currency" : [ { "_id" : ObjectId("584aad5d3e2537613e5f4c39"), "name" : "USD" } ], I need to enable my checkbox based on the currency name. I attempted the followi ...

javascriptcssangularjsarrays

Symbol for infinity does not appear correctly within the span element

I am currently facing an issue where HTML entities are not displaying within a span element. Specifically, I am attempting to show &infin; if there is no destroy date for my object. Interestingly, when the entity is moved outside of the span, it appear ...

htmlruby-on-rails-4

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

This strange error is puzzling because it appears on some of the webpages I create, but not on others, even though the elements are exactly the same. For instance, this issue does not occur: <main:uiInputBox onDarkBG="${hasDarkBG}" name="quest ...

javascripthtmlstringjspjstl

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...

javascripthtmlcss

What is the best way to have gulp monitor my sass file updates and generate a single css file?

I'm currently working on a project using ASP.NET MVC 5 framework and Visual Studio 2013. In order to automate the process of compiling my sass files and publishing them into a bundle.css file, I decided to utilize gulp. Here are the steps I took: I ...

cssnode.jssassgulp

Angular is having trouble with the dropdown feature when using Semantic UI

I'm having trouble with the dropdown not displaying any items when I click on it. Here is the source code for reference: <div class = "ui centered grid"> <div class = "ten wide column"> <form class = "ui form"> <h4 cl ...

htmlangularsemantic-ui

What is causing Angular to consistently display the first object in the array on the child view, while the child .ts file correctly prints information from a different object?

Once a card of any object is clicked, the information of that specific object will be printed to the console. However, the child view will only display the details of the first object in the array it retrieves from. All pages are included below. A visual e ...

htmlangulartypescriptparent-child

Counter is effective for the initial post, yet it does not function properly for the subsequent post

Can anyone help with an issue I'm having with my JavaScript counter? It works for the first comment, but not the second one. This problem persists whether I use PHP or JavaScript. Below is the JavaScript code for the counter: var count = (function() ...

javascriptphphtml

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the &#862; entity, like this: t&#862;t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...

htmlcss

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

cssgoogle-chromepdfprintingresume

A pale tooltip with a light arrow appearing against a soft white backdrop

Can someone help me figure out how to display a white tooltip with a white arrow? I've tried to implement it using the code below, but the white color is not visible against the background. Any suggestions on making it stand out? $(function () { ...

javascripthtmljquerycsstooltip

What could be causing the message "Please right click to enable Adobe Flash Player" to appear on my site?

Recently, every time I try to reload my webpage, a strange message from Adobe Flash Player pops up and quickly disappears, even though I don't have any flash animations on my site. It's puzzling me as to why this is happening. If you'd like ...

google-chromeflashreactjshtmlmaterial-ui

-=:Heading with a decorative vertical line=:-

Currently, I am working on a CSS project that requires page titles (headings) to be centered with horizontal lines positioned vertically on both sides. Additionally, there is a background image on the page which means the title's background must be tr ...

htmlcsspseudo-class