Utilizing HTML and CSS allows for creating a responsive layout with three elements such as this

Need help with CSS to align three elements in a row, where the first two are on the left and the third is on the right. The layout should adjust so that when the window size is smaller, the second element moves below the first while the third element stays on the right. And if the window gets even smaller, all three elements should stack on top of each other

For reference, check out this example:

I want to position the red section under the header using an h2, a p, and an anchor (button) as the elements.

Please provide CSS code for the following HTML structure:

<section class="location"> 
<div class="content">
    <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, copiosae perpetua voluptaria in pro, laboramus scriptorem instructior in usu, duo expetenda delicatissimi in. </p>
<a class="button" href="#">Sale sonet</a>
    </div></section>
htmlcssresponsive-design

Answer №1

Sample code featuring 3 different divs

Styling with CSS ::::


div {
    height: 250px;
    width: 250px;
    border: 1px solid black;
    display: inline-block;
}

@media only screen and (max-width: 550px) {
    div {
        width: 80%;
    }
}

@media screen and (max-width: 950px) and (min-width: 550px) {
    div {
        display: block;
    }

   .first, .second {
        width: calc(100% - 150px);
   }

   .third{
        position: fixed;
        top: 10px;
        right: 8px;
        width: 150px;
   } 
}

@media screen and (min-width: 950px) {
   div{
        display: inline-block;
   }

   .first {
        float: left;
   }

   .second {
        width: calc(100% - 380px);
   }

   .third {
        float: right;
   }
}

Answer №2

Let's take a look at this simple transformation:

.location {
  background: #d00807;
  color: #fff;
  padding: 20px;
  position: relative;
}
.location h2 {
  display: inline-block;
  margin: 0px;
  vertical-align: middle;
}
.location p {
  display: inline-block;
  margin: 0px;
  margin-left: 10px;
  vertical-align: middle;
}
.location a.button {
  background: transparent;
  border: 1px solid #fff;
  text-decoration: none;
  color: #fff;
  padding: 10px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -20px;
}
@media (max-width:768px) {
  .location h2 {
    display: block;
    margin-bottom: 10px;
  }
  .location p {
    width: 50%;
    margin-left: 0px;
  }
}
<section class="location">
  <div class="content">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, copiosae perpetua voluptaria in pro, laboramus scriptorem instructior in usu, duo expetenda delicatissimi in. </p>
    <a class="button" href="#">Sale sonet</a>
  </div>
</section>

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

ways to clear the float on the right side of an image

So I have two images that I am trying to float, like this: img{ float:left; clear:right; } <img src='http://img1.imgtn.bdimg.com/it/u=1005212286,2432746147&fm=21&gp=0.jpg' alt=''><br> <img src ...

htmlcss

Utilizing HTML5/JavaScript to send a text message from a mobile device

I am developing a mobile web application to be downloaded from various markets with a mini web server, capable of running on any operating system such as iOS, Android, Windows8, and more. My goal is to make the application as OS-independent as possible by ...

javascriptandroidioshtmlwindows-8

The issue of the fixed navbar overlapping the scrollbar of the page occurs when utilizing the overflow-y scroll feature

I am trying to create a web page with snap scroll and a fixed navbar that remains at the top. However, I'm facing an issue where the navbar is overlapping the right scroll bar, which should not be happening. If I remove the overflow-y property from th ...

htmlcssnext.jstailwind-css

Can you explain the distinction between using inline-block and inline-table display properties?

It appears that these display selectors are indistinguishable based on my assessment. According to the Mozilla CSS documentation: inline-table: The inline-table value doesn't have a direct HTML equivalent. It functions like a <table> HTML elem ...

htmlcss

Is there a way to adjust the border color of my <select> element without disrupting the existing bootstrap CSS styling?

In my Bootstrap (v4.5.3) form, the select options appear differently in Firefox as shown in the image below: https://i.sstatic.net/3suke.png Upon form submission, I have JavaScript code for validation which checks if an option other than "-- Select an Op ...

javascripthtmlcssbootstrap-4

Can a filter be eliminated from a CSS file in a modified CSS file?

Currently, I am facing a dilemma with a CSS rule in my file. The rule in question looks like this: .someElement { filter:gray(enabled=true) alpha(opacity=50); -ms-filter:"gray(enabled=true) alpha(opacity=50)" } This specific rule is causing some ...

css

What could be the reason for the bottom edge of my central diagonal image having a darker border?

I can't figure out why the border on the bottom edge of my image is darker. You can check out the demo here. To get a closer look at the issue, you can open a software like GIMP and zoom in on the following image to see the difference in values: http ...

javascripthtmlcssreactjsimage

Navigating Dynamically between tabs - A How-to Guide

I am working on a mat-tab Angular app where I need to dynamically generate links and transfer them to a navLinks object. Despite ensuring that the concatenation is correct, it seems like my approach is not working as expected. Here's a glimpse of what ...

javascripthtmlangulartypescript

Problem encountered when incorporating PHP code into HTML

I have a PHP forum and an HTML website that I am trying to merge for a cohesive appearance. However, I have encountered an issue when attempting to integrate the PHP code into the HTML file. Despite using the following code: <?php echo "here goes my P ...

phphtmlvs-web-site-project

The window.open function is creating a new tab using the specified origin or URL

I have a button within an iframe on the webpage "loclahost:3000". When this button is clicked, it should open a new tab with the URL "www.google.com". However, instead of opening the desired URL, the new tab opens with the following incorrect URL: "http:// ...

javascripthtml

What steps can be taken to resolve the issue of the <td> element not being allowed as a child of an <a> tag?

https://i.stack.imgur.com/nsdA7.png How can I address these warnings? I utilized the material UI table component and suspect that the warnings are originating from component={Link} to={/patient/${patient.id}} <TableContainer className={styles.tableCo ...

javascriptcssreactjshtml-tablematerial-ui

Enhance and soften images using CSS with smooth responsiveness across all web browsers

When an image is clicked, it should zoom in and become the background of the page with a blurred effect. I attempted to achieve this using the following code... <style type="text/css"> body{ position: absolute; margin-left: 100px; right: 0; z-inde ...

javascriptphpjqueryhtmlcss

"Utilize the hover functionality in React JS to track the mouse movement

I'm currently facing an issue with a design that involves a 6-column grid and text placed in front of it. The requirement is that when I hover over the text, the background of the corresponding grid column should change to an image. While this functio ...

cssreactjsnext.jstailwind-css

Expanding space underneath for inline-block elements

Is there a way to create a page layout with inline-block elements that are vertically aligned to the top and fold into open space like floated elements do when placed below another set of inline block elements? It seems as though they follow row-like rules ...

htmllayoutcss

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

javascriptcssangularevents

Using EJS Tags within an external CSS file

I have been working on refactoring a Node.js project, and I currently have my CSS code within my .ejs file. I need to incorporate some dynamic data into my CSS file. It works fine when the CSS is within the EJS file. However, when I move my CSS to an exte ...

cssnode.jsejs

Tips for starting the debugging process with POST and GET requests in Django and the Python Shell

I've encountered an issue with my code where the database is not updating and a new record is not being created. I suspect that there may be a problem with how I am handling the POST data retrieval in my script. Can anyone provide guidance on where to ...

htmldjangopostgresqlpostget

Retrieving the input value from embedded cells in a specific row of a table

I need the function to calculate the result of the following expression using values from the table below: a+b*c-(e/f) This calculation should exclude rows with e and f. Although I encountered a similar issue before, there was no solution for this spe ...

javascripthtml

Using jQuery's ajax to populate several div elements in a single call

Trying to wrap my head around jQuery's Ajax function. There exists a page composed of various divs, along with an XML document generated from a MySql resultset. Within the jQuery function displayed below, I successfully fill the titleDiv with data. M ...

phpjqueryxmlajaxhtml

One way to showcase a single piece of data without the need for looping is by utilizing the `

I am encountering an issue. Why does the insertAdjacentHTML("afterend") output keep looping? I only want to display "1" once, not repeatedly. var btn = document.getElementById("btnClick"); btn.addEventListener("click", function (e) { e.preventDefaul ...

javascripthtmlinsertadjacenthtml