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

Align the logo in the center of the navbar with items placed on either side

Looking for a way to center my brand logo within my navbar with menu items positioned around it? Preferably without the use of javascript? I've tried different methods, including adjusting the Bootstrap navbar styling, but haven't found a perfect ...

htmlcsstwitter-bootstrapnavigation

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

javascripthtmlcssonmouseoveronmouseout

Tips for incorporating a mail button to share html content within an Angular framework

We are in the process of developing a unique Angular application and have integrated the share-buttons component for users to easily share their referral codes. However, we have encountered an issue with the email button not being able to send HTML content ...

htmlangulartypescriptemailoutlook

Enhance the appearance of your image by adding a stylish frame or border without altering its

Is there a way to add a frame to an image without causing it to shrink due to borders? Below is the code I have tried using: .img-border { height: 100%; width: 100%; position: absolute; z-index: 1; } <div class="border border-black i ...

htmlcssimageframe

Font malfunctioning on Microsoft Edge and Internet Explorer

Apologies if this seems like a silly question, but I recently imported a font from my computer into a CSS file. While it displays correctly in Chrome, it's not working in Microsoft Edge or Internet Explorer. Unfortunately, I don't have access to ...

cssgoogle-chromeinternet-explorermicrosoft-edge

Why isn't the show/hide feature in Jquery functioning properly?

I have a div that needs to be displayed after hovering over another element. These elements are not within the same div. The popup info should appear when an icon with the class .option_36_124 is hovered over. $(".option_36_124").hover(function(){ $(& ...

javascriptjqueryhtmlcss

Obtain the Chosen Item from a List Box Using JQuery and Separate by Commas

Seeking further assistance with the following issue. I have set up the code on jsfiddle at... http://jsfiddle.net/justinerswell/feDTU/ I am looking to extract the last item in the substr and then work backwards to fill in the necessary fields. Appreciat ...

jqueryhtmlloops

Magnific Popup displaying only the initial item

As someone new to using jQuery and Magnific Popup, I am working on a grid of images. When an image is clicked, I want Magnific Popup to display a specific div containing information relevant to that particular image. <div class="grid"> <div c ...

javascriptjqueryhtmlmagnific-popup

Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code: <svg width="120" height="240" > <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> ...

htmlcsssvg

Is there a way to send the image object to the onclick function as it is being assigned?

I apologize if my question is a bit unclear, as I am currently teaching myself how to use javascript. I am working on generating image thumbnails dynamically and would like the ability for users to enlarge the image when they click on the thumbnails. The p ...

javascripthtmlcss

Guide on presenting mysql results in a more visually appealing way by displaying them in 3 separate table columns instead of

HELP NEEDED: I have been searching for a solution to my problem extensively, both here on StackOverflow and through Google. However, none of the suggested posts or examples seem to address my specific issue. As a beginner, I am struggling to adapt the solu ...

phphtmlmysql

Switching the typeface within the content data

Recently, I incorporated this code: <div data-content="Reach" class="main-image"> along with the following CSS styling: .main-image:before { content: attr(data-content); I am now wondering if there is a method to adjust the font size and ...

css

Is there a way to define a specific browser for executing GWT tests?

In my GWT project, I am utilizing the HTML5 canvas feature. During testing, I rely on GWTTestCase to ensure application functionality. Some functions are only supported in Firefox starting from gecko 1.9. However, while testing with Firefox 3.0.1, err ...

firefoxgwthtmlcanvastesting

Background image that covers the entire screen, div elements that scroll on top of the landing screen initially

As a beginner in the world of coding, I apologize for any simple errors in my attempt. Despite researching this issue, I have not been able to find a precise solution that fits my needs. My goal is to create a full-screen background for the landing page. ...

javascriptjqueryhtmlcss

PHP displays an HTML table with error messages

I recently created a table by extracting data from a database using a loop to retrieve all the necessary information. However, I encountered an error after calling a javascript function in the HTML onClick event of an input element. The function itself wor ...

phphtmlhtml-tableecho

If the color of the border matches and the width of the border is equal to

As I navigate through multiple divs, my goal is to identify those with a distinct blue border. Furthermore, if a main div possesses a blue border, I need to check for any inner divs that also have a blue border or a border width of 3px. If the main div has ...

jqueryhtmlcss

Activate a specific table by inputting the data from a different table

I am attempting to automate the calculation of a table by inputting values from another table. There are two tables involved; the first one has an input field named profit_rate, and the second one is supposed to calculate cost * currency_rate * profit_rate ...

javascripthtmlajax

X-Ray Rendering in Three.js and Webgl

Looking to create an x-ray effect in three.js / webgl. Something like this: UPDATE I am seeking help on how to achieve a real-time render with the x-ray effect, instead of just a static image. This can be accomplished using shaders that modify density i ...

javascripthtml3dthree.jswebgl

Using jQuery functions to disable adding or removing classes with a click event

Has anyone had success implementing a functionality where a div expands upon clicking, and reverts back to its original state when clicking on a cancel link within the same div? <div class="new-discussion small"> <a class="cancel">Cancel&l ...

javascriptjqueryhtmlcss

Utilizing CSS float with dynamic height

Is there a way to achieve height:auto; for a parent element even when child elements are using float:left; or float:right? Solution for the Parent Element: #parent { width:100px; height:auto; padding-bottom:10px; background:#0F0; ...

htmlcss