Positioned in the middle is a collection of left-aligned divs

Question

Positioned in the middle is a collection of left-aligned divs

While many questions address similar issues, the focus is always on having all items centered (accomplished by using display:inline-block). However, my requirement is to have the last line of items floated neatly left and only center the container itself (located in a variable container - the body).

The challenge lies in getting the container to take the width of the containing floated elements, regardless of setting display or clear. It seems like a simple task, yet I'm struggling to make it work.

Feel free to check out this basic fiddle to experiment with the scenario.

html css

Answer 1

Answer №1

To find a solution, you need to include an inner div:

For CSS:

#inner{
    width:396px; /* (100+15*2+2) * 3 */
    margin:auto;
}

And for HTML:

<div id="container">
    <div id="inner">
        <div class="block">1</div>
        <div class="block">2</div>
         <div class="block">3</div>
         <div class="block">4</div>
         <div class="block">5</div>
         <div class="clear"></div>
    </div>
</div>

Check out the DEMO and DEMO without fixed body width.

Update: If you prefer not to have a fixed body width, use width:80%; instead. See the DEMO

Answer 2

To find a solution, you need to include an inner div:

For CSS:

#inner{
    width:396px; /* (100+15*2+2) * 3 */
    margin:auto;
}

And for HTML:

<div id="container">
    <div id="inner">
        <div class="block">1</div>
        <div class="block">2</div>
         <div class="block">3</div>
         <div class="block">4</div>
         <div class="block">5</div>
         <div class="clear"></div>
    </div>
</div>

Check out the DEMO and DEMO without fixed body width.

Update: If you prefer not to have a fixed body width, use width:80%; instead. See the DEMO

Answer 3

Answer №2

One solution is to create 2 divs for proper centering and then a separate div with a set width to contain all the blocks. Then, you can clear it and utilize the inner nested div (referred to as 'content' in my code) to manage the alignment of the inner float.

Check out the updated version on your fiddle: http://jsfiddle.net/h9H8w/8/

// HTML
<div id="container">
    <div id="inner">
         <div id="content">
             <div class="block">1</div>
             <div class="block">2</div>
             <div class="block">3</div>
             <div class="block">4</div>
             <div class="block">5</div>
        </div>
    </div>
</div>

// CSS
body{
    width: 100%;
}
#container{
    float: left;
    position: relative; 
    left: 50%;
}
#inner{
    float: left;
    position: relative; 
    left: -50%;
    border:1px solid black;
}
#content{width: 500px;}
.clear{
    clear:both;
}
.block{
    float: left;
    width:100px;
    height:50px;
    border:1px solid black;
    margin: 15px;

}

Answer 4

One solution is to create 2 divs for proper centering and then a separate div with a set width to contain all the blocks. Then, you can clear it and utilize the inner nested div (referred to as 'content' in my code) to manage the alignment of the inner float.

Check out the updated version on your fiddle: http://jsfiddle.net/h9H8w/8/

// HTML
<div id="container">
    <div id="inner">
         <div id="content">
             <div class="block">1</div>
             <div class="block">2</div>
             <div class="block">3</div>
             <div class="block">4</div>
             <div class="block">5</div>
        </div>
    </div>
</div>

// CSS
body{
    width: 100%;
}
#container{
    float: left;
    position: relative; 
    left: 50%;
}
#inner{
    float: left;
    position: relative; 
    left: -50%;
    border:1px solid black;
}
#content{width: 500px;}
.clear{
    clear:both;
}
.block{
    float: left;
    width:100px;
    height:50px;
    border:1px solid black;
    margin: 15px;

}

Positioned in the middle is a collection of left-aligned divs

Answer №1

Answer №2

Similar questions

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Using background-image in Internet Explorer has always been a challenge

How can I enable drag-and-drop functionality for my carousel?

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

Utilize text wrapping to ensure a fixed maximum height for content display

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

An absolutely positioned element will always move within its relative container

After a group of floated items, there will be an automatic "clear: both" applied

What's causing these divs to be misaligned in various directions?

A centralized navigation bar featuring a logo on the left side

Creating a PDF document using html2pdf: A step-by-step guide

Problem with the menu button overflowing

What is the best way to add color to a Table Header?

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Exploring the diversity of perspectives through Angular

Tips for implementing a default font on a website

How to stop PHP code from running before it should in an HTML form script

Exploring Circuits in HTML5

"Modify the CSS color of h1 based on the presence of a specific class containing spaces in a div