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%.
Related
Initially, I want to put words into this circle. Maximum character number is 20.
I want to set font size around 24px and the circle's width and height are 100px;
However, the 2nd word fell outside of the circle.
Can anyone help?
http://codepen.io/yumikohey/pen/ocFtJ
Here is my code.
<div class="blog_circle">
Channel Buzz
</div>
.blog_circle{
width:100px;
height: 100px;
border-radius:50px;
font-size:24px;
color:#000;
line-height:100px;
text-align:center;
background:#45C2B3;
margin-left: 50px;
margin-top: 50px;
}
On the other hand, how to make the font size change depends on user's inputs?
why do you have a line-height:100px? It is too high and that is what is causing it to fall outside the circle......
change it to say 40px........here is the demo
UPDATE:
add display:table-cell; to your style. This will center the text vertically in your div. when you actually inspect element and look at the div, the text is at the center of the div vertically. Updated FIDDLE
your circle is actually a square with width and height of 100px and its corners are trimmed by a distance of 50px giving the visual of a circle.
now you have your words with their font sizes but you also have line-height mentioned as 100px . Now this is like , imagine a page of ruled paper ( the one that has lines to write) line height defines the size between two lines. now in your case the line height is 100px which is the height of your entire box. If you lower the line height to say 50px (which will give you 2 lines to write on inside that 100px height box) it should work.
hope this helps
Try using padding and changing line-height and a few other things. DEMO
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;
Can someone please tell me why 'Security Professionals' on the bottom right won't extend all the way to the right side of the screen? I'm using Eric Meyer's reset. I don't know why there's that padding there.
http://hemakessites.com/mayukh/22/
Edit: You guys are seeing the huge block of space on the bottom right, right? It's not a 3% sliver. I'll try wrapping them in a div, because right now if I set all of them to 25% one of them falls to the next line.
Aside: Oh my god. I just finished a sentence with a semicolon; I've been programming too much;
Update: There's already a div container that stretches 100%. That's what the gray area is. No... this is an evil far worse than we ever imagined. Maybe it's got something to do with the 'Difference' div being fixed?
you can use the box-sizing property for your solution i hope this will work for you
please update your css with mine css
.slagline {
-moz-box-sizing: border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border-color: #FFFFFF #666666 #CCCCCC #CCCCCC;
border-style: solid;
border-width: 1px;
float: left;
height: 100%;
width: 25%;
}
Actually the main thing is you have defined border-width:1px; so its increasing the width of all of your four columns so by box-sizing property you can get your desired results
see the demo if you will remove the box-sizing u will know the difference...
Because you set float: left on them, and as you said you gave them a width of 24%. The padding you experience are the leftover 4%. Make the last one float: right or apply margins/paddings to all boxes.
If you're setting 24% because of border problems, I'd suggest to create e.g a div that wraps your content in your floated blocks. So you can set the width of your current blocks to 25% and they expand accordingly.
<div id="slg4">
Needs to be set to float:right;
This should do the trick:
<div style="width:27%;" class="slagline" id="slg4">
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
I need to make sure that two elements always 100 pixels apart. There are no errors with my code, but for some reason the margin-bottom on the the P tag is set to 50 pixels and the margin-top on a DIV below it is also set to 50 pixels.
Instead of being a total of 100px apart, they are only 50. Can someone explain this? I do not have any floats on the page so it's not due to a clearing issue. All html and css has been validated.
This happens in the latest version of Chrome and FIrefox 3.6.
Here's an example of my code:
#content p {
margin-bottom: 50px;
}
#content #posted {
border-top: 1px dotted #ccc;
line-height: 20px;
margin-top: 50px;
}
Margins overlap on top of each other. The maximum margin of the elements will be the margin between two elements.
If this is not what's happening in IE, it's an IE bug, as this is how CSS was designed to work.
You could use padding instead, or just make sure the margin of both elements is 100px.
Margins do not stack like that. The bottom element only sets a 50px margin from the top element, not the top element's margin. Therefore you need to make the margins 100px.