I am currently working on my own responsive grid with columns. I am currently using 12 columns and I give each column a multiplier of 100/12 and subtract a margin on each column. So I make each column a little bit smaller so I can fit in a margin-left and make gutters this way.
#for $i from 1 through $column-count {
.column-#{$i} {
width: (((100 + $gutter-width) / $column-count) * $i) - $gutter-width;
}
}
This leaves me with something like this:
.column-1 {
width: 7.41667%; }
.column-2 {
width: 15.83333%; }
.column-3 {
width: 24.25%; }
etc.
This way I can set a margin-left for each column and just remove the very first margin-left in each row with the first:child selector
Twitter bootstrap however uses a column grid where all columns touch eachother and they use padding to kind of fake column gutters. However I tried some fooling around with bootstrap and you run into a problem when you actually set like a background for a column. Immediately you can see that the columns will touch. How do people prevent this from happening?
I guess using another element would inside the column would help? This however would get a bit messier than I would like probably.
I am asking this because I am looking for a solution since my grid can only go from default columns to 100% width columns when you downsize it.
grid: http://titan.ravenwebdesign.nl/
I would like to be able to add something like .mobile-column-6 to certain grid columns in a manner that bootstrap has with it's grid tiers of classes.
This would be helpful in for example having 2 columns next to each other when in downsized view. Except I'm currently using rows and every first child of my row has the margin removed. So it would't work like this:
<div class="row">
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
</div><!-- .row -->
Because of my responsive design which says that the first column will have it's margin removed I can't simply turn it into a 2 columns next to eachother design.
Hopefully somebody can help me out here although I understand this problem is extremely hard for me to explain like this.
Related
For example, I'm making a website with width of 960px. How should I use the container of this width? Are there any rules about it?
.container {
width: 960px;
margin: 0 auto;
}
What is more correct?
1) <div class='container'>[whole website]</div>
2) <div id='menu/header/etc'><div class='container'>[content for this block]</div></div>
3) <div id='menu/header/etc' class='container'>[content for this block]</div>
There are two ways to do that:
<div id="container">whole website</div>
<header><div class="container"></div></header>
The advantage of the second method is you can set background: red for the header and center its content within the container
I agree with #magreenberg, and I'd also say look around at boilerplates like Foundation, Bootstrap, or Skeleton Framework and look at their code to see how they format their pages.
Normally you get a Container (full width), Wrapper (content width like 960px), and rows, and within those rows you get various numbers of columns from 1-12.
Make sure to validate your HTML as you go to make sure what you write is semantically correct, and also check your pages in different browsers to check your CSS.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I don't know if I formulated my question correctly, so if I didn't I apologize. English isn't my native language.
Can someone give explain and give me an example to achieve the following; I want to have 3 container DIVs (A, B & C). If content is added to container A, the height of containers B & C should automatically match container A.
Now for the 2nd issue; for containers B & C I want to display images. Example (now the problem starts explaining); if container A goes past 100px in height container B displays two images (both 40px in height) and container C will display a single 90px image (in height). If container A goes past 200px more images will show up in containers B & C.
I tried to do this in the past, but failed in several ways. Often I could manage to get the DIV's to match in height, but images looked cut-off. In the end I gave up, because I lack the knowledge and skills to find a solution for this.
Once again I apologize if this doesn't make sense, but it's kinda hard to explain something, when English isn't your native language. So if it's not understandable, just ignore me completely. Just wanted to see if someone understand what I am trying to achieve here. Thank you.
//follow-up
Sam's code for using flex actually worked for the first part. Many thanks for that. I tried it out, though I had a glitch first (caused by using bottom-padding), it works great.
Now for the 2nd part; other than images I am also using text. The longer container A gets, the more stuff (text and images) should be displayed in container C (depending on the height on container A). So the contents in container C should by dynamic (depending on A)? I don't know if it's the right term.
I will show you an example of what I am currently doing. I currently have only 2 columns / DIVs (ignoring the 3rd for the time being, while testing). In container A there is a form. Depending on what options you select on the form, in grows in size (= height) obviously. Now thanks to Sam, the 2nd column has the same height as the first.
Now when you progress on the form it will grow in height, the same goes for the 2nd column, however it has empty space, I want that empty space filled up with text and a few images I created. So the amount of empty space is reduced to a minimal.
So in short; depending on contents in container A, container B should start showing the text and images I entered.
I hope this explains it a bit better?
Thank you once again in advance.
For the equal heights issue you could try using flexbox as an easy solution. Check out Can I Use to see if it's available for the browsers you intend to use. Here is an example to show you how it's used. Try adding and removing text to the first col to see the other cols changing their height according to it.
I'm afraid I do not understand the second issue. But maybe this is pointing you in the right direction.
html, body {
height: 100%;
width: 100%;
}
.wrap {
display: flex;
}
.col {
width: 50px;
padding: 10px;
}
.col.odd {
background: red;
}
.col.even {
background: lime;
}
<div>
<h1>Equal height with flexbox</h1>
<div class="wrap">
<div class="col odd">
blub <br>
test <br>
blub <br>
test
</div>
<div class="col even">blub</div>
<div class="col odd">blub</div>
</div>
</div>
Please have a look at http://jsfiddle.net/kV7Uq/1/
.productList div.grid:nth-child(4n+5){
clear:left;
}
What I'm trying to achieve is to create a 4 column grid. The above code used in the fiddle seems to be just fine - but if you look at that fiddle there is no 4 column grid.
<div class="pageNav"></div>
<div class="pageHeading"></div>
The above two divs that are also child divs of the container div, and located prior to the grid divs are causing a conflict. If those two divs are removed, the grid comes out just fine. I'm not sure if this is even fixable, please help - thank you.
Just offset it by 2 to compensate for those divs. Instead of +5, use +3.
.productList div.grid:nth-child(4n+3){
clear:left;
}
http://jsfiddle.net/kV7Uq/2/
If you don't want the very first box to have the clear: left then it would be +7.
Hi all and thanks in advance for your help.
I'm pretty new to the CSS, and I would like to have a good input to start building and learning the fastest way possible. I'm already doing some CSS tests myself. Right on the question.
this is the relative css code (I put it on pastebin because it's a bit long)
CSS CODE
As you can see in the code, the 2 tables showing up in the image, have a background and I had to set their size manually with
width:100px;
height:120px;
in the td.menuleft and td.menucenter classes.
1° Question
How do I make automatically resizing cells?
For example i want to say:
Make table tag wide 100% of the page width, then let me make classes for cell tables that are a certain percentage of the table width.
Example
Pic of my work, and how I want to make it like
This way it will be easy to make up tables into tags to automatically fill pages. I've seen something about positioning (relative, absolute) but I didn't managed to make it work.
2° question
What's the best way to structure a web page with css in general? It's ok to do like I said, a div, with tables inside and place every element in a table like manner?
Or can you give me any guide step to step on how to do a particular template?
Thanks guys.
when you want to learn how to make good and effective design that are also considered any worth by search engines, then don't use tables for layouts. tables are there for showing table data, not layout. Use instead divs and start reading about positions, displays, floats.
That is the way you want to go
If you set the tds to be a certain percentage width, they will be the percentage of the parent. so:
table {
width: 100px;
}
tr {
width: 100% /* Will be 100px */
}
td.quarter {
width: 25%; /* Will be 25px */
}
td.half {
width: 50%; /* Will be 50px */
}
And I agree with the previous poster, do NOT use tables for layouts. Not that you are doing that here. But for layouts stick to divs and such.
I have a bunch of items (text, image, mixed content, etc) that I want to display. The user can define what row and what column that item appears in. For example, in row 1, there could be two items/columns, both images. In row two, there could be three items / columns, one with an image, two others as pure text. Oh, and the user may specify the width of any particular column/image/item.
I have a solution that uses multiple tables that works. In essence, each row is a new table. This works for the most part.
I'm wondering if I can use just divs?
Now my CSS foo is lacking, and I tried to copy examples from the web, and I haven't been able to get it working. Right now I have something like this:
[for each row]
[div style="float: none"]
[for each column]
[div style="float: left"]
[content]
[/div]
[/div]
[br]
But everything is overlapping each other.
I've also tried using "position: relative", but things look even more borked.
So can divs actually be used for multiple rows and different number of columns?
They sure can! The basic effect (it sounds like) you're looking for is like so:
#wrapper {
width: 900px;
}
.item {
height: 200px;
width: 200px;
margin: 10px;
float: left;
}
<div id="wrapper">
<div class="item">Something</div>
<div class="item">Something else</div>
<div class="item">Something cool</div>
<div class="item">Something sweet</div>
<div class="item">Something just ok</div>
</div>
So what this would do is set up a fixed-width container (the #wrapper) and fill it with "blocks". Because each has a fixed width and is floated left, they'll line up in a grid. Because of the width/margin I've set for each, you should get 4 per row. If you need spacers, just put in blank DIVs to get the content on the right row/column.
The 960 Grid System is designed to accomplish things just like this. Take a look at http://960.gs/ they have plenty of examples of what you can do with 960.
For the unindoctrinated, it defines two types of layouts 12 column or 16 column. Each column is a predefined width with predefined gutters between them. You can then use the built in css styles to have a div span any number of the columns. It's incredibly powerful for layouts where different sections of the page using different layouts.