Creating a website with a responsive layout using CSS absolute positioning

Question

Creating a website with a responsive layout using CSS absolute positioning

Is there a way to make this css code responsive for a website? I believe I need to use:

@media (min-width: 700px) and (max-width: 1150px) {

    #div {position: absolute; left: 149px; top: 61px;}

    #div2 {position: absolute; left: 249px; top: 81px;}
    #div3 {position: absolute; left: 279px; top: 181px;}
    #div4 {position: absolute; left: 449px; top: 121px;}
}

However, I have multiple div tags that need editing. Is there a quicker solution? Making changes to around 45 divs seems like a daunting task. Any advice would be greatly appreciated as I am new to this.

html css

Answer 1

Answer №1

In order to ensure responsiveness, it is recommended to avoid using px units and opt for using % values instead.

There are tools available such as the one found at that can assist in converting px values to % values.

Additionally, excessive use of absolute positioning may not be necessary for responsive design. Absolute positioning can hinder the floating effect that is essential for responsiveness.

Is there a quick method to style multiple divs?

You don't have to individually style each div. It might be more efficient to use a shared class instead of targeting each div separately with IDs like #div2 or #div3 if they have the same layout.

To apply css styles to all divs:

div {
   width: 40%
}

To apply styles to a specific container:

HTML:

<div id='unique'>content</div>

#unique {
   width: 40%
}

To apply styles to certain containers (but not all):

HTML:

<div class='flat'>content</div><div class='flat'>content</div>

.flat {
   width: 40%
}

or

#div2, #div3, .flat {
   width: 40%
}

For further information on CSS basics, consider this concise css introduction:

Answer 2

In order to ensure responsiveness, it is recommended to avoid using px units and opt for using % values instead.

There are tools available such as the one found at that can assist in converting px values to % values.

Additionally, excessive use of absolute positioning may not be necessary for responsive design. Absolute positioning can hinder the floating effect that is essential for responsiveness.

Is there a quick method to style multiple divs?

You don't have to individually style each div. It might be more efficient to use a shared class instead of targeting each div separately with IDs like #div2 or #div3 if they have the same layout.

To apply css styles to all divs:

div {
   width: 40%
}

To apply styles to a specific container:

HTML:

<div id='unique'>content</div>

#unique {
   width: 40%
}

To apply styles to certain containers (but not all):

HTML:

<div class='flat'>content</div><div class='flat'>content</div>

.flat {
   width: 40%
}

or

#div2, #div3, .flat {
   width: 40%
}

For further information on CSS basics, consider this concise css introduction:

Creating a website with a responsive layout using CSS absolute positioning

Answer №1

Similar questions

Issue with the Z-Index property not functioning as expected on unordered lists within a dropdown menu

Can a form be selected and submitted using only its class as a selector?

Ways to utilize gridster by accessing the nativeElement of ElementRef

PHP consistently selects the final radio button element

Activate the fadetoggle function to smoothly transition and fade in

Is this the correct method for constructing a class in CSS?

Adjust CSS property values using positive and negative numbers

Position the Bootstrap footer element at the bottom of the page

Having a fixed bottom line bar that does not affect the length of the div when

Is it possible to create several XMLHttpRequests for various <li> elements upon clicking on them individually?

Achieve the sticky effect for text in a HTML div using CSS to keep it anchored to the

Achieving a fixed Bootstrap navbar at the top along with a sidebar: A comprehensive

What is the best way to align a dropdown menu in Bootstrap 5?

Visual Studio is not recognizing at-rules

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Harvesting feedback from the Google Play Store app portal

Creating a dynamic menu structure by tailoring it to the specific elements found on each page

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Choose a division of an element within an embedded frame

Error in Google Translate API AttributeError