Tips for aligning two divs vertically and horizontally next to each other

I'm struggling to center two divs both horizontally and vertically at the top of my page. I've tried various methods like "vertically align" & "margin: auto 0", but nothing seems to work. Can anyone help me figure out what I'm doing wrong? Thanks in advance!

https://i.stack.imgur.com/KFea5.png

HTML:

<div class="wrapper">

  <div id="find-us" class="col-md-5">
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Our Office</h5>
    Our office is located in the heart of Seven Sisters; an up and coming area in North London. Seven Sisters has had a lot of improvement in recent years with the Central & European investments into the area.<br>
    Seven Sisters have an excellent transport links. Commuters have the options of Victoria line to West End or British rail to Liverpool Street.<br><br;

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Contact</h5>
    Telephone: 020 8211 0005<br>
    Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34515a45415d465d5147745556565544465b445146404d475146425d5751471a575b1a415f">[email protected]</a><br>
    Address: ABBA Property Services, 88 West Green Road, London N15 5NS<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Transport</h5>
    Tube/Train: Seven Sisters Underground Station, Seven Sisters Railway Station, South Tottenham Railway Station<br>
    Bus: 41, N41<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Opening Hours</h5>
    Monday: 9am - 5pm<br>
    Tuesday: 9am - 5pm<br>
    Wednesay: 9am - 5pm<br>
    Thursday: 9am - 5pm<br>
    Friday: 9am - 5pm<br>
    Saturday: 10am - 1pm<br>
    Sunday: Closed<br>
  </div>

  <div id="find-photo" class="col-md-5">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.0948652696484!2d-0.07885818431106212!3d51.584824712860375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761c1135485d4b%3A0x487d1b5ae3bd4621!2s88+W+Green+Rd%2C+London+N15+5NS!5e0!3m2!1sen!2suk!4v1491925605605" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>

</div>

CSS:

#wrapper {
  vertical-align: bottom;
}
#find-us {
  margin: 0 auto;
  padding: 15px;
  border: 1px solid pink;
  font-size: 12px;
}
.col-centered{
  float: none;
  margin: 0 auto;
}
#find-photo {
  height: 100%;
}
#contact-form {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  margin-left: 30%;
  margin-top: 50px;
  text-align: center;
  border: 1px solid black;
}
htmlcss

Answer №1

CSS code: display: flex; align-items: center; justify-content: center;
is applied to the .wrapper class

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
#find-us {
  padding: 15px;
  border: 1px solid pink;
  font-size: 12px;
}
.col-centered{
  float: none;
  margin: 0 auto;
}
#find-photo {
  height: 100%;
}
#contact-form {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  text-align: center;
  border: 1px solid black;
}
<div class="wrapper">

  <div id="find-us" class="col-md-5">
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Our Office</h5> Our office is located in the heart of Seven Sisters; an up and coming area in North London. Seven Sisters has had a lot of improvement in recent years with the Central & European investments into the area.<br> Seven Sisters have an excellent transport
    links. Commuters have the options of Victoria line to West End or British rail to Liverpool Street.<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Contact</h5> Telephone: 020 8211 0005<br> Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05606b74706c776c6076456467676475776a756077717c766077736c6660762b666a2b706e">[email protected]</a><br> Address: ABBA Property Services, 88 West Green Road, London N15 5NS<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Transport</h5> Tube/Train: Seven Sisters Underground Station, Seven Sisters Railway Station, South Tottenham Railway Station<br> Bus: 41, N41<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Opening Hours</h5> Monday: 9am - 5pm<br> Tuesday: 9am - 5pm<br> Wednesay: 9am - 5pm<br> Thursday: 9am - 5pm<br> Friday: 9am - 5pm<br> Saturday: 10am - 1pm<br> Sunday: Closed<br>
  </div>

  <div id="find-photo" class="col-md-5">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.0948652696484!2d-0.07885818431106212!3d51.584824712860375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761c1135485d4b%3A0x487d1b5ae3bd4621!2s88+W+Green+Rd%2C+London+N15+5NS!5e0!3m2!1sen!2suk!4v1491925605605"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>

</div>

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

Prevent the crawling of HTML segments by utilizing HTML-XSL parsing techniques

I am currently working with Watson Explorer FC 11.0.2 and I am facing a challenge in excluding certain HTML tags from the Watson crawlers. I am using an XSLT parser to extract metadata, title, and body from an HTML page located at the following path: "/h ...

htmlxmlxsltibm-watsonwatson-explorer

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

javascripthtmlcssarraysjson

What is the best way to showcase my background image using html and css?

I've come across a similar topic addressing my problem, but I am still unable to resolve it. I am attempting to add a background image to my portfolio, but for some reason, it is not working. Can anyone offer any suggestions or ideas? Here is the cod ...

htmlcssbackground-image

It is not possible to apply a background color to an HTML element located outside of the App.Vue

Hey there, thanks for taking the time to read my query! I am interested in adding a gradient background color to a specific page on my Vue application. I tried applying the following code in components/Frontpage.Vue: html { background: linear-gradient( ...

cssvue.jsvuejs2vue-component

The problem of a static click function not working when clicked on a link. What is the solution for this

Details I am currently using a flickity slideshow that automatically goes to the next picture on a click. Within the slideshow, I have placed a button with text and a link to an external website (e.g. ). My Problem: When I click on the link, my slidesho ...

javascriptjquerycssperformanceflickity

A step-by-step guide on using a loop to display three images per row

The issue at hand is quite logical... I'm attempting to create a photo gallery by fetching image URLs from a database... The problem arises when I try to display them in HTML. I'm using bootstrap for the layout, where each row should contain 3 im ...

phphtmlbootstrap-4logic

What could be the reason for the lack of a border below the navigation bar in this code?

I am attempting to create a navigation bar with a simple thin border that becomes thicker when hovered over. Although I have written the code below, it seems to not be working as intended. How can I fix this issue? #top-menu ul li a { display: block ...

htmlcss

Resizing tables dynamically using HTML and JavaScript

I am attempting to reproduce the functionality demonstrated in this example When dealing with a large table, I want it to resize to display 10 entries and paginate them accordingly. The only thing I require is the pagination feature without the search bar ...

javascriptjqueryhtmldatatableshtml-table

Having trouble displaying image using absolute path in Express

Currently, I am developing a NodeJS application and have encountered an issue with a div element that has a background-image set in an external CSS file. Surprisingly, the CSS file functions perfectly when tested independently, and the background image dis ...

javascripthtmlcssnode.jsexpress

Instructions for correctly integrating the ng2-datepicker module into an Angular 2 application

Ng2-datepicker (1.0.6) Angular2 (2.0.0-rc.5) As I attempted to implement it in my HTML following the documentation, I encountered the following error: zone.js:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngMode ...

javascripthtmlcssangularng2-datepicker

Ways to transfer information from HTML form components to the Angular class

I am currently working with angular 9 and I have a requirement to connect data entered in HTML forms to the corresponding fields in my Angular class. Below is the structure of my Angular class: export interface MyData { field1: string, textArea1 ...

htmlangulartypescriptangular-forms

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

Error: The specified object does not contain the 'tableRow' method

I am currently working on a contacts book project and I need a table to update as the user inputs data. However, I keep encountering an error related to 'tableRow'. I have tried changing function names and other solutions but haven't been ab ...

javascripthtmlhtml-table

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

javascriptjquerycsshtml

The starting point of an html text is signified by < and it concludes with >, showcasing

My HTML <div> <Sample text> </div> <div> <SampleText> </div> In both examples above, blank content is appearing after the DOM is created. I anticipate displaying the text as it appears. Your assistance with this matt ...

html

Styling Angular2 Material Dialog: the perfect fit

The Angular2 material team recently unveiled the MDDialog module at https://github.com/angular/material2/blob/master/src/lib/dialog/README.md I am interested in customizing the appearance of Angular2 material's dialog. Specifically, I want to adjust ...

cssangularangular-materialangular-material2

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Having created a simple Bootstrap 5 template for my Joomla 4 website, I've been attempting to customize the navbar with CSS in my user.css file. However, it seems that the styles added in user.css are not being applied. I have verified that user.css ...

cssbootstrap-5joomla4

Align the image in the middle using JavaScript for Firebase

I am struggling to display the center of an image within a circle-shaped <img> tag with a border-radius of 50%. The issue arises when trying to display an image fetched from Firebase storage, rather than from a URL. In attempt to solve this problem, ...

javascriptjqueryhtmlcss

I am experiencing issues with a few of my design choices not functioning correctly

I am facing issues with some of my styles. I have put in a lot of effort, but there seems to be a problem with my menu. The last part of my CSS is not functioning correctly. When hovering over the menu content, I want it to turn black and... #site_menu { ...

htmlcss

Tips for updating multiple bundled javascript files with webpack

I am working on a straightforward app that requires users to provide specific pieces of information in the following format. Kindly input your domain. User: www.google.com Please provide your vast URL. User: www.vast.xx.com Select a position: a) Bottom ...

javascripthtmlnode.jswebpackwebsocket