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.
Related
I have a problem with my fixed vertical navigation bar. By zooming out the page you will see that my sign up button will be pushed down. I tried everything to get it fixed but nothing worked for me. Does anyone know how to fix it??
I centered the text in the button, maybe that is why it is pushing the whole button down??
text-align: center;
vertical-align: middle;
line-height: 40px;
JSFIDDLE
it's the border-right, that's causing the issue.
It will be more than 100% of the width for the browser if you add 49% + 50% button width + 1px border, but you can just use a box-shadow, since it's not affecting the box model:
#navigation #package .inloggen {
width: 50%;
box-shadow:inset -1px 0 0 gray
}
demo: https://jsfiddle.net/L2pdvays/3/
Set box-sizing property to border-box for your divs. Those are getting pushed down because of the additional width of your borders. Border-box makes the total content, padding and border to be 49% instead of just the content and padding.
Basically the 3px border of the Login div is making the total to be 114px wide. That accounts for the 111px of content and padding PLUS the 3px of the border. The total of that div would then be 114px. If your other div is taking up 111px (since it has no borders)... 114 + 111 = 225px which is greater than your container width of 222px.
So to make 50% mean 50% of your TOTAL content + padding + border width, you need to set box-sizing to border-box. Doing so, you will be able to make both your divs 50%.
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;
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'am newbie in css, I want to discuss this question with you:
suppose that we have a div named A and its width = X px, and we have also 2 divs inside it, div B and div C.
div B:
width: 20%;
border: 1px;
div C:
width: 80%;
border: 1px;
so that, the summation of width of these 2 divs is as follow:
20% + 80% + 2(1px left border + 1px right border) => 100% (" width of div A) + 4px
the question is how to make the width of B and C equal to the width A regardless how its the width of their borders?
If you take a look at box model, the borders, paddings and margins are counted outside of the element, inorder to count the border inside, as you need, you have to use
box-sizing property with a value of border-box.
Demo 1 (Normal)
Demo 2 (Using box-sizing)
I assume either B or C have the float attribute.
In that case, skip the width-specification from the non-floating div. It will automagically fill up the rest of the width and fit snugly to the border of A.
I am trying to lay out a web application and running into problems with divs stretching outside of body and html.
http://jsfiddle.net/dex3703/Pftpu/
The pink inner div extends outside of its container when set to 100% height. Why is this and how do I fix it?
#header has a height of 55px.
#topnav has a height of 65px.
#mainsection has a height of 90%.
#drawer has a height of 50px.
You're trying to assert that 55px + 65px + 90% + 50px = 100%, but you can't do that. It will be true for some height (where the height of your whole content is 1700px, see below), but not all heights:
55px + 65px + 90% + 50px = 100%
55px + 65px + 50px = 10%
170px = 10%
1700px = 100%
EDIT: You can achieve what you want by using relative/absolute positions appropriately. See the following jsFiddle: http://jsfiddle.net/Pftpu/12/
Note that this will still be greater than 100% because of the borders around the entirety of the page. You can wrap them in another div, but I wanted to show this example by only changing the CSS properties relevant to the main issue you were having.
You're mixing pixels and percentages, that'll never work.
#mainsection has 90%, leaving 10% for #header (65px), #topnav (55px) and #drawer (50px). At a window height of, say 700px, that leaves 70px - which is a whole lot less then 65+55+50=170px.
You'd need a height of exactly 10x170=1700px for your layout to work - or in other words: never mix pixels and percentages...