Why is float:left CSS property breaking styling?
<div id="application_header">
<div>logo</div>
<div><h5>tagline</h5></div>
</div>
#application_header > div is preventing #application_header background property from being applied because of: float:left?
.clear { clear:both; }
.push { clear: both; height: 20px;}
#application_header { display:block; background-color: #000; }
#application_header > div { float: left; }
#application_header only accepts background-color: #000; property if float:left is removed... Explanation please...?
div#application_header has no height because the elements contained within it are floated.
I made a fiddle that demonstrates adding a height to the div:
div#application_header {
height: 100px;
display:block;
background-color: #000;
color: #fff
}
http://jsfiddle.net/YGkw7/
Rather than floating your elements you could set them to inline-block
http://jsfiddle.net/YGkw7/2/
The reason your background color is not showing up, is because the #application_header collapses to zero height and width as it only contains floating child elements. You'll want to look into a clear fix solution to have your parent div wrap around the floating child elements.
You can find more info on clear fix solutions at What methods of ‘clearfix’ can I use?
Related
I have the following problem: I am creating an inline-block element (.content) within a wrapper-div (.wrapper). If there is content in the .content-div, everything works just fine. But if I remove the content from the .content-div, a space gets added below the inline-block-div.
I am not sure why this happens and how to fix it correctly. Note that after manually removing all spaces and line-breaks in my code the problem persists, but setting the font-size to 0 helps.
Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.
Whats the best way of fixing it? Why does this happen?
Fiddle: https://jsfiddle.net/cjqvcvL3/1/
<p>Works fine:</p>
<div class="wrapper">
<div class="content">not empty</div>
</div>
<p>Not so much:</p>
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper {
background-color: red;
margin-bottom: 20px;
/* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}
.content {
display: inline-block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this would fix it, but why? */
}
Update
I have put together a new fiddle. This should better illustrate my problem. How do I get rid of the green line below the textarea?
https://jsfiddle.net/cjqvcvL3/7/
<div class="content"><textarea>Some
Content</textarea></div>
.content {
display: inline-block;
background-color: green;
}
This happens because you specifically give width and height to the .content.
Have you considered using the :empty pseudo selector?
.content:empty {
display: none;
}
https://jsfiddle.net/cjqvcvL3/5/
Setting your the content display to block instead of inline-block fixes the problem.
.content {
display: block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this fixes it */
}
This explains why setting vertical-align to top fixes the problem as well:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Here is a working example: jsfiddle
To remove the gap, you have to surround the content div with a wrapper with font-size:0.
The reason is exained here: answer
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.
.wrapper2 {
background-color: red;
margin-bottom: 20px;
font-size:0;
}
My webpage has a footer with 4 separate footer cols. They are separated by a 5px margin on the right and left side. They also have a green background. The Footer (containing element) has a red background but does not appear. I validated the HTML and could not find a problem with XHTML markup so I'm assuming it's a CSS woe.
Fiddle:
http://jsfiddle.net/48dk6/
Footer CSS declarations.
/* footer and descendants */
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
}
/* footer col styling/positioning */
.footerCol {
background-color:green;
width:180px;
float:left;
margin:10px 5px 10px 5px;
}
Add overflow:auto to your #footer CSS:
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
overflow:auto;
}
jsFiddle example
This will restore the behavior you seek, which is caused by the children .footerCol divs being floated. Floating those child divs removes them from the normal flow, so the parent behaves as if there is nothing for it to contain.
Add overflow: auto; to #footer.
When you float items inside a block element you often want to use overflow: auto or else the enclosing element gets whacky and won't show up unless you specify a height and width (which you usually don't want to do)
#footer {
font-size: 1.3em;
margin-top: 10px;
clear: both;
background-color: red;
overflow: auto;
}
In fact, you should have a height set for your footer, see jsFiddle
height:240px;
JSFiddle:
http://jsfiddle.net/48dk6/6/
Remove the floating and simply display the elements as inline-blocks
.footerCol {
background-color:green;
width:180px;
display: inline-block;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
The containing floats problem can be solved with 2 approaches:
Adding something with clear after the floats (the most common solution is clearfix with clearing pseudo element).
Making the container create new Block Formatting context. The most popular ways are setting to the container overflow:hidden/auto, display:table, display:inline-block (+ width, if necessary), or floating the container itself.
All approaches have their advantages and limitations, so choose what fits better in your case.
There is a proposal to add min-height:contain-floats value to solve this, but it isn't supported by browsers yet.
I need to set a margin to the top of an element. The text must be within the element and have a top margin of N pixels.
Here is what I want to achieve:
Fiddle: http://jsfiddle.net/GRQNh/
CSS:
body {
height: 960px;
}
.breadcrumbs {
position: relative;
background-color: #eee;
height: 10%;
}
.name {
color: #000;
margin-top: 50px;
}
Thanks.
DEMO or you may be try with padding-top instead margin-top as follows
.name {
display:block;
color: #000;
padding-top: 50px;
}
Since .breadcrumbs has position: relative, set position: absolute; to .name.
JSFiddle
You need to add display: inline-block; to get the margin to work.
For instance,
.name {
color: #000;
margin-top: 50px;
display: inline-block;
}
Hope this helps.
For it to work you will need to make the element behave like a block element. A block element can have, for instance, margins or paddings.
However, you will want to keep it from being displayed like an actual block element, so you will want to keep its visual displacement the same (that is, inline).
Luckily, there is a css value for display which does exactly what you need:
display: inline-block;
Add this to the span (which is inilne by default) and it will behave like a block element while it will still look like an inline element.
You can also give up on margins at all and use padding-top: 50px.
in this case, you must specify the parent ELEMENT position relative and absolute position subsidiary and specify top: 0;
the <span> is an inline element. That means you cant apply margin or padding to it.
For the solution to your problem you have -at least- two options.
1.Change the container of your text to a block element, like <div>
so:
<span class="name">Name</span>
will become
<div class="name">Name</div>
2.Change the behavior of your span by making it a block or inline-block element with this css:
.name {
display:inline-block
/* rest of your css */
These two articles will give you a good idea of what is inline and block
http://www.impressivewebs.com/difference-block-inline-css/
http://css-tricks.com/almanac/properties/d/display/
So I'm having a problem with the last paragraph apparently not clearing and slipping into the middle of the h1 and nav. But when I put a div with a clear:both property before the paragraph it appears to work.
Bear with my fiddle, please.
I used a purple background to represent the image replacement technique that I learned from nettuts.
The clearfix part is a class named "group", the CSS is at the bottom.
Also if I remove the display:block; from h1 > a the layout breaks so a follow up question is, what elements should I float and where should I apply the clearfix.
The problem you are seeing arises because the clearing element is in the wrong place.
Consider your CSS:
h1 {
margin: 0;
float: left;
background: red;
text-indent: -9999px;
border: 1px dashed cyan;
}
nav {
height: 44px;
margin: 0;
float: right;
background: black;
border: 1px dashed cyan;
}
.group:after {
content:"x";
display:table;
clear:both;
background-color: cyan;
}
You have h1 floated left and nav floated right, and then you have your p block with your text (not floated).
The p content wraps around the two floated elements as expected unless you add the clear:both rule to p as pointed out earlier.
The clearing element has to appear in the DOM after the nav element.
In this example, you apply .group to nav, which generates content that appears after the ul block that is a child of the nav block.
The problem becomes more obvious is you set the nav height to auto and you add some borders and colors to show the edges of the various blocks.
See demo at: http://jsfiddle.net/audetwebdesign/9nGQy/
The problem can be seen as follows:
I added an x to mark the spot in your generated content for the clearing element, which appears within the nav block.
Try:
p{
clear:both;
}
It should work for you depending what the outcome is you are after.
I'm trying to figure on how use to :after and :before CSS properly and will be applying the styles to this:
The objective here is to fit the fixed width and height of box inside of the parent box (not sure if I said that correctly).
The box inside is going past or overflowing.
How do I set the parent box to adjust no matter how big the child box is? The child box I'm mentioning here is the dark grey box.
<div class="connections-label">
<div class="connections-avatar"></div>
<h3>Christian Blanquera</h3>
<h4>Invested over 5 million cookies in 20 startups</h4>
</div>
.connections-label a
{
color:#1c89cc;
text-decoration:none
}
.connections-label h4
{
color:#686868;
font-style:italic;
}
.connections-avatar
{
width:50px;
height:50px;
float:left;
background-color:grey;
margin-right:10px
}
.connections-label:after
{
content:"";
}
You're looking for a CSS clearfix solution. Basically, floated elements are removed from the normal flow of the document, and must be contained. The simplest clearfix is to apply overflow: hidden; to the element containing the floated element:
.connections-label {
overflow: hidden; }
This is usually sufficient for most float containment scenarios. However, positioned elements and overflowing content will also be clipped by this CSS. A more complex clearfix will contain floated elements without hiding positioned elements is documented at the article above:
.connections-label:before,
.connections-label:after {
content: '';
display: table; }
.connections-label:after {
clear: both; }
/* IE6/7 support */
.connections-label {
display: inline-block; }
.connections-label {
display: block; }
Also, another trick I learned recently is that applying overflow: hidden; to an element on the left or right of a floated element keeps that element from wrapping below the floated element. It's easier to see than describe, so check out my jsFiddle demo.