It's impossible for me to align two blocks at the same level

Question

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented with float:left and display:inline-block, but haven't been able to fix it yet. Any ideas on how to resolve this?

/* CSS Document */
body {
margin:0 auto;
padding: 0;
background: url(../img/7_092641_2_meitu_1.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 15px; 
color: #E2E2E2; 
line-height: 24px; 
font-family: '微软雅黑';
}
...
...

...                   
                            
</footer><!--footer-->   
</div><!--wrapper-->

</body>
</html>

html css

Answer 1

Answer №1

Here are a few different approaches you can take:

Utilize flexbox, taking into consideration browser support. If you're targeting IE10 and above, this is a solid choice.
Use display: table on the parent element and apply display: table-cell to the left and right containers.
Ensure the container with the greatest height remains in the page flow while setting the second container's positioning to absolute. Then, include height: 100% on the positioned container.

Answer 2

Here are a few different approaches you can take:

Utilize flexbox, taking into consideration browser support. If you're targeting IE10 and above, this is a solid choice.
Use display: table on the parent element and apply display: table-cell to the left and right containers.
Ensure the container with the greatest height remains in the page flow while setting the second container's positioning to absolute. Then, include height: 100% on the positioned container.

Answer 3

Answer №2

To achieve the desired layout, adjust the position of .mid to relative, while setting mid_left and mid_right positions to absolute. By doing this, mid_left and mid_right will be stacked on top of each other, with mid_right taking precedence due to its later appearance in the HTML code.

Answer 4

To achieve the desired layout, adjust the position of .mid to relative, while setting mid_left and mid_right positions to absolute. By doing this, mid_left and mid_right will be stacked on top of each other, with mid_right taking precedence due to its later appearance in the HTML code.

Answer 5

Answer №3

It is important to have a good understanding of how the box model functions.

Visit this link for more information on the CSS box model.

Remember that when you include attributes like border and padding, it increases the overall width of your box.

For example, if you have a container div with a width of 1000px, be mindful of two key points:

Ensure that when placing two divs inside the container each with a width of 500px (one on the left and one on the right), the total of width + border + padding does not surpass the 500px limit.
In cases where you are using inline-block elements, there may be instances where white space appears between the blocks causing the second block to shift slightly. To prevent this issue, make sure there are no spaces between the left and right divs in the HTML code. If modifying the HTML is not an option, you can set the containing element's font-size to 0px and then reset the font size within the left and right elements back to 16px.

Answer 6

It is important to have a good understanding of how the box model functions.

Visit this link for more information on the CSS box model.

Remember that when you include attributes like border and padding, it increases the overall width of your box.

For example, if you have a container div with a width of 1000px, be mindful of two key points:

Ensure that when placing two divs inside the container each with a width of 500px (one on the left and one on the right), the total of width + border + padding does not surpass the 500px limit.
In cases where you are using inline-block elements, there may be instances where white space appears between the blocks causing the second block to shift slightly. To prevent this issue, make sure there are no spaces between the left and right divs in the HTML code. If modifying the HTML is not an option, you can set the containing element's font-size to 0px and then reset the font size within the left and right elements back to 16px.

Answer 7

Answer №4

My solution involved adding the style display: inline-block; for both the .mid_left and .mid_right classes, which proved to work flawlessly. It's also important to double check that there is no space between these two divs.

Answer 8

My solution involved adding the style display: inline-block; for both the .mid_left and .mid_right classes, which proved to work flawlessly. It's also important to double check that there is no space between these two divs.

Answer 9

Answer №5

If you want to make use of your existing code, follow these steps:

First, fix the typo in display from diaplay:

.mid_left {
    display: inline-block;
}

Next, add display: inline-block; to .mid_right.

Check out this example for reference: JSFiddle.

We hope this resolves your problem.

Answer 10

If you want to make use of your existing code, follow these steps:

First, fix the typo in display from diaplay:

.mid_left {
    display: inline-block;
}

Next, add display: inline-block; to .mid_right.

Check out this example for reference: JSFiddle.

We hope this resolves your problem.

It's impossible for me to align two blocks at the same level

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Steps for showcasing the data entered in the input box

A possible substitute for the "background-size" CSS attribute

Looking to enhance your navigation menu with drop shadows?

The canvas game's animation can only be activated one time

Utilizing AJAX and PHP to enhance Zend_Config_Ini

How to change from using position: sticky to fixed after scrolling to a specific div

Separate your buttons with style using the Bootstrap button groups with

Deactivating all HTML DOM elements except for those with a specific #id

What is the reason behind my resizer bar not changing color to green?

Highlighting table rows on mouseover using CSS

Unable to locate the specified script using node.js

When the Model popup is activated, it is essential for elements to have an adequate color contrast

What is preventing me from setting the height of a span to 0 pixels?

How can I implement a jQuery slide down effect for a specific individual instance?

The entire space on an HTML page should be occupied with content from the header to the footer

When the child content surpasses the height of the parent, you can scroll within an overflow:visible; div

Prevent elements from collapsing within the Bootstrap 5 grid system

What is the best way to prevent certain bootstrap classes from being applied across all elements?

JavaScript Accordion malfunctioning

The submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element