By reading this article, you will understand the types and usage of CSS properties that allow you to align HTML elements side by side. It explains in detail using sample code, so please check it out from Programming Shoinsha to advanced users!
Table of contents
- How to align elements horizontally with CSS float
- What is float
- How to align elements horizontally with float
- How to create a horizontal two-column layout with float
- How to align elements side by side with CSS flexbox
- What is flexbox
- How to align elements side by side in flexbox
- How to create a horizontal two-column layout in flexbox
- How to display HTML side by side with inline-block element with CSS
- What is an inline-block element?
- How to align elements side by side with inline-block
- How to create a horizontal two-column layout with inline-block elements
- What to do when CSS doesn’t line up horizontally
- When elements do not line up horizontally with float
- When elements do not line up horizontally with inline-block
- When elements do not line up side by side in flexbox
- summary
How to align elements horizontally with CSS float
I will explain the specific usage from the characteristics of CSS float elements.
If you don’t know how to use float, or if you want to use float for horizontal display, please check it out.
What is float
Float is a CSS property that allows other elements to wrap around the specified element .
By using float, you can wrap the specified element to the right or left, so you can align the elements side by side.
The values that can be specified for float are as follows.
- none: Initial value of float does not specify placement
- right: Move the specified element to the right side of the display screen. If you specify right for multiple elements, there is a feature that wraps horizontally to the left of the elements.
- left: Moves the specified element to the left side of the display screen. When left is specified for multiple elements, there is a feature that wraps horizontally to the right side of the element
For example, if you specify “float: left;”, the elements are specified on the left side of the display screen as shown below, and displayed side by side from the right side.
How to align elements horizontally with float
I will explain how to align elements horizontally with float using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Web</title>
</head>
<style>
.left{
float: left;
}
.right{
float: right;
}
.box1{
width:200px;
height:100px;
background-color: chartreuse;
}
.box2{
width:200px;
height:100px;
background-color: rgb(0, 47, 255);
}
.box3{
width:200px;
height:100px;
background-color: rgb(255, 81, 0);
}
</style>
<body>
<div class="left box1"></div>
<div class="left box2"></div>
<div class="left box3"></div>
<div class="right">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</html>By specifying “float: left;” for multiple left classes, the element wraps around to the left.
If you specify float for multiple elements, they will wrap around the elements one after another horizontally, so you can achieve horizontal display.
Also, by specifying float for the parent element, you can move the child element left or right without aligning it horizontally.
Execution result
How to create a horizontal two-column layout with float
Use the clear property to create two rows of horizontal display with float.
The clear property can cancel wrap processing specified by the float property.
The available values and characteristics of the clear property are as follows.
- none: Do not cancel the wrapping process with the initial value of the clear property
- left: Cancel wrapping by “float: left;”
- right: Cancel wrapping by “float:right;”
- both: Cancels all wrap processing regardless of left or right.
If you specify the clear property in an element that specifies float, the wrapping will be canceled and a column will be created.
I will explain how to create two horizontal layouts with the clear property using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Web</title>
</head>
<style>
.left{
float: left;
width:200px;
height:100px;
}
.clear{
clear: both;
}
.box1{
background-color: chartreuse;
}
.box2{
background-color: rgb(0, 47, 255);
}
.box3{
background-color: rgb(255, 81, 0);
}
</style>
<body>
<h2>1</h2>
<div class="left box1"></div>
<div class="left box2"></div>
<div class="left box3"></div>
<div class="clear">
<h2>2</h2>
<div class="left box3"></div>
<div class="left box1"></div>
<div class="left box2"></div>
</div>
</body>
</html>Create a div class between the 1st and 2nd rows, and specify “clear: both;” in CSS to cancel the wrapping.
As a result, paragraphs are generated around the div tag that specifies the clear class. By specifying “float: left” for the subsequent elements as well as the first row, you can display them in the same horizontal state.
Execution result
How to align elements side by side with CSS flexbox
What is flexbox
Flexbox is a layout technique that allows you to manipulate arrays of HTML elements with simple code.
Flexbox has the concept of “containers” and “items”. Layout can be specified using flexbox within the scope of the container, and items are each element in the container.
With flexbox, you can implement horizontal alignment and alignment of HTML elements with a few lines of code. It is a recommended layout method because it allows you to create a layout with simple code and is easy to understand even for beginners.
You can read more about how to use flexbox in the article below.
How to align elements side by side in flexbox
Arranging elements horizontally using flexbox is easy, just specify “display: flex;” to the parent element that contains the elements you want to align horizontally .
If you want to change the horizontal alignment, you should use the justify-content property with “display:flex;”.
justify-content is a CSS property that allows you to change the position of horizontally aligned elements in flexbox.
The main values that can be specified for the justify-content property are as follows.
- center: center the items in the flexbox
- space-between: Specify the frontmost item on the left edge of the screen and the last item on the right edge of the screen with the width of each item equal.
- space-around: Arrange each item evenly.
I will explain how to arrange elements side by side with flexbox and how to change the arrangement method using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Webペ</title>
</head>
<style>
.flex{
display: flex;
}
.item{
width:200px;
height:100px;
}
.between{
justify-content: space-between;
}
.box1{
background-color: chartreuse;
}
.box2{
background-color: rgb(0, 47, 255);
}
.box3{
background-color: rgb(255, 81, 0);
}
</style>
<body>
<h2>display:flex;
<div class="flex">
<div class="item box1"></div>
<div class="item box2"></div>
<div class="item box3"></div>
</div>
<h2>justify-content
<div class="flex between">
<div class="item box1"></div>
<div class="item box2"></div>
<div class="item box3"></div>
</div>
</body>
</html>By specifying “display: flex;” to the flex class, it becomes a flexbox container, and the child elements that are items are displayed side by side.
The flexbox at the bottom is specified with “justify-content: space-between;” to change the placement of the horizontally aligned elements.
Execution result
How to create a horizontal two-column layout in flexbox
To display two columns in flexbox, use the flex-wrap property.
The flex-wrap property allows you to specify whether flexbox items wrap or not.
The values that can be specified for flex-wrap are as follows.
- nowrap: Display items as they are without wrapping.
- wrap: Wrap items to display multiple lines
- wrap-reverse: Specify wrap processing like wrap. Items are reversed.
This time, I will explain how to create a two-column display screen by specifying “flex-wrap: wrap;” in flexbox using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Web</title>
</head>
<style>
.flex{
display: flex;
flex-wrap: wrap;
}
.item{
width:50%;
height:100px;
}
.box1{
background-color: chartreuse;
}
.box2{
background-color: rgb(100, 127, 245);
}
.box3{
background-color: rgb(255, 81, 0);
}
</style>
<body>
<div class="flex">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
<div class="item box1">4</div>
</div>
</html>Specify “flex-wrap: wrap;” in the flexbox container to wrap the item. Furthermore, by setting the width of each item to 50%, it becomes a specification that two items are arranged in rows.
Execution result
How to display HTML side by side with inline-block element with CSS
What is an inline-block element?
An inline-block element is an element that has the characteristics of the block element and the inline element, which are types of HTML elements.
The characteristics of each element are as follows.
| element width | Line breaks for each element | Specify height and width | |
| block element | depend on parent element | be done | Possible |
| inline element | depends on the content of the element | won’t | impossible |
| inline-block element | depends on the content of the element | won’t | Possible |
Based on the above characteristics, the elements that can be displayed side by side are inline elements and inline-block elements that are displayed side by side without line breaks for each element .
Among them, the inline-block element that can specify the width and height of the element is easier to use, so it is suitable for horizontal specification.
To change the appearance of HTML elements, use the display property.
As shown above, you can change the type of element depending on the value specified for the display property.
How to align elements side by side with inline-block
I will explain how to change it to an inline-block element with the display property of CSS and display it side by side.
I will explain using sample code, so please check it out from beginners who want to learn by looking at the code to those who want to copy and paste it immediately.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Webペ</title>
</head>
<style>
.box{
display: inline-block;
width:200px;
height:100px;
}
.box1{
background-color: chartreuse;
}
.box2{
background-color: rgb(0, 47, 255);
}
.box3{
background-color: rgb(255, 81, 0);
}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box3"></div>
</body>
</html>Each HTML element is changed to an inline-block element by specifying “display: inline-block;”.
Execution result
How to create a horizontal two-column layout with inline-block elements
To create a two-column layout using the inline-block element, you can create it by enclosing each paragraph with a block element.
For example, by dividing 4 inline-block elements into 2 with a div tag, you can display 2 elements in 2 rows.
I will explain how to actually make it with a sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Webtitle>
</head>
<style>
.box{
display: inline-block;
width:200px;
height:100px;
}
.box1{
background-color: chartreuse;
}
.box2{
background-color: rgb(128, 149, 245);
}
.box3{
background-color: rgb(255, 81, 0);
}
</style>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
</div>
<div class="container">
<div class="box box3">3</div>
<div class="box box1">4</div>
</div>
</body>
</html>A two-column layout is created by enclosing each line break in a div tag, which is a block element, and specifying “display: inline-block;” for each item.
Execution result
What to do when CSS doesn’t line up horizontally
“I implemented a method that can be arranged side by side with CSS, but it does not work”
In such a case, it is necessary to check whether it is specified side by side in an appropriate way.
I will explain what to do if the horizontal method introduced in this article did not work.
When elements do not line up horizontally with float
If the elements do not line up horizontally even if float is specified, the following causes are possible.
- Is it specified for the element you want to align horizontally?
- Is the float properly reflected in the elements you want to align horizontally?
- Is the width of the parent element sufficiently secured?
First, let’s check again if float is specified for the elements you want to align horizontally.
For example, if you want to align the li tags horizontally with the code below, specifying a float for the ul tag of the parent element will not work.
<ul>
<li class="box1">1</li>
<li class="box2">2</li>
<li class="box3">3</li>
</ul>To align li tags horizontally, float must be specified for all li tags.
If that doesn’t work, use a verification tool to check if the float is properly reflected.
The details of how to use the verification tool are explained in the following article.
Also, if the width of the parent element is shorter than the width of the element you want to align horizontally, the child element will not fit inside the parent element and it will not work, so it is necessary to check .
When elements do not line up horizontally with inline-block
If the inline-block element is specified but the elements are not aligned horizontally, the following causes are possible.
- There is a gap such as padding or margin in the element width
- Inline-block is specified for the parent element
- The element you want to align side by side contains a block element
If specifying “display:inline-block;” and “width:50%;” does not work, the size may be larger than the parent element due to padding or margin.
Try reducing the padding or margin or lowering the width percentage and check again.
Also, when specifying inline-block, specify it for all the elements you want to align horizontally . Note that even if you specify it as a parent element, it will not line up horizontally.
When elements do not line up side by side in flexbox
If flexbox is specified and the elements are not aligned horizontally, the following causes are possible.
- Is “display: flex;” properly reflected?
- Is “display: flex;” specified for the child element?
Let’s check with the verification tool whether the “display: flex;”
There is a possibility that it is not going well due to typos, omissions, and double-byte characters.
Also, flexbox can be arranged horizontally by specifying “display: flex;” to the parent element of the element you want to arrange horizontally. Let’s check if it is specified in the parent element instead of the child element.
summary
This time, I explained various ways to arrange elements side by side with CSS. How was it?
The method and features of horizontal alignment introduced in this article are as follows.
- float: You can wrap the specified element horizontally.
- inline-block: By changing the type of HTML element to an inline-block element, it can be arranged side by side.
- Flexbox: You can align them side by side just by specifying “display: flex;” on the parent element. There are various ways to specify the placement location.
In particular, flexbox has the widest amount of code and the widest layout width, so side by side is of course a suitable method for creating layouts.
