If you do the math, the container is 946px / 5 (columns) = 189.2px. I don't see how they have managed to fit five columns in without extra space left over? Can be viewed here (1200px view).
Their wrapper element, ul.products actually only has a width of 945px, plus 1px border left (and top). That's why their five columns with each a width of 189px add up with no space.
This is the layout:
1px left border. This is the CSS:
border-width: 1px 0 0 1px;
Related
I have a grid with column and row gaps of 10px and I'd like to add a 1px solid line in the middle of the gap.
How do I do that?
Setting the gap size to 0 and using padding in the cells works but also adds the padding and lines at the edges of the grid, which I don't want.
Pseudo code:
**HTML**
grid
element
element
element
/grid
**CSS**
grid
display: grid
gap: 1px
background-color: black
element
padding: 10px (depends how much distance you want from the line)
background-color: white (everything but transparent)
Basically you will use container background color as a way to color the gaps, then you will set a background on elements (to not see the parent's one) and use a padding to set a distance from the gap line.
I have a page with a row of 100px and 4 columns of 25px each. I seem to get at odd behavior. Please take a look at this fiddle http://jsfiddle.net/GmU2k/
My question is should all of the columns be on the same line?
Fiddle
Better use box-sizing: border-box by adding below css on column-3: That happens because of your 1px border.
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
Check this fiddel
http://jsfiddle.net/GmU2k/2/
.column-3 {
width: 24%;
border: 1px solid red;
float: left;
}
You gave the width as 25% and a border of 1px. So 4 divs width = 100% + border width
Thats why 4 divs are not shown in one line. Because there is not enough space.
Once you decrease the width of inner divs then there will be enough space. Or you can remove the border, so that inner divs will have enough space to be shown in a single line.
Note: The simple concept is there should be enough space for the divs to be shown in single line. If there is not enough space then they will flow to the next line.
Change the column-3 width to 24%.
I have four boxes in a row and they all have the same class. They all should be the same width but one is 1 pixel wider than the rest and it's throwing the row out. As far as I can see, the content is not pushing it, and there is nothing in the box to make it 1 pixel wider. It's the second last box to the right with the contact form in it on this site: http://www.guitarworldcityarcade.com.au/
If it's not content, how can I tell what's making this particular div 1 pixel wider than the rest?
I had compensated for the border in the widths of each box: layout is 1120px wide. 1120/4 = 280. Each box has a padding of 5px, so thats 5 on the left and right. 280-10=270. Then the border, which is 1px on each side, so thats 270-2 = 268. I have set my class for the boxes to be 268px wide and yet one is one pixel wider. I don't really want to sacrifice the border (yet).
You are using border: 1px solid #111111; on line 247 of global.css.
So if you are aware of CSS Box Model
The border is counted outside of the element and not inside hence it offsets your element by 2px and not 1px because it takes 1px on the left, 1px on the right as well as top and bottom too.
So two solutions here, either you can use border: 0; or you need to use box-sizing: border-box; on that element, which will count the border inside instead of outside.
That extra space is coming because of border. So you need to set it to zero.
Declare border: none; for the last box and it will work.
Add this code in your class
border: none;
outline: none;
width:0;
Remove the css border property to that div
border:0px;
i am trying to make a list of divs of same size. I need to do it like this. I allign the divs with float left and let's say 5 divs have space in 1 line, the 6th div will go under it. Now what i need to do is the extra space that remains from this 5 divs on the line, should be divided equally between this 5 divs.
Let's say each div has 200px and the screen has 1100px width. The 5 divs now will have to have 25px between them. 200px + 25px + 200px + 25px + 200px + 25px + 200px + 25px + 200px.
Thank you in advance, Daniel.
You can float left an empty div with the width of 25px in your example or you use a percentage 25px for 1100 would be 2%
What I tried is % widths for your divs, and % widths for the margin. Since you want 5 divs per line the most you could do without space between or border is 20%. In the jsfiddle below, I used 17% width and 2% on the margin-left setting. You can customize a first div style to not pad left if need be.
.cell {
height:30%;
width:17%;
background:#ff0000;
border:1px solid black;
margin-bottom:2em;
float:left;
margin-left:2%;
}
http://jsfiddle.net/aKn4n/
You pretty much keep 5 divs on the first row as you shrink and grow the browser window.
I would personally try giving each div a margin like this:
div{
margin: 0px 12.5px;
}
This will hopefully evenly space all the divs.
My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.
The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.
As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.
For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.
I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:
I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the #container div background-image, but, probably because the #container itself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.
I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.
How do I make this work?
You could try something like this:
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
Of course, mess around with the values until it suits you.
Single line of code :
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
Just insert in corresponding css style element
Done!