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

What is the method for writing the following line in CSHTML server-side code?

<script> function a(id) { var table = document.getElementById(id); .... } </script> @{ //Is there a way to rewrite the line "var table = document.getElementById(id)" here within the ser ...

javascripthtmlclient-sideserver-side

How can I set a default radio button selection when the page is loaded?

Input your radio button code below: <ion-radio ng-model="data.gender" ng-required="true" ng-value="'male'">Male</ion-radio> <ion-radio ng-model="data.gender" ng-required="true" ng-value="'female'">Female</ion-rad ...

angularjshtml

Styling emails with CSS: Tips for customizing fonts

I've been experimenting with setting a personalized font for an email. Within the HTML code of the email, I included the fonts using this snippet: <head> <style> /* latin-ext */ @font-face { font-family: &ap ...

htmlcssemailhtml-email

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

What is the best way to conceal a bootstrap directive tooltip in Vue.js for mobile users?

Currently, I'm tackling a project with Vuejs and Laravel. There's a tooltip directive incorporated that relies on Bootstrap's functionality. Check it out below: window.Vue.directive("tooltip", function(el, binding) { // console ...

javascripthtmlcssvue.js

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

javascriptphpjqueryhtmlcss

Center an absolutely positioned div using CSS

What is the best way to position an absolute div at the center? <div class="photoFrame">minimum width of 600px, positioned absolutely</div> jQuery var screenWidth = $(window).width(); $('.photoFrame').css({'margin-left': ...

jquerycsscenterabsolute

The issue of Ajax failing to execute an HTTP POST request in an HTML environment

I am creating a sample HTML code that involves making HTTP post requests using an Ajax function. The task at hand is to execute 2 HTTP POST requests and 1 GET request sequentially based on the correct response received. POST: URL: http://localhost:8082 ...

htmljsonajax

Angular 2 communication between parent and child components

I am having trouble incorporating an action button in the child_1 component, while the event handler is located in the sub child component, child_2. Here's a snippet of the code: app.component.html (Parent HTML) <div style="text-align:center"> ...

htmlangular

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

javascripthtmlcss

Conceal element when unchecked

There is a checkbox pre-selected labeled "Use profile address" with the address displayed below. If the customer unchecks the checkbox, the address that was shown before will disappear and a new input field for adding a different address will appear. I a ...

javascripthtml

PHPWord setup complication

I am struggling to run a PHPWord script. When attempting to execute the sample example Text.php, it does not display anything. I have verified that the class is loading successfully. You can find more information in the documentation. If anyone has encou ...

phphtmlms-worddoc

container dimensions for images

Is there a way to make an image adjust its size according to the container? For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to f ...

htmlcss

Maintaining the format of forms input in Rails and HTML: Tips and tricks

Hey there! I'm working on a Rails app that has a simple HTML form. One of the fields is called description, which is a text_area. I want to be able to display its input exactly as it was entered on the index page. For instance: If someone enters a l ...

htmlruby-on-railsruby-on-rails-3forms

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...

jqueryhtmlcssmenunavigation

The background-size property in CSS does not seem to properly display on iPhones

Hello there! I'm facing an issue with my CSS code when it comes to displaying the image on Safari browser. It works perfectly fine on other browsers, but for some reason on Safari, the image doesn't show up correctly. I tried using a media query ...

htmlcsssafari

Initial loading issue with HTML5 Canvas in Android WebView

As I work on developing a HTML5 canvas-based game within a WebView of an existing application, I encounter a puzzling issue. Upon the initial run of the game, everything seems to be in order - logs indicate that it's ready and running, yet nothing is ...

androidhtmlcanvashtml5-canvasandroid-webview

jQuery preventing form submission after returning false

There's a small issue that I need help with. After submitting the form and receiving a false response, it prevents resubmission. For example, if a user forgets to input their name, they will see an error message asking them to do so. However, the u ...

phpjqueryhtmlajax

Apply CSS styles conditionally to an Angular component

Depending on the variable value, I want to change the style of the p-autocomplete component. A toggle input determines whether the variable is true or false. <div class="switch-inner"> <p [ngClass]="{'businessG': !toggle }" clas ...

htmlcssangulartypescriptprimeng

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

javascriptjqueryhtmlfont-awesome