Is there a way to rearrange the tabs so that the first tab is at

Is there a way for me to align with the others without being stuck below #first_tab in the code?

I'm having trouble figuring it out on this website:

Your assistance would be greatly appreciated!

Thank you in advance!

CSS Code:

     #first_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
}

#content_first{font-size: 14px;color:white;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;padding-left: 10px;}

#title_first{text-align:left;color:#8CC63F; font-family: muli, sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.4;padding-left: 10px;}


#second_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left: 10px;

}

 #third_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left:10px;
}


#four_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left: 10px;

}

HTML Code:

 <div id="first_tab">
   <p id="title_first">Quality</p>
   <p id="content_first">Ensuring top-notch quality of our installations following European standards is central to our work. That's why we partner with reputable brands like Philips, Bosch, Zanussi.</p>


</div>

<div id="second_tab">



</div>

<div id="third_tab">



</div>

<div id="four_tab">



</div>
htmlcss

Answer №1

When using display:inline-block, the default alignment is set to baseline

To change this, you need to add vertical-align:top

#first_tab {
     width:210px;
     height:540px;
     display:inline-block;
     background: #264572;
     vertical-align: top;
 }
 #content_first {
     font-size: 14px;
     color:white;
     font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
     padding-left: 10px;
 }
 #title_first {
     text-align:left;
     color:#8CC63F;
     font-family: muli, sans-serif;
     font-size: 24px;
     font-weight: 500;
     letter-spacing: 2px;
     line-height: 1.4;
     padding-left: 10px;
 }
 #second_tab {
     width:210px;
     height:540px;
     display:inline-block;
     background: #264572;
     margin-left: 10px;
     vertical-align: top;
 }
 #third_tab {
     width:210px;
     height:540px;
     display:inline-block;
     background: #264572;
     margin-left:10px;
     vertical-align: top;
 }
 #four_tab {
     width:210px;
     height:540px;
     display:inline-block;
     background: #264572;
     margin-left: 10px;
     vertical-align: top;
 }
<div id="first_tab">
    <p id="title_first">Qualité</p>
    <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
</div>
<div id="second_tab"></div>
<div id="third_tab"></div>
<div id="four_tab"></div>

On a side note, there seems to be quite a bit of repetitive CSS in your code. Consider consolidating this into classes that can be applied individually to each element. Check out this Demo for more information.

Answer №2

Simply include the following CSS code block:

float: left;

within the styling of #first_tab element.

Answer №3

Give this a shot...

Try adding float:left to all tab classes
 #first_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        float: left;
}
#second_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left: 10px;
        float: left;

}

 #third_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left:10px;
        float: left;
}


#four_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left: 10px;
        float: left;

}

Answer №4

insert the #primary_tab"

padding: 10px;
display: inline-block;

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

Interactive sidebar scrolling feature linked with the main content area

I am working with a layout that uses flexboxes for structure. Both the fixed sidebar and main container have scroll functionality. However, I have encountered an issue where scrolling in the sidebar causes the scroll in the main container to activate whe ...

javascriptjquerycsshtml

Struggling to show labels in the correct position for each button?

I need help with aligning labels under buttons. I have 3 buttons, each with a corresponding label. I want the labels to be displayed in line under the buttons, and if the length of a label exceeds the button width, it should wrap to the next line. I'v ...

htmlcss

"Navigation Side Menu: w3-sidebar with hamburger toggle feature

If you are looking to implement the w3-sidebar, you can find it here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over The existing code uses a "hanburger" icon to open the side menu and a "Close X" menu item to close it. To simpl ...

jqueryhtmlcss

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area. Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/ $(document).ready(functio ...

javascriptjqueryhtmlcss

Guide on creating a toggle effect for a div with querySelector and addEventListener

I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information. <script> document.addEventListener('DOMContentLoaded', ...

javascripthtmlcss

implementing a time picker feature with jQuery

As I am not familiar with jQuery, I came across this script while searching for a time picker. If anyone could guide me on how to incorporate this code into my HTML page to enable the time picker functionality, I would greatly appreciate it. /* jQuery t ...

jqueryhtmlcss

Is It Possible to Create Flash Content Without Using a SWF File?

Is there a way to embed Flash directly in HTML, rather than linking to an external SWF file? I am looking to send an HTML form via email for the recipient to fill out by opening it in a browser. The final step would involve copying the result to their clip ...

javascripthtmlflashemail

Disappearing table borders in print view on Firefox

I have been working on creating a printable table that displays correctly in Chrome. However, when viewed in Firefox, the table borders are not showing up. <body> <table> <tbody> <tr> ...

htmlfirefoxprinting-web-page

When the caret triangle is upside down, it indicates that a drop-down menu is available even when the

I am facing an issue with a dropdown list where the triangle indicator is incorrectly displayed: https://i.stack.imgur.com/L4NBW.png Both images show that the arrows are in reverse direction, and I am struggling to identify the cause of this problem. He ...

javascriptjqueryhtmlcss

Enhancing infinite scroll functionality with ajax integration

After implementing a method to enable infinite scroll on my website using the following function: window.onscroll = yHandler; function yHandler(){ var wrap = document.getElementById('wrap'); var contentHeight = wrap.offsetHeight; var yOffset = w ...

javascriptjqueryhtmlajax

I am looking to showcase a series of icons linked together by connecting lines

I have successfully designed the layout and added icons, but I am facing difficulty in creating connecting lines between them. I attempted to utilize CSS borders and pseudo-elements, yet I cannot achieve the desired outcome. If anyone could offer a CSS-ba ...

javascripthtmlcsscss-selectorsweb-frontend

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

htmlcssreactjsmaterial-ui

Placing a materialUI circular progress bar on top of the circular icon

I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequ ...

cssreactjsmaterial-ui

What is the best way to ensure a floated image matches the height of its parent container?

I am facing an issue with setting the height of a logo within a footer div to match the height of the div itself. Using height: 100% doesn't seem to work as expected. Below is the relevant HTML: <footer> <img src="images/circle_logo.png" ...

cssimagehtmlcss-float

How to position a "figure" element at the center using CSS creatively (without relying on Div elements)

Struggling with my first website creation, I encountered a challenge in centering three inline-block images using CSS. Despite successfully using the figure tag to title and display the images, I couldn't get them to align horizontally from the cente ...

csshtml

Bootstrap along with ROR 3.2.21 has a malfunctioning navbar

I am facing an issue with the Home section in the navbar. It used to work perfectly, but suddenly it stopped displaying as intended. I have checked and confirmed that both boostrap.min.js and boostrap.min.css are loaded properly. I have included boo ...

cssruby-on-railsrubyruby-on-rails-3twitter-bootstrap

What is the most efficient way to dynamically alter the position of a div element within an HTML document using

In a scenario where a parent div contains multiple child divs, it is required that one particular child div named .div_object_last always stays at the end. Below is an example setup : HTML <div class="div_parent"> <div class="div_object"> ...

javascriptjqueryhtml

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

In my experience, I have been working with C#, HTML coding using VS2010 and MVC. Utilizing VS2010 has proven to be an invaluable tool for me in this process. Currently, I find myself needing to create some straightforward static web pages. I am wondering ...

javascriptjqueryhtmlcssvisual-studio-2010

Learn how to reposition the mat-option easily

I have an angular app with an autocomplete field that I need to adjust the position of. I have consulted the official documentation under the method updatePosition, which states: "Updates the position of the autocomplete suggestion panel to ensure that it ...

cssangulartypescriptmat-autocomplete

PHP 7.2 does not allow code to reference previously set sessions

Currently, I am utilizing sessions to transmit either a success or error message to the subsequent site by employing an included PHP file (message.php) to exhibit said message. Unfortunately, for unknown reasons, the message.php file is unable to referenc ...

phphtmlsessionphp-7