Divs that are floated and only partially visible at the end

Question

Divs that are floated and only partially visible at the end

My layout consists of 6 Divs floated left to create 6 columns. The width of all these floats combined may extend beyond the window width for most users, especially with the 6th column included. Is there a way for this 6th column to be partially visible (with anything wider than the window getting hidden), rather than wrapping to a new line below the others? See diagram below.

                                        \
  +----+ +----+ +----+ +----+ +----+ +--/
  |  1 | | 2  | | 3  | | 4  | | 5  | | 6\
  |    | |    | |    | |    | |    | |  /
  |    | |    | |    | |    | |    | |  \   Screen Edge
  |    | |    | |    | |    | |    | |  /  <---
  +----+ +----+ +----+ +----+ +----+ +--\
                                        /

css css-float

Answer 1

Answer №1

Yes, it is possible to achieve this using the following HTML markup and CSS styles:

HTML

<div id="columns">
    <div id="wrap">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>    
    </div>
</div>

CSS

#columns {
   width: 600px;
   overflow: hidden;   
}

#wrap {
   /* sets the width for 6 columns plus margins */
   width: 660px;   
}

.col {
   float: left;       
   width: 100px;

   /* additional visual styling */
   margin: 5px;
   height: 100px;
   background: red;
}

You can view the final result here.

The purpose of the #columns container is to ensure that the overflow is hidden. The #wrap element then prevents the floats from dropping if there isn't enough space (even with overflow: hidden set, floats will drop if the parent container's width is insufficient).

Answer 2

Yes, it is possible to achieve this using the following HTML markup and CSS styles:

HTML

<div id="columns">
    <div id="wrap">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>    
    </div>
</div>

CSS

#columns {
   width: 600px;
   overflow: hidden;   
}

#wrap {
   /* sets the width for 6 columns plus margins */
   width: 660px;   
}

.col {
   float: left;       
   width: 100px;

   /* additional visual styling */
   margin: 5px;
   height: 100px;
   background: red;
}

You can view the final result here.

The purpose of the #columns container is to ensure that the overflow is hidden. The #wrap element then prevents the floats from dropping if there isn't enough space (even with overflow: hidden set, floats will drop if the parent container's width is insufficient).

Answer 3

Answer №2

Place the 6 divs inside a 7th div with a fixed width.

<div class='container'>

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

</div>

.container{
  width:1200px;
}
.box{
  width:200px;
  float:left;
}

Answer 4

Place the 6 divs inside a 7th div with a fixed width.

<div class='container'>

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

</div>

.container{
  width:1200px;
}
.box{
  width:200px;
  float:left;
}

Divs that are floated and only partially visible at the end

Answer №1

Answer №2

Similar questions

Creating an HTML table by populating it with data from a JavaScript array

The tree expansion does not activate the CSS transition

What is the best way to synchronize the image dimensions and source when dynamically loading images?

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

Trouble with applying position absolute to pseudo element in Firefox version 12 and higher

Tips for concealing lengthy text within a select box and automatically wrapping it when displayed as an option

Using JQuery to create an animated slideToggle effect for a multicolumn list

CSS Grid expands the item width on its own when there is still space left

Retrieve the content of the second <li> element using jQuery

Text display appears uneven

Listening for JS events on a CSS class called "int-only" which only accepts

Mysterious extra space appearing on the right side of the left scroll div in Chrome

The combination of Javascript and CSS allows for interactive and visually

Align images to the bottom of the gallery only if their heights differ

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

Intersecting interactions: Mouse events on flex boxes

Why does this inner HTML table always adjust its width based on the content within it? Is there a way to make it match the width of its container instead

Adjust the positioning of a class element

My goal is to develop a PHP photo gallery using either an array, session variables, or cookies