Ensure that the divs are properly aligned with the paragraphs

I received assistance previously, and I am seeking additional help in maintaining the position or adjusting the size of elements to fit different window viewport sizes such as tablets, mobile devices, or varying monitor sizes while keeping the appearance consistent.

Below is my HTML:

<head>
<link rel="stylesheet" type="text/css"  href="file://C:/Users/cody/Desktop/offline_website/CSS/care.css">

</head>  

<body>

  <div class = "mainthing">

           <div class = "pilli">

             <img class="pillipic" src="file://C:/Users/cody/Desktop/offline_website/Images/pilli.jpg">

<h1> Suja Pilli MD. </h1>

            <pre>

Education:     
2008-2011                     
           Valley Baptist Family Practice
           Residency Program
           Harlingen, TX
           Family Practice

1993-1999
          Universitatea Ovidius
          Consatanta, Romania
          Doctor of Medicine, September 1999

Medical Licensure and Certification:
         Texas Medical Board

            </pre>

</div>

            <div class="shaun">
              <img class="shaunpic" src="file://C:/Users/cody/Desktop/offline_website/Images/shaun.jpg">

<h1> Shaun Adams FNP. </h1>
   <pre>
Education:     
2012-2014 

         Univesrity Texas Medical Branch
         Galveston, TX
         Masters of Science in Nursing

2010-2011

         Univesrity of Texas Brownsville
         Brownsville, TX
         Bachelors of Science in Nursing.

2005-2007

        University of Texas Brownsville
        Brownsville, TX
        Associates Degree in Nursing

Medical Licensures and Certification:

        Texas Medical Board of Nursing Family
        Nurse Practioner Certified License
        Nurge Register Nurse License
        BLS, ACLS, TNCC, ENPC
</pre>

            </div>
 </div>


</body>

Here is my CSS:

.mainthing {
    margin-top: 20vh;
    margin-left: 20vw;
    margin-bottom: 20vh;
    margin-right: 20vw;
    max-width: 100%;
    text-align: center;
}

.pilli {
    width: 50%;
    float: left;
    display: inline-block;
    position: relative;
}

.pillipic {
    max-width: 100%;
    height: auto;
    float: left;
}

.shaun {
    width: 50%;
    float: left;
    display: inline-block;
}

.shaunpic {
    max-width: 100%;
    height: auto;
    float: left;
}

pre {  
   text-align: left;
   font-family: "courier new", courier, monospace;
   font-size: 11px;
   float: left;
}

The main issues I'm facing are the text not aligning correctly next to the image when adding more lines and all elements shifting on resize.

I have attempted using wrappers and relative positioning with child divs set to absolute positions, but I am struggling to understand how to manage pixel widths effectively.

htmlcssresize

Answer №1

Accessible JSFiddle

If you're seeking a design that adapts to various screen sizes, you'll want a fluid layout.

One common obstacle is using <pre> tags for regular content meant to be responsive.

To address this issue, I enclosed the education years in a div with the CSS class of .title, defined by this CSS:

.title {
  text-align: left;
}

The educational content was placed within a div styled with the CSS class .content, providing a 20% margin to maintain indentation.

CSS for .content:

.content {
  margin-left: 20%;
  text-align: left;
  /* Additional .content styles */
  line-height: 1.5;
  font-family: Consolas, monospace;
}

Complete CSS

.mainthing {
  margin-top: 20vh;
  margin-left: 20vw;
  margin-bottom: 20vh;
  margin-right: 20vw;
  max-width: 100%;
  text-align: center;
}

.pilli {
  width: 50%;
  float: left;
  display: inline-block;
  position: relative;
}

.pillipic {
  max-width: 100%;
  height: auto;
  float: left;
}

.shaun {
  width: 50%;
  float: left;
  display: inline-block;
}

.shaunpic {
  max-width: 100%;
  height: auto;
  float: left;
}

pre {
  text-align: left;
  font-family: "courier new", courier, monospace;
  font-size: 11px;
  float: left;
}

body {
  font-size: 11px;
}

h2 {
  font-family: Consolas, monospace;
  font-size: 11px;
  text-align: left;
  font-weight: normal;
}

.title {
  text-align: left;
  font-family: Consolas, monospace;
}

.content {
  margin-left: 20%;
  text-align: left;
  line-height: 1.5;
  font-family: Consolas, monospace;
}

Complete HTML

<div class="mainthing">
  <div class="pilli">
    <img class="pillipic" src="http://i.imgur.com/alhBkw5.png">
    <h1> Suja Pilli MD. </h1>
    <h2>Education:</h2>
    <div class="title">
      2008-2011
    </div>
    <div class="content">
      Valley Baptist Family Practice Residency Program Harlingen, TX Family Practice
    </div>
    <div class="title">
      1993-1999
    </div>
    <div class="content">
      Universitatea Ovidius Consatanta, Romania Doctor of Medicine, September 1999
    </div>
    <div class="title">
      Medical Licensure and Certification:
    </div>
    <div class="content">
      Texas Medical Board
    </div>
  </div>
  <div class="shaun">
    <img class="shaunpic" src="http://i.imgur.com/alhBkw5.png">
    <h1> Shaun Adams FNP. </h1>
    <h2>
      Education:
    </h2>
    <div class="title">
      2012-2014
    </div>
    <div class="content">
      Univesrity Texas Medical Branch Galveston, TX Masters of Science in Nursing
    </div>
    <div class="title">
      2010-2011
    </div>
    <div class="content">
      Univesrity of Texas Brownsville Brownsville, TX Bachelors of Science in Nursing.
    </div>
    <div class="title">
      2005-2007
    </div>
    <div class="content">
      University of Texas Brownsville Brownsville, TX Associates Degree in Nursing Medical Licensures and Certification: Texas Medical Board of Nursing Family Nurse Practioner Certified License Nurge Register Nurse License BLS, ACLS, TNCC, ENPC
    </div>
  </div>
</div>

Answer №2

After analyzing the snippet, I restructured your CSS using FLEXBOX for simplicity. If this is not to your liking, that's totally fine. Your HTML remains unchanged but is now fully responsive.

For smaller screens (maximum 720px as per @media query), the C.V.'s are displayed below each other.

I included some empty CSS rules and demo code to illustrate what can be done with your existing HTML code.

Refer to the comments in the snippet for further clarification.

(The final @media should state .card { width: calc(50% - 8px) } based on your requirement. Currently only showing 35% to demonstrate flexbox behavior)

Enjoy experimenting and testing out...

/* * { outline: 1px dashed red } /* for debugging remove beginning slash */

#main { 
    display: flex;              
    flex-flow: row wrap;        
    justify-content: center;    
    max-width: 90%;             
    margin: 10% auto;           
}
.card { 
    display: flex;              
    flex-flow: column nowrap;   
    align-items: center;         
    width: calc(100% - 8px);    
    margin: 4px;                
    padding: 4px;               
    background-color: #fafafa;  
    box-shadow: 0px 4px 9px rgba(42, 47, 57, 0.2);
}
.card *   { }
.card > * { }
.card h1  { }
.card img { 
              max-width: 33%;   
              min-width: 165px;
}
.card pre { 
              padding: 4px;
              font-size: 11px;
              font-family: "courier new", courier, monospace;
}
@media all and (min-width: 721px) {
    .card { width: calc(35% - 8px) }    
}
    <div id="main">
        <div class="card">
            <img src="http://placehold.it/500">
            <!-- img src="file://C:/Users/cody/Desktop/offline_website/Images/pilli.jpg" -->
            <h1>Suja Pilli MD.</h1>
<pre>

Education:     
2008-2011                     
           Valley Baptist Family Practice
           Residency Program
           Harlingen, TX
           Family Practice

1993-1999
          Universitatea Ovidius
          Consatanta, Romania
          Doctor of Medicine, September 1999

Medical Licensure and Certification:
         Texas Medical Board

            </pre>
        </div>
 
       <div class="card">
            <img src="http://placehold.it/500">
            <!-- img src="file://C:/Users/cody/Desktop/offline_website/Images/shaun.jpg" -->
            <h1>Shaun Adams FNP.</h1>
            <pre>
Education:     
2012-2014 

         Univesrity Texas Medical Branch
         Galveston, TX
         Masters of Science in Nursing

2010-2011

         Univesrity of Texas Brownsville
         Brownsville, TX
         Bachelors of Science in Nursing.

2005-2007

        University of Texas Brownsville
        Brownsville, TX
        Associates Degree in Nursing

Medical Licensures and Certification:

        Texas Medical Board of Nursing Family
        Nurse Practioner Certified License
        Nurge Register Nurse License
        BLS, ACLS, TNCC, ENPC
</pre>
        </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

Is it possible to transfer data from javascript to php through ajax?

I am attempting to extract the data speedMbps from my JavaScript code using Ajax to send the data to my PHP script, but unfortunately, I am not receiving any output. My experience with Ajax is limited to implementing auto-completion feature. <script sr ...

javascriptphpjqueryhtmlajax

Collecting all the <td> elements within a single row

I am having trouble creating a table dynamically using JSON data. The issue is that all <td> elements are being placed in the same <tr> instead of two separate rows. Here is my JavaScript code: $('button').click(function() { var str ...

jqueryhtmljsonhtml-table

Controlling the Quantity of Selected Checkboxes with JavaScript

I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...

javascripthtmlcheckboxlimit

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

Is there a way to use handlebars to display a list of data in an unordered format, with "title" and "articles" as the main categories? The issue arises when some of the articles contain HTML tags, such as <a> for links. In my current code, instead of ...

javascriptjqueryhtmlhandlebars.js

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

javascriptjquerycss

Having trouble resolving 'primeng/components/utils/ObjectUtils'?

I recently upgraded my project from Angular 4 to Angular 6 and everything was running smoothly on localhost. However, during the AOT-build process, I encountered the following error: ERROR in ./aot/app/home/accountant/customercost-form.component.ngfactory. ...

htmlangulartypescriptmigrationangular-aot

Can HTML tags be utilized in swipeable pages?

Currently, I am developing an Android app that incorporates swipe screen functionality. To achieve this, I followed a tutorial which can be found at the following link: http://developer.android.com/training/animation/screen-slide.html#fragment My goal is ...

androidhtmlandroid-fragmentsandroid-viewpager

Is there a restriction on the maximum size of a CSS file?

Currently, I am working on building a site using ASP.NET MVC. The CSS file that I have been working on has now grown to 88KB in size and contains over 5,000 lines of code. Recently, I have noticed that some styles that I added towards the end of the file a ...

asp.netcssasp.net-mvc

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...

htmlcssuser-interface

When I engage with the input field, it ceases to be in focus

Here is the code I've been working on: https://github.com/Michael-Liendo/url-shortener/blob/main/src/pages/index.js If you want to see the issue for yourself, check it out at: ...

javascripthtmlreactjsnext.js

Handling Errors in Node.js with Express

To access the complete repository for this project, visit: https://github.com/austindickey/FriendFinder After downloading the directory, follow the instructions in the ReadMe to set it up on your computer. Encountering an issue where my survey.html page ...

javascriptjqueryhtmlnode.jsexpress

Prevent global CSS from affecting VueJS by enabling only scoped CSS within components

Is there a way to eliminate all global CSS within a VueJS component and only allow scoped CSS? If so, how can this be achieved? Below is the issue I am trying to address: * { /* Global styles */ } /* Component-specific styles */ .items ul { } .i ...

cssvue.js

locate the following div using an accordion view

Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/ There are various methods to achieve this, but one approach is by using a CSS class called sub to hide a 'nested' div and then using jQuery to toggle the Glyphicon while displaying the 'nest ...

javascriptjqueryhtmlcss

How can you implement a transform transition toggle when a user clicks on an element

Check out this CodePen example for a cool overlay animation: https://codepen.io/pen/MoWLrZ Experience the unique animation of two overlays as you click for the first time. However, on the second click, watch as both overlays seamlessly return to their ori ...

jqueryhtmlcssanimation

Issues arise when attempting to use Stylus in conjunction with React

I am currently working on developing a web application that utilizes Stylus and React. I have successfully rewritten all the Stylus language files, but I am encountering an issue where the React components are not being styled as expected. Below is one of ...

cssreactjsweb-applicationsstylus

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Trying to deploy a static site consisting of HTML, CSS, font, and image files with Ruby Rack has been a bit challenging. While the HTML displays perfectly in Chrome when running it locally, the CSS assets do not seem to be loading or being applied to the H ...

htmlcssruby-on-railsrubyheroku

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

javascriptjqueryhtmlcss

"Bootstrap Carousel veers off from center alignment and aligns to the left instead

I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...

htmlcarouselbootstrap-5