Ensure that the content is perfectly aligned with the rest of the page for a visually pleasing

Seeking guidance on how to symmetrically center an image gallery with a list background, regardless of the browser's size. Any tips for aligning content perfectly?

I attempted using a wrapper around the gallery and list with a fixed width, but it only altered the image size, not the background list. I also experimented with floating elements, which caused everything to shift.

.months {
  display: inline-block;
  text-align: justify;
  color: #808080;
  width: 44.4%;
  margin-top: 25px;
}

.months ul {
  list-style-type: none;
}

.months li {
  background-color: #ffffff;
  padding: 16px;
  border-bottom: 1px solid #808080;
}


.tourCities {
  display: inline-block;
  width: 260px;
  margin: 15px;
  background-color: #ffffff;
}

.tourCities img {
  width: 100%;
  height: auto;
}

http://jsfiddle.net/xza7g439/

Included a jsfiddle link for reference.

https://i.sstatic.net/BOEHw.jpg This is my desired outcome https://i.sstatic.net/8yMTE.jpg Unfortunately, this is what I end up with, and it just doesn't look right – impacts my OCD.

htmlcss

Answer №1

Here's a way to achieve this look:

Styling with CSS

body {
  background-color: #000;
  box-sizing: border-box;
}

.wrapper{
  display: inline-block;
  width: 500px; //Adjust size here (px, %)
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


.months {
  display: inline-block;
  text-align: justify;
  color: #808080;
  width: 100%;
  margin-top: 25px;
}

.months ul {
  list-style-type: none;
  margin:0;
  padding:0;
}

.months li {
  background-color: #ffffff;
  padding: 16px;
  border-bottom: 1px solid #808080;
}


.tourCities {
  display: inline-block;
  width: calc(50% - 8px);
  background-color: #ffffff;
  vertical-align: middle;
  float: left;
  margin: 16px 0px;
}

.cities .tourCities:nth-child(2n+0) {
  margin-right:0;
  margin-left: 16px; //pixel perfection
}

.tourCities img {
  width: 100%;
  height: auto;
}

.desc {
  text-align: justify;
  padding: 5px;
}

.date{
  font-weight: 100;
  color: #808080;
}

.smlBtn {
  color: #ffffff;
  background-color: #000000;
  border-style: none;
  padding: 14px;
}

HTML Structure

<div class="wrapper">

  <div class="months">
    <ul>
      <li>September</li>
      <li>October</li>
      <li>November</li>
    </ul>

  </div>
  <div class="cities">
    <div class="tourCities">
      <img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="New York" width="245" height="184">
      <div class="desc">
        <p>
          <b>New York</b>
        </p>
        <p class="date">Fri 27 Nov 2019</p>
        <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
        <button class="smlBtn">Buy Tickets</button>
      </div>
    </div>
    <div class="tourCities">
      <img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="Paris" width="245" height="184">
      <div class="desc">
        <p>
          <b>Paris</b>
        </p>
        <p class="date">Sat 28 Nov 2019</p>
        <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
        <button class="smlBtn">Buy Tickets</button>
      </div>
    </div>
    <div class="tourCities">
      <img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="San Francisco" width="245" height="184">
      <div class="desc">
        <p>
          <b>San Francisco</b>
        </p>
        <p class="date">Sun 29 Nov 2019</p>
        <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
        <button class="smlBtn">Buy Tickets</button>
      </div>
    </div>

  </div>
</div>

View the demonstration here

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

The function driver.find_element is unable to locate an element using the "class_name" attribute

My attempt at using driver.find_element, with the "class_name" method to locate and click on a button for expanding rooms on this website resulted in an error message: raise exception_class(message, screen, stacktrace) selenium.common.exceptions.N ...

pythonhtmlselenium-webdriverweb-scraping

Placing a div above the navigation bar in jQuery Mobile to create multiple stacked footers

I am currently facing an issue with my website where I have a static nav bar at the bottom of each page, but I need to add another content div above it. When I try to position it as a footer, it ends up in the same spot as the nav bar. Absolute positioning ...

jquerycssmobile

Utilizing CSS classes to namespace pseudo-selectors

After attempting to search on Google, I am struggling to find the right keywords. I'm trying to apply a pseudo-selector only to a specific class. In this scenario, if we remove the specified class, the last Hi should appear in blue. However, my expe ...

css

Visible Overflow Causing Issues

When I shrink my browser window horizontally, my logo disappears, especially in mobile phone view. Check out zanifesto.com for more details. I have tried setting the css to overflow:visible, but it still doesn't solve the issue. My objective is to ...

csswordpressresponsive-design

How to reference color variables from code behind in ASP and use them in CSS files

I have a total of 3 files dedicated to my Login-Screen: Login.aspx, Login.aspx.cs, and LoginStyle.css Upon the execution of the Page_Load method, I retrieve various data from the current system, including the theme-color represented as a string (e.g., #00 ...

cssasp.netcode-behind

"Interactive feature allowing users to edit and view the most recently inserted HTML

My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...

jqueryhtmlcsscontenteditable

Is there a way to display the back and forward buttons on a popup window opened through window.open or self.open in Chrome browser?

When I try to open a popup window using the code snippet below, I am facing some issues. self.open('myJSPPage','ServicePopUp','height=600,width=800,resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes,location=yes'); Afte ...

javascripthtmlbrowser

Simple Design Techniques for HTML Tables

I seem to be having trouble with the table styles when I include text in the <td> section: <td rowspan="3"> 30th May 2014 17:35... What could be the issue? <style type="text/css"> .tftable {font-size:12px;color:#333333;width:100%;borde ...

htmlcsshtml-table

Is it possible to add data in MongoDB without specifying a field name?

I have a couple of queries that revolve around the same concept: If I want to insert a new 'row' in MongoDB, can I do so by specifying the order of the fields? For instance, if my collection looks like items = { { name: "John", age: "28" ...

javascripthtmlmongodbreactjsmeteor

A single pixel border surrounding an odd number of divs

I've been struggling with a persistent issue and I'm determined to find a solution. My goal is to achieve the following design using css: https://gyazo.com/c8ae39ebc4795027ba7c1067a08d3420 Currently, I have an uneven number of divs styled as fo ...

htmlcss

Aligning the icon within the div and adding a gap between each div

I'm fairly new to web design, specifically dealing with html and css, and I'm attempting to create something similar to the design in the following image: https://i.sstatic.net/Dy5F3.png My struggle lies in centering the fa-envelope-o icon both ...

htmlcss

What is the best way to access and display the innerText of elements that have been removed using console

When I call the updateCartTotal() function, my goal is to display in the console the items that have been removed from the shopping cart. Every time I click on the remove button, I want it to show the item and the price. However, instead of displaying the ...

javascripthtml

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

javascripthtmlcsssvg

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

Sorry if my wording is a bit off, I'm still relatively new to working with CSS and HTML. I've encountered an issue where the dropdown options appear much larger than the select box itself when clicked. I can't seem to figure out how to fix i ...

htmlcssselectdropdown

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

In my Angular 4 project, I have integrated Bootstrap, Fontawesome, and some custom CSS. However, all these styles are rendering as separate tags at the top of my index.html file. I would like them to be combined into a single bundled CSS file for better ...

htmlcssangular

Toggle sideBar within an iFrame by implementing Media Queries

I have implemented media queries in my code to hide the .sideBar when the screen resolution is less than 768px, showing only the .main section. @media (max-width: 768px) { .sideBar { display: none !important; } } Now, I want to add a ha ...

htmlcss

Encountered a problem while attempting to create two separate div elements. The template root is designed to have only one element. This issue

<template> <div class="footerpart-container"> <div class="general-container"> dadada </div> <div class="legal-container"> dadad </div> <div class="helpsupport-container"> dada ...

htmlcssvue.js

Sidebar collapse using Bootstrap

I have been working on creating a collapsible sidebar that pushes the content on the right, but I'm facing issues with responsiveness. When I display the sidebar, the content is getting compressed instead of pushed. I tried adding flex-shrink-0 to the ...

csstwitter-bootstrapbootstrap-5

Trouble Encountered with AngularJS ng-bind-html and Text not Wr

I am facing an issue with a table cell containing very lengthy text. While the text displays properly in edit mode, it overflows and does not adhere to the width of the cell when not in edit mode. I even tried removing it from ng-bind-html, but the problem ...

htmlangularjstwitter-bootstrap

Show different JSON data based on the existence of another key in Javascript

Having recently started learning JavaScript, I attempted the code below but couldn't quite get it to work. Despite consulting various resources, I still wasn't successful. Desired Output: To check if AUTO damage is present in the data. If so, re ...

javascripthtmlangularjsjson