What is causing two inline-blocks not to align at the top within the parent wrapper div?

Question

What is causing two inline-blocks not to align at the top within the parent wrapper div?

I have set up my HTML structure in the following way:

<div id="wrapper">
    <div id="main">
        <p>test</p>
    </div>
    <div id="sidebar">
        <p>test</p>
    </div>
</div>

Here is the accompanying CSS styles:

#wrapper {
    width: 960px;
    margin: 0 auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0;
    margin: 0;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
}

You can view an example at this link: http://jsfiddle.net/Hpwff/

The issue I am facing is that even though the total width of both divs adds up to 960px, which is equal to the width of the parent container (#wrapper), they do not align side by side. I find myself having to reduce the width of either the sidebar or main container by 4px for them to fit together seamlessly. Can anyone explain why this happens and suggest a workaround?

html css

Answer 1

Answer №1

There is a line break separating the two div elements; as they are set to display as inline-block, this line break appears as a space when rendered. If you remove that space, it will function as intended. Check out an example here.

Answer 2

There is a line break separating the two div elements; as they are set to display as inline-block, this line break appears as a space when rendered. If you remove that space, it will function as intended. Check out an example here.

Answer 3

Answer №2

To get the desired effect, simply add float: left; to each div element! See the updated jsFiddle for reference.

Here is the updated code:

#wrapper {
    width: 960px;
    margin: 0px auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    float: left;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    float: left;
}

Answer 4

To get the desired effect, simply add float: left; to each div element! See the updated jsFiddle for reference.

Here is the updated code:

#wrapper {
    width: 960px;
    margin: 0px auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    float: left;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    float: left;
}

Answer 5

Answer №3

Check out this amazing solution on jsfiddle. Make sure to include float: left in your main and sidebar sections, followed by a clear block for proper layout.

Answer 6

Check out this amazing solution on jsfiddle. Make sure to include float: left in your main and sidebar sections, followed by a clear block for proper layout.

Answer 7

Answer №4

<div id="container">
    <div id="content">
        <p>example</p>
    </div><div id="sidebar_content">
        <p>example</p>
    </div>
</div>

There is no gap between </div> and <div>

Answer 8

<div id="container">
    <div id="content">
        <p>example</p>
    </div><div id="sidebar_content">
        <p>example</p>
    </div>
</div>

There is no gap between </div> and <div>

Answer 9

Answer №5

One of the classic tricks involves adjusting the font sizes within a container to achieve a specific layout. In this case, you set the font size of the wrapping container (#wrapper) to 0px and adjust the font sizes for each child element as needed.

This technique is widely supported across different browsers, except for Safari in this instance where it may not work as expected.

To implement this trick, your code should resemble the following:


#wrapper {
    width: 960px;
    margin: 0 auto;
    font-size: 0px;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

You can test this setup on an existing jsfiddle project to see how it performs.

Answer 10

One of the classic tricks involves adjusting the font sizes within a container to achieve a specific layout. In this case, you set the font size of the wrapping container (#wrapper) to 0px and adjust the font sizes for each child element as needed.

This technique is widely supported across different browsers, except for Safari in this instance where it may not work as expected.

To implement this trick, your code should resemble the following:


#wrapper {
    width: 960px;
    margin: 0 auto;
    font-size: 0px;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

You can test this setup on an existing jsfiddle project to see how it performs.

What is causing two inline-blocks not to align at the top within the parent wrapper div?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Achieve perfect alignment both vertically and horizontally within a container-fluid using Bootstrap

Is there a way to keep my SVG aligned with the edge of the screen?

How can you enable scrolling on overflow in a Bootstrap column?

What are the potential ways in which an html IMG tag can disrupt the functionality of this

Customize the Carousel navigation arrows in Bootstrap 3

Find what you're looking for by exploring the search results inside the text box marked

Consistently directing to a single page on the Node Js web server

Download functionality is functional in Chrome but not in Explorer when using jQuery

Having trouble importing the name 'RadioChoiceInput' from the 'django.forms.widgets' module during the migration from Django 1.19 to 3.2

Scroll function not functioning properly in Internet Explorer

Steps for inserting an image:

Display the menu on the left side for mobile devices

The calendar on the datetime picker is malfunctioning and not displaying any dates

When rendering in React, retrieving the value from sessionStorage always yields a single result

Erase blob_over from the Wordpress menu hover effect

Issues with redirecting with .htaccess in Angular HTML5 site are currently unresolved

Unoccupied whitespace created by using Bootstrap

Manipulate inherited CSS styles from an external source

Troubleshooting Issue: Google Map not resizing correctly when window size changes

In JavaScript/jQuery, there is a technique for retrieving the values of dynamically generated td attributes and the id tags of elements inside them within tr