CSS float layout for arranging boxes of varying sizes

I am having trouble organizing this layout with CSS and using floats on the divs. The layout consists of standard sized boxes, a large box, and a tall box. Here is the link to the jsfiddle for reference.

Here is the markup I am working with -

<head>
    <style type="text/css">
    .boxesHolder 
    {   width:970px;
        border:1px solid green;
        margin-left:auto;
        margin-right:auto;
        background-color:#06C;}
    .boxes
    {   border:1px solid blue;  
        margin:5px; 
        background-color:#FFF;}

    .stand {width:230px; height:180px;}
    .large {width:474px; height:372px;}
    .tall { width:230px height:372px;}
    .fLeft{float:left;}
    .fRight{float:right;}
    .clear {clear:both;}

    </style>
 </head>

 <body>

    <div class = "boxesHolder">

        <div class = "boxes stand fLeft">1</div>
        <div class = "boxes stand fRight">3</div>
        <div class = "boxes large fRight">2</div>
        <div class = "boxes stand fLeft">4</div>
        <div class = "boxes stand fLeft">5</div>
        <div class = "boxes stand fLeft">6</div>
        <div class = "boxes stand fLeft">7</div>

    <div class ="clear"></div>
    </div>

 </body>

Unfortunately, I am unable to share an image of the layout due to my current reputation level...

My main struggle is adding the tall box in the bottom right space. I am considering using absolutely positioned boxes, but I can't seem to figure it out. Any suggestions on the best approach to achieve this? It would have been simpler with a table layout!

csscss-float

Answer №1

Give this a shot: http://jsfiddle.net/fCc5d/1/

Below is the provided HTML code:

<div class = "boxesHolder">

        <div class = "boxes stand fRight">1</div>
        <div class = "boxes stand fRight">3</div>        
        <div class = "boxes stand fRight">4</div>
        <div class = "boxes stand fRight">5</div>
        <div class = "boxes large fRight">2</div>
        <div class = "boxes stand fRight">6</div>
        <div class = "boxes stand fRight">7</div>
        <div class = "boxes stand fRight">8</div>
        <div class = "boxes stand fRight">9</div>

    <div class ="clear"></div>
 </div>

Feel free to modify the numbers as you wish.

Answer №2

Is your goal similar to this example?
http://jsfiddle.net/GCyrillus/fvzaF/
If it is, you will need to use a combination of float left, right, and none, and style them accordingly in your stylesheet.

  .boxesHolder {
       width:970px;
       border:1px solid green;
       margin-left:auto;
       margin-right:auto;
       background-color:#06C;
   }
   .boxes {
       border:1px solid blue;
       margin:5px;
       background-color:#FFF;
   }
   .stand {
       width:230px;
       height:180px;
   }
   .large {
       width:474px;
       height:372px;
   }
   .tall {
       width:230px height:372px;
   }
   .fLeft {
       float:left;
   }
   .fRight {
       float:right;
       clear:right
   }
   .clear {
       clear:both;
   }
   div div:before {
       content:attr(class);
   }
   div:nth-child(4), div:nth-child(5) {
       float:none;
       display:inline-block;
       margin:5px 3px;
   }

Answer №3

This code snippet creates a layout with 3 column divs floated to the left, each containing box divs. Check out the example on jsFiddle

 <head>
    <style type="text/css">
    .boxesHolder 
    {   width:928px;
        border:1px solid green;
        margin-left:auto;
        margin-right:auto;
        background-color:#06C;
        padding:5px;}
    .boxes
    {   border:1px solid red;   
        background-color:#FFF;
        margin:0px;}

    .stand {width:230px; height:180px;}
    .large {width:462px; height:362px;}
    .tall { width:230px; height:362px;}
    .fLeft{float:left;}
    .clear {clear:both;}


    </style>
    </head>

    <body>

    <div class = "boxesHolder">

        <div class = "col fLeft">
            <div class = "boxes stand"></div>
            <div class = "boxes stand"></div>
            <div class = "boxes stand"></div>
        </div>

        <div class = "col fLeft">
            <div class = "boxes large"></div>
            <div class = "boxes stand fLeft"></div>
            <div class = "boxes stand fLeft"></div>
        </div>

        <div class = "col fLeft">
            <div class = "boxes stand"></div>
            <div class = "boxes tall"></div>
        </div>


    <div class ="clear"></div>
    </div>


    </body>

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 cells be divided in a Material UI table?

Is there a way to split a cell in a Material UI table?I am aware that I can create a component to achieve this, but I'm wondering if there is another approach that I may not be aware of. Splitting a cell means having two values separated by a line wit ...

cssreactjsmaterial-ui

Attempting to evenly distribute items within a div container

My goal is to arrange the items in the container div evenly on a single line. I want them to be spaced out like this: https://i.sstatic.net/kA2zj.png I'm struggling to achieve this layout where the items are on the same line and evenly distributed w ...

htmlcssvue.jsflexbox

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

I am working on a task to incorporate an if statement that checks for the existence of a specific property in a JSON file. If the property exists, I need to display its value within HTML tags <div class='titleHolder'> and "<div class=&ap ...

javascriptjqueryhtmlcssjson

What to do when CSS Overflow doesn't work as expected?

Are there any alternatives for browsers that don't support CSS overflow? I am working on a new layout that heavily relies on the overflow property, however it seems like android browsers do not handle it well and as a result, my layout is broken. I am ...

javascriptjqueryandroidcss

Having trouble with the CSS :hover tag? Try changing the display property from none to inline-block

I'm currently working on a website navigation menu... I've decided to utilize the :hover feature in CSS to switch the display property from none to inline-block. In the past, I have implemented this with no issues whatsoever. However, I am now e ...

htmlcss

AngularJS field array

Is it possible to create an array that contains references to the fields in a form (such as input, textarea, etc.) and then run a function on them in my code, like addClass()? To clarify my objective - I am looking to add a red border color to any invalid ...

cssangularjs

Simple 3-column grid design in HTML and CSS

My task is to design a 3-grid layout that resembles the following structure: ------------------------------------- | Image | The name of logo | > | ------------------------------------- I attempted this using the code below: <div class=" ...

htmlcssbootstrap-4

Altering the background color of :after while :before is being hovered over

Is it possible to modify the :after section when hovering over the :before part? Take a look at this image for reference: I want to alter the small triangle shape when the large square is being hovered over. The square uses the :before pseudo-element and ...

css

Ways to customize easypiechart appearance with CSS styling

I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...

javascriptcsssvgcounterpie-chart

Executing Basic Calculations Instantly with Live Data in Qualtrics

I am encountering an issue with displaying the values on a slider in Qualtrics. I need to show the value where the respondent has placed the handle, as well as the complementary value from the other end of the scale. For example, if the user has chosen 55, ...

javascripthtmlcssruntimequaltrics

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...

cssanimationsvgrotation

Textarea generated on-the-fly without any assigned value

My goal is to enable users to edit the text within a paragraph on a website. I am attempting to replace the <p> tags with <textarea> tags using the .replaceWith() function. However, when I try to retrieve the value of the textarea, it comes bac ...

javascriptjqueryhtmlcss

Changing CSS properties in React

Currently, I am working on a dynamic table component using CSS grid. My goal is to customize the grid-template-columns CSS property. I am familiar with using repeat in CSS to achieve this. However, I am facing a challenge when it comes to dynamically chang ...

cssreactjssass

Automatically aligning flex items in Tailwind/Vue to match the height of their neighboring elements

Looking to create a grid of elements using flex, tailwind, and vue like this: https://i.sstatic.net/UyFIE.png I have a backend that provides me with a lot of items, and I want to display each item within a flex container next to each other, with only 2 it ...

cssvue.jsflexboxtailwind-css

Media Queries seem to be unresponsive on Tablet and Desktop devices

I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times a ...

cssmedia-querieswufoo

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

angularhtmlcssbootstrap-4

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

What is the best way to create space between my cards within responsive bootstrap rows on smaller devices?

As a beginner, I welcome even the simplest advice. In this section, there is a generous amount of padding defined in bootstrap as padding-right and padding-left. When I reduce the display size, one card moves below and there is no spacing between the two ...

htmlcssbootstrap-5

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

javascriptjqueryarraysajaxcss

Please click the provided link to display the data in the div. Unfortunately, the link disappearance feature is currently not

What I'm Looking For I want the data to be displayed when a user clicks on a link. The link should disappear after it's clicked. Code Attempt <a href="javascript:void(0);" class="viewdetail more" style="color:#8989D3!important;">vi ...

javascriptjquerycsshtml