Mastering the art of CSS float and positioning techniques

Struggling with CSS positioning yet again. I'm trying to design a webpage with one main element in the center, surrounded by 10 others. The challenge is to maintain consistency across different screen sizes (excluding mobile).

However, every time I resize the screen, the layout of the site changes.

  • HTML

    <div class="wrapper" id="wrapper">

    <div class="element" id="element-1">Lorem1</div>
    <div class="element" id="element-2">Ipsum2</div>
    <div class="element" id="element-3">Lorem3</div>
    <div class="element" id="element-4">Ipsum4</div>

    <div class="element" id="element-5">Lorem5</div>
    <span class="break"></span>

    <div class="background" id="background"><span>Neologizmo</span></div>

    <div class="element" id="element-8">Ipsum8</div>

    <div class="element" id="element-9">Lorem9</div>
    <span class="break"></span>
    <div class="element" id="element-10">M10</div>
    <div class="element" id="element-11">M11</div>
    <div class="element" id="element-12">12</div>



</div>

  • CSS

csscss-floatpositioning

Answer №1

Oops, I've already accepted a response :$

Regardless, I'll share a general solution since I was working on it. The concept is to always have numberOfsquares/2 - 1 squares at the top and bottom, with one square on each side.

Here's a demo: http://jsfiddle.net/PyU87/

The display adjusts based on the size of the wrapper, making it suitable for various screen sizes including smartphones.

Answer №2

Can you explain the functionality of this design? I ensured that the layout remains consistent regardless of screen size by implementing fixed widths and enclosing it within a wrapper.

DEMO

#wrapper {
    width: 450px;
    height: auto;
    padding: 10px;
}

div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    float: left;
    margin: 5px;
}

#background {
    width: 212px;
    padding: 0;
}

​

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

Customize the background color of a Material UI row with varying colors for each cell

I am facing an issue with a Material UI table in React 18 where each cell has a different background color, causing the hover style on the row to break. Despite trying various solutions, I have been unable to find a resolution. For reference, you can see ...

cssreactjsmaterial-ui

Centralized Column Design with Bootstrap 4

Currently, I am using bootstrap 4 and have a row with 3 columns. The center column is set to col-7, but I need it to be flexible and take up all remaining horizontal space in the row. I attempted to use flex-col, but it caused issues with the layout. In th ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-grid

CSS problem: Footer encroaching on the content above

For more information, please visit this link When the window is minimized, the footer overlaps the content above it. Despite spending hours trying to fix this issue, I have not been successful. View when maximized: here View when minimized: here Even af ...

cssoverlap

Permanent header that clicks into place below the primary fixed header

I've been collaborating with fellow developers on this platform to tackle a persistent issue related to a fixed header. Here is the updated fiddle for reference: http://jsfiddle.net/f95sW/ The Challenge 1) As you scroll down the page, the yellow bl ...

jquerycssfixed

Controller for Ionic 3 styles and loading animations

What is the best way to eliminate these white spaces in our fullscreen mode? View the image here removeWhiteSpace() { let space = document.getElementById('white-space'); if (space) { space.style.display = 'none'; ...

cssionic-frameworkionic2ionic3

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

javascriptjqueryhtmlcss

The appearance of online and local websites varies on a single screen and browser

My current dilemma revolves around the difference in appearance of my website when viewed locally versus online. Both versions are connected to the same git repository and use the same css file. Interestingly, I can view the page on both my local machine a ...

cssrenderingjsxnext.js

The Material UI month picker interface is not displaying correctly

When trying to implement the code snippet below, <MonthPicker/> I am encountering issues with the UI of the month picker both on the website and at times. https://i.stack.imgur.com/EKsYA.png It seems like the month picker is being utilized in a di ...

cssdatepickermaterial-ui

Arranging elements in columns using Bootstrap

I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other. I need them to be displayed side by side Here is the code I am using: <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layo ...

htmlcssbootstrap-4

Navigate the child div while scrolling within the parent div

Is there a way to make the child div scroll until the end before allowing the page to continue scrolling when the user scrolls on the parent div? I attempted to use reverse logic Scrolling in child div ( fixed ) should scroll parent div Unfortunately, it ...

javascriptjqueryhtmlcssscroll

Alternative background for browsers that do not have support for border-image styling

I am experimenting with CSS3 border-image to create a simple button design: the left slice of the image is intended to be the left border of the text, the right slice as the right border, and the middle slice should either repeat or stretch as a background ...

fallbackcss

When hovering, transition occurs unless the cursor is over a specific element

I have created a small box element with a close button that looks like this: ___ | X| ‾‾‾ In order to make it more interactive, I applied some CSS so that when hovered, the box expands like this: ___________________ | X| ‾ ...

csscss-transitionstransition

How can I create a one-column layout in CSS grid where one element automatically fills the remaining space after the other elements have taken their own auto widths?

I want a flexible layout with auto width columns for future additions. Avoiding extra wrappers is preferred. CSS grid is the preferred method over flexbox (although flexbox can achieve it with wrappers). This layout is intended for a navigation bar Here&a ...

htmlcsscss-grid

Bidirectional binding of attributes in an Angular directive

I have developed a custom Angular Directive known as evoEventMirror. Its main purpose is to attach a jQuery event to an inserted element and apply a specified CSS style to the "root" element. Refer to the example below: <div id="#mydiv" evo-event-mirro ...

jquerycssangularjsbindingangularjs-directive

Words are cut off in a random manner on the entry content list for phone users

I struggle with CSS and have a basic understanding to make adjustments to my website. The issue I am encountering involves the .entry-content ul li elements. On desktop, they display correctly without random word breaks, but on mobile, words are being cut ...

css

Display icons within each table cell row

Objective: I want to implement a feature where icons appear when the cursor is inside a td row, allowing users to click on them. These icons will contain links. When the cursor moves to a new td row, the previous row should return to its default state a ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I place my container above my header in the layout?

I'm facing difficulty positioning the container above my header. Here is an example of what I am aiming for: No matter what I attempt, strange occurrences like the NAV disappearing or divs overlapping keep happening. HTML: <!DOCTYPE html PUBLIC ...

htmlcss

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Could someone assist me with a coding issue I am facing? I would like to be able to go to the top of the page when clicking on a link and have the link open in the same tab. I attempted to implement this functionality using the following code, however, I ...

javascriptjqueryhtmlcss

React component for a background image with a gradient overlay

I'm facing an issue trying to incorporate a background image for a div along with a color overlay. In plain CSS, the code would typically look like this: .backgroundImage { background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rg ...

cssreactjsionic-framework

CSS PopUp positioning

Can anyone help me with applying the position top and bottom of header to the NewUser div? I've tried but it's not working. How can I add !important; to the CSS? Maybe something like $("header")!important} <div id="divNewUser" class="CreateUs ...

jqueryhtmlcss