I'm attempting to set up a photo gallery using only html/css for a school assignment, how would I make it such that two photos of different heights/widths automatically line up such that there is no empty space below one of the photos.
ie. if using rows, then such that there is no space between the bottom of the row and only on of the photos?
First, it will be easier if you can line make the images the same width and just set the height to auto.
Then, you could do something this: https://codepen.io/nikitaagarwal/pen/gpRPWO?editors=1100
which uses:
column-count: 4;
column-gap: 1em;
to create the page columns of equal width.
If you need to make them different widths, I think it would be easier to put only one width per column.
Aside:
I usually use the Masonry library for this, but it contains JavaScript so you might not be able to.
https://masonry.desandro.com/
I'm having trouble working with Twitter bootstrap 3 to render a web page composed of different slices. The end-product would be a page composed of rows containing img-responsive slices that stay in their respective rows (i.e. They don't wrap)
But Bootstrap CSS does something funny with the images. They're nested in the predictable structure, container>row>col-xs-12>Images, but even when I set the image margin: 0;, there's still a small gap between adjacent images. Moreover, I can't get the rows with multiple slices to stay on the same row no matter what (because the page makes no sense if slices wrapped to a new line) and still be "responsive."
Alternatively, if someone could instruct me how to set up a responsive image map (or shoot me a solid link), I could try that route.
You need to put each image in its own col-xs-*, override col-xs padding, and add max-width:100% to the img. Also, don't get confused by .row's usage. It's not meant to restrict items to a visual row, and doesn't. Frankly, the name is misleading. Just use the single .row within the .container, and make sure your col-xs's add up to 12 and you'll avoid unwanted wrapping.
Here's an example: http://www.bootply.com/aYOdYaV4Gq
.col-xs-3{
padding-right:0px;
padding-left:0px;
}
.img{
max-width:100%;
}
In my bootply, I've actually added classes with these attributes rather than overwriting the bootstrap classes like above. Either works, but adding custom classes means it's easier to turn it on and off later.
This is very similar to Bootstrap 3 fluid grid layout issues? and Bootstrap responsiveness view but the options for masonry and isotope, while attractive, aren't an option as I must retain ordering for the elements.
From the linked questions, I've moved a fair bit of the way forward using the clearfix class application as can be seen at http://bootply.com/103688. The clearfix divs are left unindented so they stand out more.
I also found that undesirable results will occur if, as is my case, I am only using some of the column sizes (xs, md, lg). This necessitates that the clearfix also specify the visible-sm or, when the viewport reaches the "small" size, the clearfix is no longer visible, and problematic stacking recurs.
Applying them is simple enough, as this is a real-world fizzbuzz problem, but it seems anti-DRY. Is there a cleaner way for me to do this, with less repetition of the clearfix tags? Some means of having the browser (CSS) compute where the clearfix should be applied?
You can use an manual approach of creating rows according with the number of elements per breaking point. For example:
If you have a row with 2 elements only:
#media(max-width: #screen-tablet){
// create rows (clearfix)
.col-xs-6:nth-of-type(odd){ clear:left; }
}
or if your rows contains 4 elements
#media(min-width: #screen-tablet) and (max-width: #screen-desktop){
// create rows (clearfix)
.col-sm-4:nth-of-type(3n+1){ clear:left; }
}
etc..
every time I start to code a new responsive page I come up with this question so I thought I ask you guys about it: "is it normal to break readability when adding responsiveness to pages?"
I think you'll better understand with an example: I have 2 big columns in a 12 columns grid system so I set 2 divs with class .grid-6 and in the css .grid-6 {width:50%}. In the tablet layout the graphic designer has placed three columns so i change the width of those columns to 33% but now I have a div with class grid-6 (which suggests 50% width) and an actual column width of 33%.
So when I start working on responsiveness it all just feels like "hacks".. I though about adding different classes for tablets and phones or other devices (<div class="grid-6 tablet-grid-4 phone-grid-3">) but that just doesn't feel right.
the problem appears when you receive a graphic design that has different amount of columns for each breakpoint..I mean, you can't change the column count in the html, amirite?
Consider using Cascade Framework.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your build includes the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
However, this still may lead to stuff like <div class='col width-1of4 tablet-1of3 phone-1of2'> </div> in some cases. In those cases, going semantic is a better approach. More concretely, do something like <div class='col custom_class'> </div> or <section class='custom_class'> </section> and then set the width for each breakpoint yourself in your custom CSS.
I'm a little lost but I believe your talking about mobile browsers correct? If so #media is your solution.
html,body{
min-height:100%;
}
.grid-6 {
width:33%;
min-height:100%;
margin:0px;
display:inline-block;
}
The above will create a column grid similar to the one you have explained. I think? lol
Converting these to one column for mobile browsers is easy. Think of #media as a condition. Basically I've written 'if device width <= 480px' which is relative to an iPhone 4gs and below screen.
#media only screen and (device-width:480px){
.grid-6{
width:100%;
display:block;
}
}
All other styles that are not declared within the #media condition are inherited from the class' above. hope this helped
First of all it is better to name a class after its function rather than its physical appearance... for example navigationContainer is a better name than leftContainer, as navigationContainer can exist anywhere on the page.
As far as adapting for different layouts, screen sizes and orientations etc. you will want to make use of the media attribute (or the #media declaration) which will allow you to apply class definitions only to devices and screens meeting certain criteria. Herein lies the benefit of naming classes after function. If you name a class after it's function (like mainContentGrid, then you can redefine the class as many times as you like in all your different media stylesheets. Because in principle only one sheet will be applied depending on the viewing context, your styles will always be appropriate for the viewing context. This eliminates the multiple class problem that you have and cleans up your code.
If you want a more precise opinion, please post some code and I'd be happy to give you my thoughts.
The number of columns should stay consistent across all browser sizes; only their width and padding should change. It is however common to reset all columns to 100% width when in mobile, but otherwise they should only shrink, not be dropped entirely. I'd suggest going back to the designer or rejigging your grid to have a multiple that all responses adhere to.
Flexbox is your solution, but it's not time yet.
If you don't care that much about semantics, it's a perfect solution you describe using tablet-grid-4. Grids in definition using sizing in their class names aren't semantic. You can also name it like desktop-main desktop-aside tablet-main tablet-aside and so on. But I always fall short my self in practice. What do you name three even cols in tablet. It's not main, it's not aside. They are cols each of one third :) It's very hard not to speak of layout in html when the whole containers are their for layout.
Regards
Try the Dead Simple Grid. Rather than hard-coding the grid layout classes like
<div class="grid-6 tablet-grid-4 phone-grid-3"></div>
you assign an abstract classes like
<div class="col left"></div>
<div class="col right"></div>
and then assign the width to these classes for the different screen sizes
.left, .right { width: 100%; }
#media only screen and (min-width: 54em) {
.left, .right { width: 50%; }
}
This example targets small screens by default (e.g. smartphones) having left and right fill the entire width of their container (which can be another column since nesting is supported!) and displaying the two elements underneath each other. When the screen is large enough though, the two columns will be displayed next to each other.
Dead Simple Grid is very simple (the entire css code is 250 bytes!) but surprisingly powerful.
I want to display data like the following:
Title Subject Summary Date
So my HTML looks like:
<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>
The problem is, all the text doesn't appear on a single line. I tried adding display="block" but that doesn't seem to work.
What am I doing wrong here?
Important: In this instance I dont want to use a table element but stick with div tags.
It looks like you're wanting to display a table, right? So go ahead and use the <table> tag.
I would use the following markup:
<table>
<tr>
<th>Title</th>
<th>Subject</th>
<th>Summary</th>
<th>Date</th>
</tr>
<!-- Data rows -->
</table>
One other thing to keep in mind with all of these div and list based layouts, even the ones that specify fixed widths, is that if you have a bit of text that is wider than the width (say, a url), the layout will break. The nice thing about tables for tabular data is that they actually have the notion of a column, which no other html construct has.
Even if this site has some things, like the front page, that are implemented with divs, I would argue that tabular data (such as votes, responses, title, etc) SHOULD be in a table. People that push divs tend to do it for semantic markup. You are pursuing the opposite of this.
I don't mean to sound patronizing; if I do, I've misunderstood you and I'm sorry.
Most people frown upon tables because people use them for the wrong reason. Often, people use huge tables to position things in their website. This is what divs should be used for. Not tables!
However, if you want to display tabular data, such as a list of football teams, wins, losses, and ties, you should most definitely use tables. It's almost unheard of (although not impossible) to use divs for this.
Just remember, if it's for displaying data, you can definitely use a table!
If there's a legitimate reason to not use a table then you could give each div a width and then float it. i.e.
div.title {
width: 150 px;
float: left;
}
Is there a reason to not use tables? If you're displaying tabular data, it's best to use tables - that's what they're designed for.
To answer your question, the best way is probably to assign a fixed width to each element, and set float:left. You'll need to have either a dummy element at the end that has clear:both, or you'll have to put clear:both on the first element in each row. This method is still not fool-proof, if the contents of one cell forces the div to be wider, it will not resize the whole column, only that cell. You maybe can avoid the resizing by using overflow:auto or overflow:hidden, but this won't work like regular tables at all.
or indeed this, which is very literally using tables for tabular data:
https://stackoverflow.com/badges
Just to illustrate the remarks of the previous answers urging you to use table instead of div for tabular data:
CSS Table gallery is a great way to display beautiful tables in many many different visual styles.
Sorry, but, I'm going to tell you to use tables. Because this is tabular data.
Perhaps you could tell us why you don't want to use tables?
It appears to me, and I'm sure to a lot of other people, that you're confused about the "don't use tables" idea. It's not "don't use tables", it's "don't use tables to do page layout".
What you're doing here is laying out tabular data, so of course it should be in a table.
In case you're unclear about the idea "tabular data", I define it like this: bits of data whose meaning isn't clear from the data alone, it has to be determined by looking at a header.
Say you have a train or bus timetable. It will be a huge block of times. What does any particular time mean? You can't tell from looking at the time itself, but refer to the row or column headings and you'll see it's the time it departs from a certain station.
You've got strings of text. Are they the title, the summary, or the date? People will tell that from checking the column headings. So it's a table.
The CSS property float is what you're looking for, if you want to stack div's horizontally.
Here's a good tutorial on floats: http://css.maxdesign.com.au/floatutorial/
display:block garauntees that the elements will not appear on the same line. Floating for layout is abuse just like tables for layout is abuse (but for the time being, it's necessary abuse). The only way to garauntee that they all appear on the same line is to use a table tag. That, or display:inline, and use only (Non-Breaking Space) between your elements and words, instead of a normal space. The will help you prevent word wrapping.
But yea, if there's not a legitimate reason for avoiding tables, use tables for tabular data. That's what they're for.
In the age of CSS frameworks, I really don't see a point of drifting away from table tag completely. While it is now possible to do display: table-* for whatever element you like, but table is still a preferred tag to format data in tabular form (not forgetting it is more semantically correct). Just pick one of the popular CSS framework to make tabular data looks nice instead of hacking the presentation of <div> tags to achieve whatever it is not designed to do.
display: block
will certainly not work, try
display: inline
or float everything to the left then position them accordingly
but if you have tabular data, then it is the best to markup in <table> tag
some reference: from sitepoint
You'll need to make sure that all your "cells" float either left or right (depending on their internal ordering), and they also need a fix width.
Also, make sure that their "row" has a fixed width which is equal to the sum of the cell widths + margin + padding.
Lastly make sure there is a fixed width on the "table" level div, which is the sum of the row width + margin + padding.
But if you want to show tabular data you really should use a table, some browsers (more common with previous generation) handle floats, padding and margin differently (remember the famous IE 6 bug which doubled the margin?).
There's been plenty of other questions on here about when to use and when not to use tables which may help explain when and where to uses divs and tables.
Using this code :
<div class="title">MyTitle</div><div class="subject">MySubject</div><div class="Summary">MySummary</div>
You have 2 solutions (adapt css selectors to you case):
1 - Use inline blocks
div
{
display: inline;
}
This will result in putting the blocks on the same line but remove the control you can have over their sizes.
2 - Use float
div
{
width: 15%; /* size of each column : adapt */
float: left; /* this make the block float at the left of the next one */
}
div.last_element /* last_element must be a class of the last div of your line */
{
clear: right; /* prevent your the next line to jump on the previous one */
}
The float property is very useful for CSS positioning : http://www.w3schools.com/css/pr_class_float.asp
The reason the questions page on stack overflow can use DIVs is because the vote/answers counter is a fixed width.
Tabular data can also be represented as nested lists - i.e. lists of lists:
<ul>
<li>
heading 1
<ul>
<li>row 1 data</li>
<li>row 2 data</li>
<ul>
</li>
<li>
heading 2
<ul>
<li>row 1 data</li>
<li>row 2 data</li>
<ul>
</li>
</ul>
Which you can layout like a table and is also semantically correct(ish).
For the text to appear on a single line you would have to use display="inline"
Moreover, you should really use lists to achieve this effect
<ul class="headers">
<li>Title</li>
<li>Subject</li>
<li>Summary</li>
<li>Date</li>
</ul>
The style would look like this:
.headers{padding:0; margin:0}
.headers li{display:inline; padding:0 10px} /The padding would control the space on the sides of the text in the header/
I asked a similar question a while ago Calendar in HTML and everyone told me to use tables too. If you have made an igoogle home page, just yoink their code.
I made a system of columns and sections within the columns for a page. Notice with google you can't have an infinite number of columns and that offends our sensibilities as object people. Here's some of my findings:
You need to know the width of the columns
You need to know the number of columns
You need to know the width of the space the columns inhabit.
You need to ensure whitespace doesn't overflow
I made a calendar with DIV tags because it is impossible to get XSL to validate without hard coding a maximum number of weeks in the month, which is very offensive.
The biggest problem is every box has to be the same height, if you want any information to be associated with a field in your table with div tags you're going to have to make sure the whitespace:scroll or whitespace:hidden is in your CSS.
Preface: I'm a little confused by the responses so far, as doing columns using DIVs and CSS is pretty well documented, but it doesn't look like any of the responses so far covered the way it's normally done. What you need is four separate DIVS, each one with a greater "left:" attribute. You add your data for each column into the corresponding DIV (column).
Here's a website that should help you. They have many examples of doing columns with CSS/DIV tags:
http://www.dynamicdrive.com/style/layouts/
All you have to do is extrapolate from their 2-column examples to your 4-column needs.
You should use spans with:
display:inline-block
This will allow you to set a width for each of elements while still keeping them on the same line.
See here, specifically this section.
Now, to appease the downvoters - of course tabular data should be in a table. But he very specifically does NOT WANT a table. The above is the answer to HIS QUESTION!!!
First display:block should be display:inline-block , Although you might have figured it out already.
Second you can also use display:table , display:table-cell , display:table-row and other properties.
Although these are not as good as using table.