Showing content in a way that spaces out below the text

Could someone assist me with a CSS problem I'm having? I understand CSS, but debugging is not my strong suit. When I use display: inline-block for both my Academic Information and Personal Information, I'm getting extra white space below (above "Tell Us More About You").

It seems like that white space is the space Personal Information would occupy if it wasn't on the same line as Academic Information.

I want to remove the space above "Tell Us More About You" and have both sections touching each other.

Below is the HTML code (I'm aware of the downsides of inline styling):

<html>
 <head>
    <title>test</title>
 </head>
 <body>
 <div style="display: inline-block;"><a style="font-size: 16pt;">ASAP APPLICATION   FORM</a><img style="margin-left: 400px; height: 35px;" src="../css/images/asap_logo.png">  </div>
    <hr>

    <div>Date Submitted: <b><?php echo $_GET['dateSubmitted'] ?></b><br></div><br>

    <div style="display: inline-block;">
        <h3><i>ACADEMIC INFORMATION</i></h3>
        <div>
            Major:&nbsp;&nbsp;&nbsp;<b><u><?php echo $_GET['major'] ?></u></b>
            <div style="margin-top: 8px;">Expected Graduation Year:&nbsp;&nbsp;&nbsp;<b><u><?php echo $_GET['gradDate'] ?></u></b></div>
            <div style="margin-top: 8px;">Relevant work?:&nbsp;&nbsp;&nbsp;<b><u><?php echo ucfirst($_GET['work']) ?></u></b></div>
        </div>
    </div>

    <div style="display: inline-block; margin-left: -300px;">
        <h3><i>PERSONAL INFORMATION</i></h3>
        <div>
            Name:&nbsp;&nbsp;&nbsp;<b><u><?php echo $_GET['firstName']." ".$_GET['lastName'] ?></u></b><br>
            <div style="margin-top: 8px;">Address:&nbsp;&nbsp;&nbsp;<b><u><?php echo $_GET['address'] ?></u></b><br></div>
            <div style="margin-top: 8px;">Phone:&nbsp;&nbsp;&nbsp;<b><u><?php echo $_GET['phone'] ?></u></b><br></div>
            <div style="margin-top: 8px;">Email:&nbsp;&nbsp;&nbsp;<b><u><?php echo $_GET['email'] ?></u></b></div>
        </div>
    </div>

    <h3><i>TELL US MORE ABOUT YOU</i></h3>
    <b>Position(s) interested in:</b>&nbsp;&nbsp;&nbsp;<?php echo $_GET['positions'] ?>
    <br>
    <b>Do you have work-study?</b>&nbsp;&nbsp;&nbsp;<?php echo ucfirst($_GET['workStudy']) ?>
    <br>

    <span>Describe your creative strengths:</span>
    <textarea><?php echo $_GET['previousExperience'] ?></textarea>

    <span>Briefly describe your previous work experience:</span>
    <textarea rows="10" cols="40"><?php echo $_GET['creativeStrengths'] ?></textarea>

    <span>What are your skills?:</span>
    <textarea rows="10" cols="40"><?php echo $_GET['skills'] ?></textarea>

    <span>What interests you about this position?:</span>
    <textarea rows="10" cols="40"><?php echo $_GET['interests'] ?></textarea>

 </body>
 </html>

Snapshot (this will be turned into a PDF):

htmlcss

Answer №1

Consider wrapping the bottom section in a div with display:inline-block for consistency.

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

HTML is unable to recognize the CSS file. Maven and Spring are the solutions

I'm having some trouble connecting my CSS to my HTML. This is the structure of my folders: https://i.sstatic.net/B9bHx.png Here is my HTML code: https://i.sstatic.net/XyE4E.png I've tried several methods to make it work. Interestingly, every ...

htmlcssspringmaven

JQuery will only run after the Alert has been triggered in Firefox

I am currently facing an issue with updating the 'like' count in my database using the 'changeRating()' method when a user interacts with local like, Facebook like, or Twitter buttons. Oddly enough, the 'likes' are not being ...

javascriptjqueryhtmlajaxfirefox

Struggling to devise a for loop for a JavaScript-generated list

I'm attempting to loop the content of an H1 element through a list 10 times. I seem to have made a mistake in my code and would appreciate any guidance. var headOne = document.createElement("H1"); headOne.textContent = "Hello World"; document.body. ...

javascripthtmlfor-loop

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

Can a webpage be redirected to another page after an animation using only HTML and CSS?

My goal is to design a landing page that has a button allowing users to trigger an animation before being redirected to another page. This concept involves adding a captivating element before transitioning between pages, similar to a link with a dynamic ...

htmlcss

In AngularJs, users can select multiple options using check-boxes, which will automatically generate a tag based on the selected choices. Additionally,

I am looking to implement a feature where users can make multiple selections using checkboxes. Based on their selections, tags will be created using an Angular directive. If a user selects multiple checkboxes, corresponding tags should be generated. If a t ...

jqueryhtmlangularjsangularjs-directiveangularjs-scope

The datepicker feature has been programmed to only allow past or present dates

I've integrated a date picker on a website like so: <input type="text" id="popupDatepicker" placeholder="Select Date" name="from_date" class="input" size="50" /> Here's the script being used: $(function() { $('#popupDatepicker&apos ...

jqueryhtmldatepicker

Directive customization through comprehension expressions

Python is where I spend a lot of my time, so I'm really drawn to the comprehension_expression syntax within Angular's ngOptions. However, I would love to see this syntax extend to other inputs, such as with an ng-list. For instance, let's s ...

javascripthtmlangularjsangularjs-directive

Creating a customizable Sass Mixin for animation keyframes that incorporates various stages and the transform property

My goal is to generate the standard CSS using a SASS Mixin for efficiency. STANDARD CSS @-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg);} } @-moz-keyframes crank-up { 100% { -moz-transform: rotate(360deg);} } @-o-keyframes cran ...

csssassmixinscss-animations

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

I have a model called Item with the following structure: {data: String, schedule: DateTime, category: String} I want to create a report that displays the data in a table format like this: <table> <tr> <th>Time Range</th&g ...

javascripthtmlangularjs

Discover the technique of accessing HTML/CSS toggle switch value in Golang

I am attempting to incorporate a toggle switch into my webpage. I followed this specific tutorial for guidance: w3schools.com Currently, I have set up my HTML file with a button and the toggle switch. Additionally, I configured my web server in Go to lis ...

javascripthtmlcssgo

Retrieve the parent's current state by accessing it through a callback function in React

My callback function onRestore is only logging the history until the id of the clicked snapshot. Why is it showing incorrect state? I've exhausted all options, so any help would be appreciated. import React, { useState, useEffect, useRef } from "re ...

javascripthtmlcssreactjsstate

Utilizing Google Fonts offline without the need for an API

Instead of relying on Google Fonts API to access a variety of fonts for my website, I took matters into my own hands. I downloaded a snapshot of fonts from this GitHub repository: https://github.com/google/fonts and transferred them to my web directory. T ...

phpjquerycssjsonfonts

Encountering an error message stating, "Unable to assign value to 'onclick' property"

Currently, I am at a beginner level in Javascript. While working on some exercises, I encountered an issue with the 'onclick' function as mentioned above. Despite going through other queries in this forum, I have not found a solution that works ...

javascripthtml

Ways to switch visibility based on user's selection

Currently, I am working on a project that involves a select form with multiple options. However, I need to display a specific div only when a particular option is selected. Can anyone suggest the best solution for this scenario? Your guidance would be grea ...

javascripthtmlselecttogglevisibility

Use PHP to create a new JSON file on the server by submitting a form, then utilize a second form to update

My current goal is to create a json file using a form and then update that file with another form. Both of these processes are handled in the process.php file. I have managed to successfully update the json file if it is named as data.json initially in pro ...

phphtmljson

Unforeseen issues arise when working with CSS selectors

Exploring CSS with a series of buttons and encountering some unusual behavior. Here's the code: https://codepen.io/buoyantair/pen/JNgqXG?editors=1100 Let me share the snippets for Pug Script and Sass file: Pug Script header.row .col ...

htmlcsssasscss-selectorspug

maintaining page state without navigating

I'm exploring the concept of using HTML5 pushState and I have found it to be quite effective. I am able to add states, navigate back in the browser, and everything seems to function properly. However, upon refreshing the page, I am consistently met wi ...

htmlroutespushstate

One function is failing to execute properly due to multiple if conditions

Take a look at my JavaScript code below: function showLater1() { if ((vidos.currentTime >= 30) && (vidos.currentTime <= 34)) { lay.style.opacity = "1"; content.style.opacity = "0"; controls.style.opacity = "0"; ...

javascripthtml

What is the reason behind the functionality of invalid HTML?

As someone diving into the world of web programming, I have a burning question: Why does invalid HTML seem to work just fine sometimes? And why is it that HTML validation isn't always necessary? <html> <body> </html> It's intr ...

html