Keeping Code Structure Consistent
To maintain a consistent code structure, align the elements in a single line by using inline display and float the date range to the right.
.title-right {
float: right;
}
.title-left {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
<div class="col-md-8"
<h1 id="title">Education</h1>
<h4 class="title-left">University</h4>
<span class="title-right"> 2009 - 2015</span>
<span>B.Sc in Computer Science</span>
<span> Grades: 2:1</span>
<span>
<h4>Highschool</h4>
<p>2006 - 2009</p>
</span>
</div>
</div>
This approach eliminates the need to include the date range in the header as suggested in Maddy's answer, which may not comply with proper HTML5 semantics.
Additional considerations:
- Avoid using paragraphs for non-paragraph content. Utilize
<span> for building lines from multiple elements without needing to specify display:inline repeatedly.
- Refactor inline styles into classes to improve code readability and maintainability.
Enhanced Code Organization
Traditional Approach
If you prefer a two-column layout, create separate <div> sections for each line and set text alignment accordingly.
.float-right {
float: right;
}
.inline {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
<div class="col-md-8">
<h1 id="title">Education</h1>
<div>
<h4 class="inline">University</h4>
<span class="float-right"> 2009 - 2015</span>
</div>
<div>
<span>B.Sc in Computer Science</span>
<span class="float-right"> Grades: 2:1</span>
</div>
<div>
<h4 class="inline">Highschool</h4>
<p class="float-right">2006 - 2009</p>
</div>
</div>
</div>
Modern Approach
By applying flexbox styling within an existing DOM structure, achieve streamlined alignment of content within rows without altering the underlying markup.
.side-layout {
display: flex;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
<div class="col-md-8">
<h1 id="title">Education</h1>
<div class="side-layout">
<h4>University</h4>
<span> 2009 - 2015</span>
</div>
<div class="side-layout">
<span>B.Sc in Computer Science</span>
<span> Grades: 2:1</span>
</div>
<div class="side-layout">
<h4>Highschool</h4>
<p>2006 - 2009</p>
</div>
</div>
</div>