What is the best way to shift the lower section to align with the right side of the rest of the headers and text blocks?

Help needed with moving the Uni section to align it beside other paragraphs and headers. Tried using float left but no luck so far. Any suggestions would be appreciated! Check out the code here

<div  class ="container">
<div id="education" class ="learn-more">
    <h2>Education</h2>
    <h3>2003 - 2008 Haslingden High school</h3>

<p>9 GCSEs 
    Grades B - C</p>

<h3>2008 - 2010 Haslingden High School sixth form </h3>
<p>3 A levels   IT  (B)</p>
<p>Level 3 BTEC National Award in Applied science (Forensic science (Pass)</p>
<p>level 3 BTEC National Award in Media production (print-based media)  (Distinction)</p>

<div class="uni">
<h3>2010 - 2013     Bachelor of Science in Engineering and Multimedia Computing 2:2
        Manchester Metropolitan University</h3>

<p>Detailed list of course subjects...
...
...
...
</p>
</div>

</div>

</div>

CSS:

.learn-more {
  background-color: #f7f7f7;

clear: both; 
overflow:auto;
}

.learn-more .uni {
float:left;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

  @media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
  @media (min-width: 1200px) {
 .container {
    width: 1170px;
  }
}

Answer №1

You find yourself in a state of floating .uni, but it is positioned after .learn-more, which means it will only float elements that come after .uni.

Additionally, .uni will attempt to take up the entire width, so you must constrain the width to allow space for the other section to float next to it.

.uni{
    width: 200px;
    float: left;
}

.learn-more{
    float:right;
}

This adjustment should enable it to function correctly for you. If you want to make it responsive, consider changing the width to a percentage. Alternatively, you could achieve the same effect by placing .uni first in your HTML and floating it to the left, instead of floating .learn-more to the right.

For a visual demonstration, check out this fiddle. (Please note that if you resize the window too small, .uni will move to the bottom.)

http://jsfiddle.net/uhwwrh3u/

Answer №2

Two issues need to be addressed:

  1. The .uni element is nested within the .learn-more container, preventing it from being positioned to the right of it. To resolve this, move the .uni element outside of the .learn-more container so that it becomes a child of the container.
  2. The width constraints currently in place limit the available space to the right of the .learn-more element. By setting the width of the .uni element to 150px, I was able to make it fit within the layout. However, adjusting the arrangement may enhance its appearance and functionality, especially if resizing is required for the .uni element to shift to the right.

JSFiddle Link

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

Can a personalized user permission prompt be designed for HTML5 APIs?

Can a consistent custom user permission request dialog be designed for HTML5 APIs, such as geolocation or getUserMedia, to ensure uniform appearance on all browsers? ...

Populating Modal on open with jquery/javascript

I am trying to dynamically populate a Modal when it opens, but so far all my attempts using append have failed. Here is the code for my Modal: <div class="modal fade" id="ModalForAllUsers" tabindex="-1" role="dialog" aria-hidden="true"> <div ...

The bottom border of the check boxes is not displaying in Internet Explorer

https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer. Below is the HTML code being used: <div class="patient-div-w" style="width: 9 ...

Different methods for adjusting the bot's background hue

Currently, I have my Luis bot integrated into a SharePoint website using the iframe HTML element. I am looking to add some custom styling to it, specifically changing its background color. I found a tutorial that explains I need to clone the source code a ...

How can I display multiple images in a single row using PHP echo?

I am struggling with my PHP code that displays images from a database. The issue I'm facing is that the images are all appearing in a single column, but I want them to be displayed in one row so that users can scroll horizontally to view them. How can ...

Struggling to make align-content function properly in a CSS flexbox layout grid

Utilizing CSS flexbox for designing a grid of items that wrap on resizing the page. Wanting to achieve a horizontally centered grid, successfully done with justify-content: center;. However, facing an issue where the last box in some cases is centered inst ...

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

Retrieving data from Mouse Hover popup with Selenium in Python

I have a project where I'm utilizing Selenium to automate tasks on a website. There is an interactive mouse hover box that appears to provide relevant information for users. Below is the HTML code snippet for the mouse hover: <td align="center ...

What is the best way to extract numbers from a string using JavaScript?

I am working with a string in javascript that looks like this: var xyz= "M429,100L504.5,100L504.5,106L580,106L570,98M580,106L570,114"; My goal is to extract the numbers and store them in an array. I attempted the following code: var x=xyz.match(/\ ...

Issues with the background color of the bootstrap 'card' when implementing a QR code

How can I customize the background color for a Bootstrap card, specifically filling the entire card including the card text section? <div class="content"> <div class="card"> <img src="images/qr-code.png&q ...

Issues with utilizing jQuery AJAX for form submissions

I am currently customizing a webpage to fit the specific requirements of a client using a template. The page contains two contact forms which are being validated and sent to a PHP file via AJAX. One of the forms is standard, while the other one has been mo ...

Increase the Step Size of an HTML Number Input by Holding Down the Time

Is there a way to implement increasing increment/step size for number inputs in HTML based on how long the user holds the stepper arrows? For instance, starting at step size=1 and gradually ramping up to larger increments like 5, 10, 20, etc. after holdin ...

Invoking a Jquery Dialog

Every time I click on the button to display a message, I encounter an issue where one MessageBox appears as expected. However, when I open the Jquery Dialog for the second time, two MessageBoxes pop up and the same problem occurs with three MessageBoxes on ...

Issue with collapsing custom-height navigation bar in Bootstrap 4

I have implemented a Bootstrap 4 navbar with a brand logo image sized at 150px x 33px. Now, I want to increase the height of the navbar to 80px. To do this, I added min-height: 80px; in my CSS. <!DOCTYPE html> <html lang="en"> <head> ...

Is there a way to alter the appearance of an HTML element without an ID using a JavaScript function?

I have a specific goal in mind, but I'm struggling to articulate it concisely. Despite conducting extensive research, none of the suggested solutions seem applicable in my case. Objective: I aim to change the background color of a div based on the da ...

the table image does not resize correctly in mobile view

I need to resize an image inside a table's <td> when the screen size is in mobile mode. Although I have already added a viewport, my mobile query works correctly for other purposes except for the image. Here is the HTML code: <table class="t ...

Setting the z-index to place an absolutely positioned element below a relatively positioned one

I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process. For bet ...

Tips for including a numerical quantity to an existing value

I have developed a PHP code for adding products to a cart. The code is designed in such a way that when a user selects an existing product in the cart, the quantity of the existing product and the newly inputted quantity will be combined together. $se ...

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...