The right-floating element is not fully aligning to the right

I have encountered an issue with my two columns of boxes. The left side is fine, but the right side doesn't float all the way to the end of the container. I have double-checked for any margins that might be causing this, but there are none present, so I'm puzzled as to why it's not aligning properly.

You can view the problem in action on this fiddle:

Here

If you notice the small text/note saying 'click a service to find out more', it sits perfectly aligned to the right edge of the container. My aim is to get the tabs on the right side to also align in the same manner.

On a side note, I have added a hover effect where the background color transitions from left to right. However, I've noticed that the transition isn't smooth and doesn't go off completely when sliding back. Even though I have included the transition code for the main element, it still doesn't work as intended.

Could anyone provide insight into why these aspects aren't functioning as expected?

htmlcsscss-floatcss-transitions

Answer №1

Check out the updated fiddle here to see the colored left and right floats in action.

Your CSS rule was causing issues due to these two properties:

.service-tab-block {
    padding: 3.5em 20px;
    width: 85%;

I made some changes to address this:

.service-tab-block {
    width: calc(100% - 60px);   /* adjusted for padding and margin */
    ....
}
#service-tabs-right .service-tab-block {
    margin-left: 20px;
}

To improve the transition effect, update your code from:

transition:width 0.2s ease;
-webkit-transition:width 0.2s ease;

to:

transition:all 0.2s ease;
-webkit-transition:all 0.2s ease;

Answer №2

Discover the solution with operational transitions

Cascading Style Sheets (CSS)

#service-tabs {
    width: 100%;
    padding: 100px 0;
    height: auto;
    background: #F0F0F0;
    overflow: auto;
}
#service-tabs-container {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
#service-tabs-container-title {
    color: #404040;
    font-size: 1.3em;
    margin-bottom: 15px;
    text-align: left;
}
#service-tabs-container-title2 {
    color: #578570;
    font-size: 2.8em;
    margin-bottom: 20px;
    line-height: 1.4em;
    text-align: left;
}
#service-tabs-container-note {
    margin: 40px 0;
    font-size: .7em;
    text-align: right;
}
#service-tabs-left {
    float: left;
    width: 50%;
}
#service-tabs-right {
    float: right;
    width: 50%;
}

.right1{
margin-right: -3%;
}

.service-tab-block {
    position: relative;
    font-size: 1.6em;
    padding: 3.5em 20px;
    /*padding: 1em 25px;*/
    width: 85%;
    text-align: center;
    color: #FFF;
    display: block;
    margin: 30px 0;
    cursor: pointer;
    border: none;
    background-image: linear-gradient(to right, #000 50%, #578570 50%);
    background-size: 201% 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    transition:width 0.2s ease;
    -webkit-transition:all 0.2s ease;
}
.service-tab-block.active {
    background: #000;
    color: #FFF;
}
.service-tab-block:hover {
    -webkit-transition: all 0.2s ease-in;
    transition:0.4s all ease-in;
    background-position: bottom left;
    color: #FFF;
    border: none;
}

HyperText Markup Language (HTML)

<div id="service-tabs">
  <div id="service-tabs-container">
    <div id="service-tabs-container-title">EXPLORE OUR SERVICES</div>
    <div id="service-tabs-container-title2">List of Services</div>
    <div id="service-tabs-container-note">* Click on a service for more details.</div>
    <div id="service-tabs-left">
        <h1 class="service-tab-block" id="service_tab1">DEMOLITION</h1>
        <h1 class="service-tab-block" id="service_tab2">CONCRETE CRUSHING</h1>
        <h1 class="service-tab-block" id="service_tab3">SCRAP METAL RECYCLING</h1>
    </div>
    <div id="service-tabs-right" class="right1">
        <h1 class="service-tab-block" id="service_tab4">ASSET RECOVERY</h1>
        <h1 class="service-tab-block" id="service_tab5">FOUNDATION REMOVAL</h1>
        <h1 class="service-tab-block" id="service_tab6">SITE WORK</h1>
    </div>
  </div>
</div>

Answer №3

Give this code a try!

#service-tabs {
  width: 100%;
  padding: 100px 0;
  height: auto;
  background: #F0F0F0;
  overflow: auto;
}
#service-tabs-container {
  width: 100%;
  text-align: center;
}
#service-tabs-container-title {
  color: #404040;
  font-size: 1.3em;
  margin-bottom: 15px;
  text-align: left;
}
#service-tabs-container-title2 {
  color: #578570;
  font-size: 2.8em;
  margin-bottom: 20px;
  line-height: 1.4em;
  text-align: left;
}
#service-tabs-container-note {
  margin: 40px 0;
  font-size: .7em;
  text-align: right;
}
#service-tabs-left {
  float: left;
  max-width: 50%;
}
#service-tabs-right {
  float: right;
  max-width: 50%;
}
.service-tab-block {
  position: relative;
  font-size: 1.6em;
  padding: 3.5em 20px;
  padding: 1em 25px;
  width: 85%;
  text-align: center;
  color: #FFF;
  display: block;
  margin: 30px 0;
  cursor: pointer;
  border: none;
  background-image: linear-gradient(to right, #000 50%, #578570 50%);
  background-size: 201% 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  transition: width 0.2s ease;
  -webkit-transition: width 0.2s ease;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.service-tab-block.active {
  background: #000;
  color: #FFF;
}
.service-tab-block:hover {
  background-position: bottom left;
  color: #FFF;
  border: none;
}
<div id="service-tabs">
  <div id="service-tabs-container">
    <div id="service-tabs-container-title">WHAT WE OFFER</div>
    < <div id="service-tabs-container-title2">Our Services</div>
  <div id="service-tabs-container-note">* Click a service to find out more.</div>
  <div id="service-tabs-left">
    <h1 class="service-tab-block" id="service_tab1">DEMOLITION</h1>
    <h1 class="service-tab-block" id="service_tab2">CONCRETE CRUSHING</h1>
    <h1 class="service-tab-block" id="service_tab3">SCRAP METAL RECYCLING</h1>
  </div>
  <div id="service-tabs-right">
    <h1 class="service-tab-block" id="service_tab4">ASSET RECOVERY</h1>
    <h1 class="service-tab-block" id="service_tab5">FOUNDATION REMOVAL</h1>
    <h1 class="service-tab-block" id="service_tab6">SITE WORK</h1>
  </div>
</div>
</div>

Answer №4

Would you consider including this in your CSS?

#service-tabs-right .service-tab-block{
  float: right;
  margin-bottom:0px;
}

Revised Response.

Answer №5

Give the codes below a try.

To create partitions within the divs, ensure that the parent width is set to 100%, then allocate each child div with 50% of the width.

#service-tabs-container {
    clear: both !important;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
<div id="service-tabs-container">
        <div id="service-tabs-container-title">WHAT WE OFFER</div>
        <div id="service-tabs-container-title2">Our Services</div>
        <div id="service-tabs-container-note">* Click a service to find out more.</div>


      <div class="" style="width:100%">
            <div id="service-tabs-left">
                <h1 id="service_tab1" class="service-tab-block">DEMOLITION</h1>
                <h1 id="service_tab2" class="service-tab-block">CONCRETE CRUSHING</h1>
                <h1 id="service_tab3" class="service-tab-block">SCRAP METAL RECYCLING</h1>
            </div>
            <div id="service-tabs-right">
                <h1 id="service_tab4" class="service-tab-block">ASSET RECOVERY</h1>
                <h1 id="service_tab5" class="service-tab-block">FOUNDATION REMOVAL</h1>
          <h1 id="service_tab6" class="service-tab-block">SITE WORK</h1>
      </div></div>

I hope this will be beneficial for you.

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

How about creating a responsive layout using only CSS3 for dynamic width adjustments?

I'm struggling to solve a design challenge involving three columns: a navbar (dark gray), main content (dark red), and sidebar (dark green). The navbar should be expandable and collapsible, while the sidebar should slide in and out. My goal is to make ...

htmlcssflexbox

PHP and MySQL not displaying the image

I have written the following code to display information about an image, including its file, but for some reason, it is not appearing on the screen. <?php include('config/dbconnect.php'); if(isset($_GET['id'])) ...

phphtmlmysqlcssimage

Seeking guidance on creating an uncomplicated CSS tooltip

Can anyone help me troubleshoot why my CSS tooltip isn't working correctly? I've been trying to create a simple method for tooltips, but they are displaying inconsistently across different browsers. In Firefox, the tooltips appear in random locat ...

csstooltip

Issue: Angular 6 - Changing background color of HTML element not reflected in component

I'm facing an issue with my login page where I can't seem to change the background color. While I was able to successfully change the background color of the app-login element (the name of my login component) by adding :host { display: bl ...

cssangularbootstrap-4angular6

Using Jquery and css to toggle and display active menu when clicked

I am trying to create a jQuery dropdown menu similar to the Facebook notification menu. However, I am encountering an issue with the JavaScript code. Here is my JSFiddle example. The problem arises when I click on the menu; it opens with an icon, similar ...

javascriptjqueryhtmlcss

Unlock the power of Font Awesome with the <i> </i> tag - Nibbler

I could use some assistance with a concept that I'm finding particularly challenging. After running my website through Nibbler, my goal is to achieve a perfect 10/10 score in all (or most) categories. However, I am facing difficulty due to the 17 in ...

htmlcssfont-awesome

The block tag on line 8 is invalid: 'endblock'. Have you perhaps overlooked registering or loading this tag?

As a newcomer to Django, I have been learning from various Youtube tutorials. Even though I followed the steps exactly, I encountered a block tag error in my code. Here is an excerpt from my base.html template: <head> <meta charset="UTF-8"& ...

pythonhtmldjango

Locate and activate hyperlink using RSelenium

My script below interacts with a Japanese geolocation website, successfully accesses a new page, but encounters issues locating and clicking on a specific link using RSelenium. library(XML) library(RSelenium) remDr <- remoteDriver( remoteServerAddr ...

cssrxpathweb-scrapingrselenium

Issues with Google Fonts displaying poorly on Chrome

While working on my project, I've encountered an issue with the rendering of Source Sans Pro from Google Fonts in Chrome. Sometimes the font completely breaks, and unfortunately, I haven't been able to pinpoint when or why this occurs. At times, ...

cssgoogle-chromefonts

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

javascripthtmlcsssvgraphael

How can 2 block-level <div> elements be positioned side by side?

After reading through w3schools.com, I discovered that the div element is considered a block-level element in HTML (meaning that the browser will include line breaks before and after it). But then comes the question: how can you have 2 divs positioned nex ...

html

Retrieving the width and height of a DIV element using Javascript

Currently, I am attempting to retrieve the width and height of a div element as it is being changed by the user and then pass that data to another page. However, I am encountering difficulties in obtaining the width and height values. <script> $(fun ...

javascriptjqueryajaxhtmlsize

Round Modal Design using Bootstrap

I have successfully created a circular form bootstrap modal, but I am struggling with how to insert text in the center of the circle responsively. Can anyone help? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boots ...

htmlcssmodal-dialog

Unable to update the list's text color to a white hue

I have a list with glyphicons that turn black when I hover over them, but I want them to appear white instead. My list is using bootstrap. Here is the list: <ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;fon ...

htmlcssbootstrap-4

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Form that is generated dynamically is malfunctioning

Having issues with an AJAX function that dynamically populates a list of elements from the database. Each element includes a display picture and a name, along with a hidden field containing a variable captured on another page via POST to display image and ...

phpjavascripthtmlajaxdynamic

Problems Arising from Bootstrap Label and Input Field Alignment

I'm encountering an issue with my Angular app that uses Bootstrap 4. I'm trying to have my form label and input text box appear on the same line, but instead, they are displaying on separate lines. I've tried searching for a solution, but ha ...

htmlcssangulartwitter-bootstrapbootstrap-4

What is the method for writing to an HTML file with the use of expressjs?

Alright, I have an interesting idea here. I am looking for a way to allow users to push a button and have a new p element permanently added to the HTML file. This means that even after reloading the page, everyone should be able to see this new element. An ...

javascripthtmlcssnode.jsexpress

Retrieve the selected option value from a dropdown menu when hovering or making a change within the same event

Apologies for my poor English. Is there a way to retrieve the value of a select box when a user either changes the select box or hovers over it with just one event? I attempted the following code snippet but it did not work as expected: jQuery("select[nam ...

javascriptjqueryhtml

How can you specify the maximum width and height for a TextField in JavaFX using CSS?

Is there a way to set preferred and maximum width and height for a TextField using CSS? ...

cssjavafx