Tips on aligning multiple elements vertically in a justified manner

I'm struggling to articulate what I need, but I'll give it a shot. I want to vertically align three different elements, each wrapped in their own divs. This is my current code:

.service_info {
  margin-top: 45px;
  clear: both;
  background-color: #ffffff;
  font-family: "source-sans-pro", sans-serif;
}
.title_text_serviceinfo {
  margin-top: 85px;
  margin-left: 60px;
  padding-bottom: 20px;
  color: #333132;
  font-size: 24px;
  font-family: "source-sans-pro", sans-serif;
}
.service_info_times {
  margin-top: -110px;
  margin-left: 200px;
  font-size: 18px;
  line-height: 175%;
  border-left: 5px solid #0b496f;
  padding-left: 20px;
  color: #333132;
}
.service_info_events {
  postion: fixed;
  left: 300px;
  top: 20px;
  font-size: 18px;
  line-height: 175%;
  color: #333132;
}
<!--Service Information-->

<section class="service_info">
  <h2 class="secondary_header"> When We Gather </h2>

  <h3 class="title_text_serviceinfo"> Sunday </h3> 
  <div class="service_info_times">
    <ul>
      <li>7:00am</li>
      <li>8:30am</li>
      <li>9:00am</li>
      <li>10:15am</li>
      <li>4:00pm</li>
    </ul>
  </div>

  <div class="service_info_events">
    <ul>
      <li>Men's Prayer</li>
      <li>Fellowship Time</li>
      <li>Sunday School</li>
      <li>Worship Service</li>
      <li>Revolution Student Ministries</li>
    </ul>
  </div>

  <h3 class="title_text_serviceinfo"> Monday </h3>
  <div class="service_info_times">
    <ul>
      <li>6:00pm</li>
    </ul>
  </div>

  <div class="service_info_events">
    <ul>
      <li>Precept Bible Study</li>
    </ul>
  </div>

  <h3 class="title_text_serviceinfo"> Tuesday </h3>
  <div class="service_info_times">
    <ul>
      <li>9:15am</li>
    </ul>
  </div>

  <div class="service_info_events">
    <ul>
      <li>P.E.A.R.L.S. (Lady's Ministry</li>
    </ul>
  </div>

  <h3 class="title_text_serviceinfo"> Wednesday </h3>
  <div class="service_info_times">
    <ul>
      <li>7:00am</li>
      <li>7:00pm</li>
      <li>7:00pm</li>
      <li>7:00pm</li>
    </ul>
  </div>

  <div class="service_info_events">
    <ul>
      <li>Stronger Senior</li>
      <li>CLC</li>
      <li>Club 56</li>
      <li>House of Prayer</li>
    </ul>
  </div>
</section>

Any help in fixing other errors would be greatly appreciated as I am new at coding websites.

To see an image of the final product I'm aiming for, please visit: fujifame.com/art260/

Answer №1

Update: If you're looking for a cleaner solution, check out this codepen by @GCyrillus: http://codepen.io/gc-nomade/pen/raovxv

I made some tweaks to your code to make it work better. While this may help for now, I recommend rewriting the code altogether. According to your image, you should have two columns of divs - one for the day of the week and one for events. Make sure to add the CSS property float:left; to the second column divs, and use the clear: property if they do not align properly. Hopefully, this will get you started in the right direction!

.header{ clear:both; }
.service_info {
  margin-top: 45px;

  background-color: #ffffff;
  font-family: "source-sans-pro", sans-serif;
}
.title_text_serviceinfo {
  margin-top: 100px;
  margin-left: 60px;
  /*padding-bottom: 20px;*/
  color: #333132;
  font-size: 24px;
  font-family: "source-sans-pro", sans-serif;
  float:left;
  clear:left;
  width:140px;
}
.service_info_times {
  margin-top: 20px;
  /*margin-left: 200px;*/
  font-size: 18px;
  line-height: 175%;
  border-left: 5px solid #0b496f;
  padding-left: 20px;
  color: #333132;
  float:left;
  clear:right;
}
.service_info_events {
  font-size: 18px;
  line-height: 175%;
  color: #333132;
  clear:right;
}

.secondMargin{ margin-top:40px; }
.thirdMargin{ margin-top:80px; }
<section class="service_info">
  <div id = "header">
    <h2 class="secondary_header"> When We Gather </h2>
  </div>

  <h3 class="title_text_serviceinfo"> Sunday </h3> 
  <div class="service_info_times">
    <ul>
      <li>7:00am Men's Prayer</li>
      <li>8:30am Fellowship Time</li>
      <li>9:00am Sunday School</li>
      <li>10:15am Worship Service</li>
      <li>4:00pm Revolution Student Ministries</li>
    </ul>
  </div>



  <h3 class="title_text_serviceinfo secondMargin"> Monday </h3>
  <div class="service_info_times">
    <ul>
      <li>6:00pm Precept Bible Study</li>
    </ul>
  </div>

  <h3 class="title_text_serviceinfo secondMargin"> Tuesday </h3>
  <div class="service_info_times">
    <ul>
      <li>9:15am P.E.A.R.L.S. (Lady's Ministry)</li>
    </ul>
  </div>

  <h3 class="title_text_serviceinfo"> Wednesday </h3>
  <div class="service_info_times">
    <ul>
      <li>7:00am Stronger Senior</li>
      <li>7:00pm CLC</li>
      <li>7:00pm Club 56</li>
      <li>7:00pm House of Prayer</li>
    </ul>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the contents of a textbox by editing the text as you type

Text within the text box follows this format: login -u username -p password When entering this text, I want to substitute 'password' with a series of '*'s equal in length. For example: 'login -u <a href="/cdn-cgi/l/email-prot ...

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

Tips for dynamically setting up an inputStream in a Java <audio> tag within an HTML5 environment

I need to incorporate a dynamic inputStream from a web service into an HTML5 audio tag so that users can play it. How can I programmatically set the content of the HTML5 tag to achieve this? ...

Choose a checkbox by targeting a specific column value with XPath

While automating the testing with Selenium, I encountered an issue related to selecting a checkbox in a table row. To resolve this problem, I turned to XPath for assistance. Specifically, I needed to choose the row based on the file name. Below is the rele ...

The speed of the Ionic app is disappointingly sluggish on devices, causing significant delays

After testing my app in Ionic Lab, it runs smoothly. However, when I create the apk file and install it on my device, the performance is very slow. There are delays in clicking on buttons, pushing pages, opening modals, and closing modals. It seems like t ...

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

Concealing and revealing template URLs with AngularJS

I am currently working with a dynamic Array in my Controller that contains templates (html files) structured similarly to the example below: $scope.templates = [ { name: 'template1.html', url: 'template1.html'}, { name: ...

Activate the last div within the identical class

When I make an ajax call to fetch more results and append them to the existing ones on the same page, I want to display a scrolling spinner while the contents are being fetched. I am adding a div at the bottom of the fetched results like this: <div cla ...

Tips for concealing divs when hovering over them

I have designed a header for my website with the following styles: .header-cont { width:100%; position:fixed; top:0px; } .header { height:50px; background:#F0F0F0; border:1px solid #CCC; width:950px; margin:0px auto; } .hea ...

The stylesheet reference, <link rel="stylesheet" href="../css/style.css">, appears to be malfunctioning

My project structure includes css files in a folder named css and jsp files in a folder named jsp, both located inside the WEB-INF folder. I am wondering how to access the css file within a jsp file. <link rel="stylesheet" href="../css/style.css> T ...

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...

Determining the primary image in Galleriffic

After a recent inquiry, I am in the process of revamping a webpage to incorporate Galleriffic for optimized image loading, requiring me to delve deep into the intricacies of the task. I am encountering challenges in identifying the currently active image ...

Combining divs with identical values in Angular

I am working on creating my very own custom Calendar. Take a look at the full example of my component here I need help figuring out how to combine week divs that share the same value {{day.weekNumber}} so that there is only one div for each shared value, ...

Creating an animated full-width SVG with a background image

This has been quite a challenge for me. I have successfully implemented the main functionality that I wanted in this codepen. The SVG is divided into 3 sections, with the middle section sliding away from the others when you click the "Find Out More" button ...

Display a picture retrieved from a POST request using Angular and a Spring Boot backend

Recently, I've been delving into the world of HTTP requests. My latest task involves uploading an image from the client and sending it to the server using a POST request. When testing this process in Postman, everything works smoothly as I receive th ...

Unable to extract information from empty <td> using python and selenium

Currently, I am facing an issue while trying to fetch values from a <tr> using Python Selenium. Specifically, I need these values to be ordered and also identified based on whether they contain the word "PICK" or not. My goal is to determine the exa ...

Issues with autoplay not functioning in Chrome browser with Youtube iframe source

I have added an iframe code to my simple HTML page. I would like the video to autoplay when the page loads. It works perfectly in Firefox, but in Chrome, the autoplay feature does not work. Here is my code: <iframe width="420" height="345" src="https:/ ...

A step-by-step guide on customizing the background color of a Dialog in Angular Material (Version 16)

I've been attempting to modify the background color of my Angular Material Dialog by utilizing the panelClass property in the MatDialogConfig. Unfortunately, I'm encountering a partial success. I am aiming to set the background color as red (jus ...

How can I set the background of specific text selected from a textarea to a div element?

Is it possible to apply a background color to specific selected text from a Text area and display it within a div? let elem = document.getElementById("askQuestionDescription"); let start = elem.value.substring(0, elem.selectionStart); let selection = ...

Attempting to extract tabular information from a script function housed within a webpage

I'm attempting to extract data from a table on the following website: When using BeautifulSoup to 'find' the 'table', I encountered a NoneType error since the table appears to be generated by a script function that fetches 90 rand ...