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

Rearranging Twitter Bootstrap Grid Columns

Is it possible to rearrange columns in Bootstrap without using col-sm-pull-12/col-sm-push-12? I'm struggling to achieve the desired layout. Are there any alternative methods to accomplish this task? Check out this JSFiddle for reference. <div cla ...

htmlcsstwitter-bootstrap

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

htmlcssangularalignment

How to vertically align and center multiple divs with Flexbox programming

I have been grappling with the challenge of aligning two sets of rows vertically, each consisting of an image on one side and text on the other. While I usually use flex to achieve vertical alignment, it seems that a different approach is needed in this pa ...

reactjscssflexboxmaterial-ui

Having trouble with the functionality of the jQuery `has()` method?

Consider the following HTML code snippet: <div class="comment"> <span class="test">some content here</span> <p>Lorem ipsum</p> </div> <div class="comment"> <p>Lorem ipsum</p> </div> The ob ...

javascriptjqueryhtmlif-statement

Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so: var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)" ...

javascriptjquerycsshtml

How can you deactivate all form elements in HTML except for the Submit button?

Is there a method available to automatically deactivate all form elements except the submit button as soon as the form loads? This would entail pre-loading data from the backend onto a JSP page while restricting user access for editing. Users will only be ...

javascriptjqueryhtmljsp

Is it possible to interpret all events from multiple perspectives?

Is it possible to listen for events in three different ways? This example shows how we can listen for the load event: 1. <body onload="doSomething();"> 2. document.body.onload = doSomething; 3. document.body.addEventListener('load', doS ...

javascripthtmldom-events

I am having trouble aligning the unordered list in the center

My struggle lies in centering the ul element which serves as a menu. Despite trying various CSS properties such as margin: 0 auto;, text-align: center;, and adjusting the margin value, I am unable to achieve the desired result. This is the CSS code I have ...

htmlcss

Error in Angular async pipe: Input argument of type 'any[] | null' cannot be assigned to a parameter of type 'any[]'

Having an issue with using the async pipe in Angular within an *ngFor loop. Here is my code snippet: <ul> <li *ngFor="let user of users | async | search:(filterValue | async)!">{{ user.name }}</li> </ul> The error I am encou ...

htmlangularpipe

Make sure to validate a form when submitting from an external source rather than through an HTML

In my form, there are various input fields (some acting as inputs even if they're not). Each field is validated upon submission by angular validation and html attributes like required, ng-maxlength, minlength, etc. Now, we want to implement a keyboar ...

javascriptjqueryangularjshtml

Developed a basic HTML form using PHP, however encountering issue where email is not being posted and instead opening a blank page

After creating HTML and PHP documents, I encountered an issue where upon submitting the form, I ended up with a blank page and didn't receive the expected email containing the form information. As someone relatively new to this, I would greatly apprec ...

phphtml

Show the json data on a PHP table

I've been attempting to showcase JSON content in a PHP table, but I keep encountering errors. It seems like there are some syntax issues that I can't quite pinpoint. Any suggestions on what needs to be modified? PS. I'm using the Slim frame ...

phphtmljsonhtml-tableslim

Incorporating SCSS directly in React component along with material-ui styling

I'm having trouble incorporating styles into my React component. I'd prefer to use SCSS instead of either using the withStyle function or importing a plain CSS file into a JS file. For instance, I would like to import my SCSS file into ButtonCom ...

javascriptcssreactjssassmaterial-ui

Enhance the dropdown menu by incorporating a caret icon

Click here for the image, I am trying to incorporate the Bootstrap caret class into my select dropdown menu. .select_menu{ font-size: 12px; outline: none; border: thin #ddd solid; -webkit-appearance: none; -moz-appearance: none; appearance: ...

htmlcsstwitter-bootstrap

Randomly switch out the wordpress header image at designated intervals

I have a custom header image on my website that displays 6 random images each time the site is visited. I am attempting to change this group of images while the user is browsing my site. Here is the code I am using: function show_banner(){ document.ge ...

javascriptphphtmlcsswordpress

How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice. <div ng-show="poll.userVoted"> <table class="result-table"> <t ...

cssangularjsconditional-statements

Navigation arrows for sliding`

Is there a way to add custom right/left arrows to the Ionic slider component? Demo: Check it out on Stackblitz Note: Make sure to refer to the home.html page for more details. https://i.sstatic.net/jQ62l.png .html <ion-slides [pager]="true" [slide ...

cssangulartypescriptionic3swiper.js

Submit information from an HTML form to a PHP script and then send the response back to the client using AJAX,

Looking to run a PHP script using AJAX or JavaScript from an HTML form and then receive the results on the HTML page. This is what my changepsw.php file looks like: <?php // PHP script for changing a password via the API. $system = $_POST['syst ...

javascriptphpjqueryhtmlajax

JavaScript Accordion malfunctioning

I'm attempting to implement an accordion feature for each row of an HTML table using the script provided below HTML <table class="list" id="table" data-bind="visible: !loading()"> @*<table class="productTable" data-bind="sortTable:true" ...

javascriptjqueryhtmlcss

Cordova: Opening App through a Website Link Click

Embarking on my app development journey, I recently dived into creating an Android app with Cordova. However, I found myself stuck at a particular issue: In the sign-up process, users receive an email containing an activation link to click and confirm the ...

androidhtmlcordova