Is it possible to group a set of html elements so that they move together?

Question

When the browser size changes / on devices of different sizes, I need a set of html elements that are all semantically connected to stay together and move in the block. That is, if one of the elements moves to the next "line" due to the fact that they do not have sufficient width to contain the entire group, ALL of it should move down.

IOW, this is similar to the “keep together” attribute that some groups of elements in a word processing document have.

To be more specific, let's say that I have collections of the following elements:

1) an anchor tag, filling out a first "column" 2) a collection of tags, to the right of the anchor tag, consisting of: (a) a div, followed by a <br/> (b) a cite, followed by a <br/> (c) another div, followed by a <br/> (d) two or three anchor tags that are aligned side-by-side at the bottom of the second "column" 

So, to summarize, if there is not enough space for the second “column” in the “row” and not contain in the first “column” and move the elements in the second column to the next row, “in the first column you should stick to your brothers and sisters and always stay on the same "row" with them (I put the "rows" and "column" in quotation marks, because I do not use the html table, but those that exist only in the virtual sense).

If you find it a bit hard to imagine (I don't blame you), check out the script: http://jsfiddle.net/W7CYC/8/

Note: wrapping groupings in html5 s did not help.

Here is the code:

HTML:

 <div class="yearBanner">2013</div> <section> <a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/0299186342"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a> <div id="prizeCategory" class="category">BIOGRAPHY</div> <br/> <cite id="prizeTitle" class="title">Son of the Wilderness: The Life of John Muir</cite> <br/> <div id="prizeArtist" class="author">Linnie Marsh Wolfe</div> <br/> <img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"> <img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"> <img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"> </section> <section> <a class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/0299186342"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a> <div class="category">BIOGRAPHY</div> <br/> <cite class="title">Son of the Wilderness: The Life of John Muir</cite> <br/> <div class="author">Linnie Marsh Wolfe</div> <br/> <img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"> <img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"> <img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"> </section> 

CSS

 body { background-color: black; } .floatLeft { float: left; padding-right: 20px; padding-left: 5px; } .yearBanner { font-size: 3em; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; float: left; padding-top: 64px; } .category { display: inline-block; font-family: Consolas, sans-serif; font-size: 2em; color: Orange; width: 160px; } .title { display: inline-block; font-family: Calibri, Candara, serif; color: Yellow; width: 160px; } .author { display: inline-block; font-family: Courier, sans-serif; font-size: 0.8em; color: White; width: 160px; } 

JQuery

 $('#prizeCategory').text("Changed Category"); $('#prizeTitle').text("Changed Title that spans two rows"); $('#prizeArtist').text("Changed Author and co-author"); $('#mainImage img').attr("src", "http://ecx.images-amazon.com/images/I/61l0rZz6mdL._SY300_.jpg"); $('#mainImage img').attr("height", "200"); 

Answer 1

You group elements simply with a div (or if you want to use section , that's fine too). With a little hint of CSS, you can group an element inside a wrapper. Unfortunately, there is no such attribute except to keep it together, but you can do the following:

 section.wrapper { min-width: 400px; /* Minimum width of your wrapper element */ overflow: hidden; display: inline-block; } 

min-width helps keep items inside the wrapper in order. Choose the value that best suits your situation.
overflow with a hidden value allows your shell to understand and add the width and height values ​​of the floating elements inside.
a display with a built-in value block allows all shells to be arranged next to each other, if there is enough space, if not, the wrapper goes to another line.

http://www.w3schools.com/ provides an excellent source for understanding and learning CSS, HTML, and web technologies in general. Very useful.

EDIT
When I edited, the minimum width or width is better in this situation than max-width

Answer 2

This is not an HTML issue, learn about using absolute CSS position inside relative positioning:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 3

Bootstrap mesh

Bootstrap includes a powerful flexbox mobile grid for building layouts of all shapes and sizes. Its based on 12 layout columns and has several levels, one for each range of queries. You can use it with Sass mixins or our predefined classes.

Code example

:

  <div class="row"> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> </div> <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-lg-4">.col-lg-4</div> <div class="col-lg-4">.col-lg-4</div> <div class="col-lg-4">.col-lg-4</div> </div> <div class="row"> <div class="col-xl-4">.col-xl-4</div> <div class="col-xl-4">.col-xl-4</div> <div class="col-xl-4">.col-xl-4</div> </div> 

Conclusion: This is the default output: and when my browser size decreases to less than 1200 pixels

Here we have four rows, and the cubes of the first row will always be in one tug.

the second line will remain when the maximum width> = 768px

the third line will remain when the maximum width is> = 992px, etc. I entered this data in the G rids option

Here is the demo of the gif release

You can mix these classes together. for example

  <div class="row"> <div class="col-sm-4 col-xs-6">first-col</div> <div class="col-sm-4 col-xs-3">second-col</div> <div class="col-sm-4 col-xs-3">third-col</div> </div> 

means that if the small devices I want the three columns to be the same, but in a very small device, I want the first-half to be equal to half the space, and every second column to be 25% of.

Now that you can see in each size, you can set what behavior each row and each column should perform, and if you want to always move together, you can use the col-* classes without a prefix. Grid Options

  (<768px) (≥768px) (≥992px) (≥1200px) Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Container width None (auto) 750px 970px 1170px Class prefix .col-xs- .col-sm- .col-md- .col-lg- # of columns 12 Column width Auto ~62px ~81px ~97px Gutter width 30px (15px on each side of a column) Nestable Yes Offsets Yes Column ordering Yes 

Here in more detail if you need