Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Make HTML dt and dd Elements Stay on the Same Line
HTML Description List or Definition List <dl> displays elements in dictionary format. The <dt> and <dd> tags are used together within the <dl> tag to define terms and their descriptions. By default, <dt> and <dd> elements display on separate lines, but CSS can be used to make them appear side by side on the same line.
Default Description List Behavior
Let us first see how description lists appear by default
<!DOCTYPE html>
<html>
<head>
<title>Default Description List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Dynamic programming language for web</dd>
</dl>
</body>
</html>
The output shows terms and definitions on separate lines
Programming Languages
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JavaScript
Dynamic programming language for web
Using CSS Float Property
The float property positions elements to the left or right of their container, allowing other content to wrap around them. By floating both <dt> and <dd> elements to the left with specific widths, they can be placed on the same line.
Syntax
Following is the syntax for the float property
float: none | left | right;
Where
none: Element does not float (default value).
left: Element floats to the left side of its container.
right: Element floats to the right side of its container.
Example
In this example, we use the float property with percentage widths to make <dt> and <dd> elements stay side by side
<!DOCTYPE html>
<html>
<head>
<title>Float Method for dt and dd</title>
<style>
dl {
background: #f0f8ff;
width: 100%;
overflow: hidden;
padding: 10px;
border: 1px solid #ddd;
}
dt {
background: #e6f3ff;
float: left;
width: 30%;
font-weight: bold;
padding: 5px;
margin: 0;
}
dd {
background: #fff;
float: left;
width: 65%;
margin: 0;
padding: 5px;
border-left: 2px solid #007acc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language for web structure</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets for web styling</dd>
<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl>
</body>
</html>
The output displays terms and definitions side by side in a table-like format
HTML | HyperText Markup Language for web structure CSS | Cascading Style Sheets for web styling JavaScript | Programming language for web interactivity
Using Float with Clear Property
The clear property combined with float provides better control over element positioning. The clear: left ensures each new term starts on a fresh line while maintaining the side-by-side layout.
Example
In this example, we use the clear property with float and add a pseudo-element for visual separation
<!DOCTYPE html>
<html>
<head>
<title>Float with Clear Method</title>
<style>
dl {
width: 400px;
border: 2px solid #8B4513;
padding: 15px;
background: #faf0e6;
}
dt {
float: left;
clear: left;
width: 100px;
text-align: left;
font-weight: bold;
color: #8B4513;
}
dt::after {
content: ": ";
font-weight: normal;
}
dd {
margin: 0 0 10px 0;
padding-left: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<dl>
<dt>Frontend</dt>
<dd>HTML, CSS, JavaScript development</dd>
<dt>Backend</dt>
<dd>Server-side programming and databases</dd>
<dt>DevOps</dt>
<dd>Deployment and infrastructure management</dd>
</dl>
</body>
</html>
The output shows terms aligned to the left with definitions flowing beside them
Frontend: HTML, CSS, JavaScript development Backend: Server-side programming and databases DevOps: Deployment and infrastructure management
Using Flexbox Layout
Flexbox is a modern CSS layout method that provides flexible and responsive positioning of elements. It allows easy alignment and distribution of space among items in a container, making it ideal for creating side-by-side layouts.
Key flexbox properties for this layout
display: flex: Makes the container a flex container.
flex-flow: Shorthand for flex-direction and flex-wrap.
flex-basis: Sets the initial main size of a flex item.
flex-grow: Defines how much a flex item should grow.
Example
In this example, we use flexbox to create a responsive side-by-side layout
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Method for dt and dd</title>
<style>
dl {
width: 500px;
display: flex;
flex-flow: row wrap;
border: 2px solid #9932cc;
background: #f8f0ff;
}
dt {
flex-basis: 25%;
padding: 8px 10px;
background: #9932cc;
text-align: center;
color: white;
font-weight: bold;
}
dd {
flex-basis: 75%;
flex-grow: 1;
margin: 0;
text-align: left;
padding: 8px 15px;
border-bottom: 1px solid #ddd;
background: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Technologies</h2>
<dl>
<dt>HTML5</dt>
<dd>Modern markup language with semantic elements</dd>
<dt>CSS3</dt>
<dd>Advanced styling with animations and layouts</dd>
<dt>ES6</dt>
<dd>Modern JavaScript with new syntax features</dd>
</dl>
</body>
</html>
The output shows a clean, modern layout with terms and definitions aligned horizontally
Web Technologies HTML5 | Modern markup language with semantic elements CSS3 | Advanced styling with animations and layouts ES6 | Modern JavaScript with new syntax features
Using CSS Grid Layout
CSS Grid provides another modern approach for creating structured layouts. It offers precise control over both rows and columns, making it excellent for definition lists.
Example
Following example uses CSS Grid to create a two-column layout
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Method for dt and dd</title>
<style>
dl {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 0;
width: 450px;
border: 2px solid #228B22;
background: #f0fff0;
}
dt {
padding: 10px 15px;
background: #228B22;
color: white;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
dd {
padding: 10px 15px;
margin: 0;
background: white;
border-bottom: 1px solid #ddd;
border-left: 1px solid #228B22;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Database Types</h2>
<dl>
<dt>SQL</dt>
<dd>Structured Query Language databases</dd>
<dt>NoSQL</dt>
<dd>Non-relational database systems</dd>
<dt>Graph</dt>
<dd>Network-based data relationship storage</dd>
</dl>
</body>
</html>
CSS Grid creates a perfectly aligned table-like structure with consistent spacing and borders.
2K+ Views
