Disrupt the standard css float and clear layout

Question

Disrupt the standard css float and clear layout

I have a main container with a specific width containing four divs of varying sizes. When I set float left for each div, they are displayed as follows:

##########################################################
#                          ##             ##             #
#                          ##             ##             #
#            5             ##      6      ##      7      #
#                          ##             ##             #
#                          ##             ##             #
##########################################################
############################
#                          #
#                          #
#                          #
#                          #
#            8             #
#                          #
#                          #
#                          #
#                          #
#                          #
############################

Now I want to rearrange them without using another container. How can I achieve the following layout?

#########################################################
#                           ##                          #
#                           ##                          #
#            5              ##                          #
#                           ##                          #
#                           ##            8             #
##############################                          #
##############################                          #
#             ##            ##                          #
#             ##            ##                          #
#      6      ##      7     ##                          #  
#             ##            ##                          #  
#             ##            ##                          #
#########################################################

javascript html css css-float

Answer 1

Answer №1

Here is a technique you might want to consider implementing: apply the "float left" property to a combination of div elements.

<div id="main">
<!-- Container for divs 5, 6 & 7 -->
     <div id="567">
      <div id="5"></div>
<!-- Container for divs 6 & 7 -->
      <div id="67">
       <div id="6"></div>
       <div id="7"></div>
      </div>
     </div>
     <div id="8"></div>
    </div>

Answer 2

Here is a technique you might want to consider implementing: apply the "float left" property to a combination of div elements.

<div id="main">
<!-- Container for divs 5, 6 & 7 -->
     <div id="567">
      <div id="5"></div>
<!-- Container for divs 6 & 7 -->
      <div id="67">
       <div id="6"></div>
       <div id="7"></div>
      </div>
     </div>
     <div id="8"></div>
    </div>

Answer 3

Answer №2

Experiment with arranging divs using floats:

<div class="parent">
    <div class="child child-4">Content #4</div>
    <div class="child child-1">Content #1</div>
    <div class="child child-3">Content #3</div>
    <div class="child child-2">Content #2</div>
</div>

CSS

.parent div {float: right;}

http://jsfiddle.net/xYzAb/4/

Answer 4

Experiment with arranging divs using floats:

<div class="parent">
    <div class="child child-4">Content #4</div>
    <div class="child child-1">Content #1</div>
    <div class="child child-3">Content #3</div>
    <div class="child child-2">Content #2</div>
</div>

CSS

.parent div {float: right;}

http://jsfiddle.net/xYzAb/4/

Answer 5

Answer №3

I have attempted to achieve the desired result in your requested manner. While I have set a specific height for the block, there may be alternative methods to consider. Feel free to experiment HERE.

HTML:

<div class="container">
    <div class="five">5</div>
    <div class="eight">8</div>
    <div class="six">6</div>
    <div class="seven">7</div>
</div>

CSS:

.container{
    display: block;
    width: 100%;
    height: 350px;
    overflow: hidden;
}
.five{
    float: left;
    width: 50%;
    height: 200px;
    line-height: 200px;
    background: #666;    
    text-align: center;
    font-size: 60px;    
}
.eight{
    float:right;
    width: 50%;
    height: 350px;
    line-height: 350px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 60px;  
}
.six, .seven{
    float: left;
    width: 25%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 60px; 
}
.six{background: #ccc;}
.seven{background: #999;}

Answer 6

I have attempted to achieve the desired result in your requested manner. While I have set a specific height for the block, there may be alternative methods to consider. Feel free to experiment HERE.

HTML:

<div class="container">
    <div class="five">5</div>
    <div class="eight">8</div>
    <div class="six">6</div>
    <div class="seven">7</div>
</div>

CSS:

.container{
    display: block;
    width: 100%;
    height: 350px;
    overflow: hidden;
}
.five{
    float: left;
    width: 50%;
    height: 200px;
    line-height: 200px;
    background: #666;    
    text-align: center;
    font-size: 60px;    
}
.eight{
    float:right;
    width: 50%;
    height: 350px;
    line-height: 350px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 60px;  
}
.six, .seven{
    float: left;
    width: 25%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 60px; 
}
.six{background: #ccc;}
.seven{background: #999;}

Disrupt the standard css float and clear layout

Answer №1

Answer №2

Answer №3

Similar questions

IE8 encountering issues with Jquery ajax() request

Tips for refreshing a webpage after returning from a redirected page

placing additional containers at the bottom rather than on the right side

Unable to create circular dots within the Slick Slider widget

I encountered an error while running a basic express app with ts-node-dev: Invalid argument: A non-string value was provided to `ts.resolveTypeReferenceDirective`

Is it possible to animate captions and slides individually within a Bootstrap 5 carousel?

Using jQuery to create a script that will transition random images simultaneously within a div

Tips for aligning the router-link perfectly with an image in Vue.js 3

Positioning images to the right without using the float property

Is it possible to incorporate HTML and CSS into Kivy and Python 3 development?

Adjusting the opacity of a div while scrolling

Highlighted text with CSS

Generate a visual within a table cell utilizing the designated image file title

Exploring package.json: Uncovering the Installed Components of a Module

What is the method to configure the current host for the callbackURL in Passport strategy?

Determining height of an element in AngularJS directive prior to rendering the view

Getting the value of a repeater label in JavaScript can be achieved by following these

What is the best way to direct a Node server to serve an index file located one directory above?

Secondary Form Checkbox Input

Add the slide number and total count in between the navigation arrows of the owl carousel