Tips on aligning two divs horizontally on the same line

Question

Tips on aligning two divs horizontally on the same line

doc.html

.column {
  background-color: orange;
  width: 75%;
  vertical-align: top;
  display: inline-block;
  height: 200px;
}
.nav {
  vertical-align: top;
  display: inline-block;
  width: 25%;
  background-color: lightgreen;
  height: 200px;
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <link href="css2.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container elem">
    <div class="nav"></div>
    <div class="elem column"></div>
  </div>
</body>

</html>

I made doc.html and css2.css based on the information from this reference learnlayout. However, the page appears differently than expected. How can I align those two sections in one line? https://i.sstatic.net/CYkEE.png

html css

Answer 1

Answer №1

The CSS you've written is accurate; however, there is a common problem with whitespace that you need to address. It's important to ensure that there are no spaces between the tags in your code:

<body>
    <div class="container elem"><div class="nav"></div><div class="elem column"></div></div>
</body>

This issue arises because your content is inline, causing the whitespace between .nav and .elem to create a small gap (approximately 4px) that separates your <div> elements and disrupts the layout.

By placing the closing bracket immediately after the opening bracket of the next element, any whitespace in between becomes part of the tag's internal spacing and does not affect the content (since tags can accommodate whitespace between attributes and tag names without any issues).

Answer 2

The CSS you've written is accurate; however, there is a common problem with whitespace that you need to address. It's important to ensure that there are no spaces between the tags in your code:

<body>
    <div class="container elem"><div class="nav"></div><div class="elem column"></div></div>
</body>

This issue arises because your content is inline, causing the whitespace between .nav and .elem to create a small gap (approximately 4px) that separates your <div> elements and disrupts the layout.

By placing the closing bracket immediately after the opening bracket of the next element, any whitespace in between becomes part of the tag's internal spacing and does not affect the content (since tags can accommodate whitespace between attributes and tag names without any issues).

Answer 3

Answer №2

The issue of whitespace with inline-block elements is a common one. One way to address it is by setting font-size: 0; on the parent element.

.container.elem {
  font-size: 0;
}
/* Make sure to reset the font-size for child elements */

.column {
  background-color: orange;
  width: 75%;
  vertical-align: top;
  display: inline-block;
  height: 200px;
}
.nav {
  vertical-align: top;
  display: inline-block;
  width: 25%;
  background-color: lightgreen;
  height: 200px;
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

<div class="container elem">
  <div class="nav"></div>
  <div class="elem column"></div>
</div>

Another option is to float both divs to the left, but this approach comes with its own challenges and intricacies, so I recommend sticking with inline-blocks.

Answer 4

The issue of whitespace with inline-block elements is a common one. One way to address it is by setting font-size: 0; on the parent element.

.container.elem {
  font-size: 0;
}
/* Make sure to reset the font-size for child elements */

.column {
  background-color: orange;
  width: 75%;
  vertical-align: top;
  display: inline-block;
  height: 200px;
}
.nav {
  vertical-align: top;
  display: inline-block;
  width: 25%;
  background-color: lightgreen;
  height: 200px;
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

<div class="container elem">
  <div class="nav"></div>
  <div class="elem column"></div>
</div>

Another option is to float both divs to the left, but this approach comes with its own challenges and intricacies, so I recommend sticking with inline-blocks.

Answer 5

Answer №3

The problem lies in the whitespace. To resolve it, add the following CSS rule to the container:

.container{ font-size:0; }

Answer 6

The problem lies in the whitespace. To resolve it, add the following CSS rule to the container:

.container{ font-size:0; }

Answer 7

Answer №4

The process involves condensing them into a single line, unless the width of the parent element is specified and the total width of the combined elements exceeds that of the parent.

.container.elem div{
    float:left;
}

Answer 8

The process involves condensing them into a single line, unless the width of the parent element is specified and the total width of the combined elements exceeds that of the parent.

.container.elem div{
    float:left;
}

Tips on aligning two divs horizontally on the same line

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Customizing colors for the progress bar in Angular Material

Bootstrap4: What could be causing the adjacent row cell to remain left-justified instead of being centered as intended with mx-auto?

Regular expression that can be used to extract information from a text file by filtering and returning only

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Customizing Navigation Color on Laravel Websites for Staging and Live Servers

Issue with multiple dropdown menus not closing when clicked on

Styling elements with Css Flex in a single row

Exploring the tab-content features of Bootsrap 5 through anchor tags

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

The clickable areas for the href and onclick functions are extremely small and positioned inaccurately on the screen

Exploring the concept of nested arrays in Angular 2 using Typescript

What is causing my radio button event to activate when a separate radio button is selected?

The layout is being disrupted by a bug in the nested list div in IE 7

How can I implement a dynamic sidebar drawer in Bootstrap for my navbar?

Leveraging personalized data-* attributes within the <template> tag in HTML5

Achieving perfect alignment of two elements using flexbox: centering one and aligning the other to the right

Tips for updating the background color of a specific row

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

Modify the text tone within a specific cell

Implementing dynamic display of div based on dropdown selection in typescript