I read this artical http://css-tricks.com/implied-block/.
I test it in my own chrome browser, yes, using float style generate the display:block style.
As I known display:block means that the element becomes the block-level element, and it occupies the whole line. Next element should starts in a new line.
But I test the float property. Although it generate the display:block, the next element(also float) is still in the same line. So what's the matter with it?
<style type="text/css">
span
{
width: 30px;
margin: 0 10px;
background-color: Red;
float:left;
}
</style>
<body>
<span>222</span><span>323</span><span>dd</span>
You need to clear the float in order for the "floated" element to break to the next line. You can replace the span element with a div and you will see the same effect.
You can try this blog, this might help you to understand more about float
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
If you just want each of the spans to occupy a new line then give them each:
span { display:block; }
And remove:
span { float:left; }
A div would also accomplish this without css.
Related
I'm working on a grid and I am trying to figure out how to make two divs, which are display:inline-block match each other in height. Is this possible using just CSS?
For example see this JS Fiddle here. The green area I would like to be 100% of it's container, so that it matches the left container.
http://jsfiddle.net/franhaselden/kqtLkkz6/
The divs use the following grid CSS:
.grid {
vertical-align:top;
font-size:0;
box-sizing:border-box;
display:inline-block;
font-size:0%;
}
.grid.golden-small {
width:61.8%;
}
.grid.golden-large {
width:38.2%;
}
I tried explicitly stating the height of the parent container, by doing height:auto so that it would fit to the content inside it, but this didn't seem to work. See my second example here:
section {
height:auto; /* and added this */
}
.featured-post .featured-text {
height:100%; /* added this */
}
http://jsfiddle.net/franhaselden/kqtLkkz6/1/
If I where you I would make a table instead. inline positioning is very difficult to use. I would try remake it by making a parent element that contains all the elements you want to stack inline to display:table; and the child elements to display:table-cell; play around with it is my advice
Take a look at this.
Set the display of your parent element to table, .featured-post {display: table;} and the display of the child elements to table-cell, .grid {display: table-cell;} I guess this is the easiest solution (you can check here) It will work at least that you set position:absolute but I don't think that's your case.
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
I have the following code:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
right:50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
from http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_right
If I change the style of h1 to:
h1
{
position:absolute;
right:50px;
}
then both the h1 and img overlaps.
Now I didn't mention the top position for img or h1. So in the first case when h1 didn't have any style, the img left h1 alone and occupy the next available space after the h1 and was aligned to the right side (50 px apart). But when I mentioned h1 to be 50px apart (with absolute positioning), both the img and h1 overlapped. Now as I didn't mention the top position then why is not img leaving h1 alone and follow it (instead of overlapping it)? I understand that we are using absolute positioning which leaves top position ambiguously specified so why is it automatically assuming that the img has to occupy the top:0 position? If h1 occupies top:0 position then it is fine because it is the first element. But img should respect the space of h1.
Thanks in advance for help.
This is because position:absolute removes the element from the flow of the document - they don't stack anymore because they are position absolutely.
I think a better way to do this would be:
h1, img{
float:right;
margin-right:50px;
clear:both;
}
jsfiddle: http://jsfiddle.net/R7bXZ/
Even better way for you:
Just give the h1 text-align:right;.
jsfiddle: http://jsfiddle.net/KvMLb/2/
yeah, you could also just change the top tag in the css like so:
img
{
position:absolute;
right:50px;
top:100px;
}
h1
{
position:absolute;
right:50px;
top:75px;
}
The reason that img is occupying the top: 0 position is because, by specifying h1 as position: absolute, you're taking it out of the page flow. img attempts to calculate it's position and doesn't see the h1 there. There's not a great way around this using only position: absolute although this JSFiddle might work for you.
Read here on absolute positioning: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
When using absolute positioning, the element you apply it to, in lamens terms, becomes disconnected from the page and teh rest of the elements. It is essentially making that element behave on its own with 0 influence from other. From what I have read you want position:absolute img to detect where the h1 is and avoid it. This is simply not possible using position:absolute, it is in itself designed to NOT do that.
How do you want these to actually appear so I can assist in achieving that without using position: absolute?
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
Is there a way to do this with CSS?
Thank you
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
I give all my green child divs a complete margin:
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
You can do the following:
Assuming your container div has a class "yellow".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Note2: The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
Add margin to your div style
margin:0 10px 10px 0;
http://www.w3schools.com/css/css_margin.asp
I'm late to the party but... I've had a similar situation come up and I discovered padding-right (and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area inside the inner div so there's no need to add a negative margin on the parent as you did with a margin.
padding-right: 10px;
This did the trick for me!
Is it not just a case of applying an appropriate class to each div?
For example:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
A litte late answer.
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.
I have a span with several other spans inside it, and I want to toggle the sub-spans between display:block and display:inline. The spans start off with display:inline-block, then are switched to display:block. This works fine. The problem is when toggling back in Webkit (it works fine in Firefox): the spans are rendered with extra line breaks in between them.
Can I make this render correctly without putting <br/> tags between the spans?
demo here: http://jsbin.com/omalu3/4/edit
Any other solution would be a workaround since it's a browser bug.
An alternative to derekerdmann's solution:
#a.multiline * { width: 100% }
#a.oneline * { width: auto }
#a * { border:solid 1px black; display:inline-block }
Another workaround would be to not wrap the children spans with another span -- which is an inline element. Use a <div> for #a and it behaves correctly (in Webkit at least!).
On another note, the star selector is not really efficient, although I understand this is only an example so I'm not going to criticise that here :D
Now isn't that fun.
I'm not sure what's causing the problem, but it goes away if you add float: left; to #a.oneline *. When you do that, you could change the display to block so your styles look like this:
#a.multiline * { }
#a.oneline * { float:left; }
#a * { border:solid 1px black; display:block;}
The only difference between this solution and your original layout is that the oneline blocks will be aligned at the top instead of the bottom, but you could set a fixed height for those elements.