So, I have a problem, I can't seem to find a solution. I know that this is something ridiculously easy, but I'm still a noob...
Whenever I use command float:left, these 2 .con-icon and #con-info runs across to next div called #test (the one in color dark red). But I need them to stay within #contain borders.
Here's the code: http://jsfiddle.net/3eoj06b3/.
<section id="contain">
<h1>Contain</h1>
<div id="con-info">
<div class="con-icon">
<h2>1</h2>
<h2>1</h2>
<h2>1</h2>
</div>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
<div id="test"></div>
</section>
CSS is in the link
What am I doing wrong?
Add this to your CSS:
#con-info:after {
content: " ";
display: block;
clear: both;
}
Just add overflow:auto; line to your #con-info class. http://jsfiddle.net/garsdubh/. This will make your parent element aware of its floated children heights.
Use overflow: hidden on #con-info. Since you have declared height: auto for #con-info you need to hide the overflow as well to have automatic height.
DEMO
#con-info {
overflow: hidden; /* This is added to your Fiddle */
position:relative;
border:2px solid #C60;
width:40%;
height:auto;
margin-left:10%;
}
Related
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
I was wondering if someone could explain to me why this is happening. Sorry I am new to CSS/HTML. I am working on creating and HTML layout for a basic page, currently I have three Divs. I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.
So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening? I thought that since the space is already taken by my other two divs that I would not have to use the 'top' property in order for the third div to display. Why is it being hidden by the other divs?
Here is my HTML code:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
Here is my CSS code:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
Whenever you do use the float for the element then don't forget to clear them.
For easier I always use overflow:hidden; to the parent div:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
So now, you know the key reason of hiding?
Because the first two divs have set floats so they are taken out from the "normal" flow, while the last remains the same and isn't affected by the previous two.
To be affected you can either set float also to the last element, or clear the float.
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats for more info.
I always create a spacer div and use it whenever I need to clear any previous floats or coding. This is specially useful when I have a ton of divs within a parent div.
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
I'm having a doubt in the basics of the HTML rendering. I'm having the following HTML/CSS.
http://jsfiddle.net/cgZ4C/2/
<style type="text/css">
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
}
.content
{
float:left;
width:196px;
min-height:20px;
background-color:#BABABA;
margin:2px;
}
</style>
<div class="outer">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div>
Why is the outer div not growing when the inner content grows? Even I tried adding some text inside .content divs. But still the .outer div is not growing?
You need to add overflow property to your outer div and assign proper value to it like
overflow:hidden
Find what is the most suitable for your need here
Here is the possible code change you need:
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
overflow:hidden;
}
CLEAR YOUR FLOATS! Always :-)
Add overflow:auto; like in this code: http://jsfiddle.net/cgZ4C/3/
Many CSS frameworks these days use a class clearfix . That has become the de facto standard. Twitter bootstrap uses it as well. What we need to do is just add a class clearfix to the outer div and you'll be done :)
Although Clearing floats is the correct way to go, sometimes, there is another way you can do this:
float your outer div too!!!
.outer {
float: left;
}
This way, the outer will respect the floated children and expand, but you'll need to float the parent div of outer too, and so on, until there is a ancestor div which is cleared/<body> is encountered.
All floats are like bro's so go along with each other much better than non-floated non-cleared divs.
:)
Add attribute overflow: hidden to the .outer style.
It doesn't grow because all of your content within the parent is floated. When an element is floated, it is no longer taken into consideration by the parent when it calculates it's total size. Since every element is floated, as far as the parent is concerned there is no content, so it doesn't resize.
Your code looks like a table so, with display:table (source) the element will behave like a table element.
http://jsfiddle.net/eWwtp/
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
display:table
}
Another solution, that avoid these issues:
But with overflow hidden, more issues can arise where items outside of that div are hidden, or cut off (usually with menus etc).
http://jsfiddle.net/4LqaK/
Add:
<div class="clear"></div>
.clear{clear:both}
Background should shows in all divs but it's not visible.
http://jsfiddle.net/uxUqJ/1/
I need to my backgroud be shows in all divs. Background is defining in styles container div. Etc.
<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
How can I fix this?
I think you need to add overflow:auto; to your css... I've also removed the quotes
#content{
width:1049px;
overflow:auto;
background: #000 url(http://s1.wp.com/wp-content/themes/pub/dark-wood/images/postflowerback.png) ;
}
the Div currently has no height... however what do you want to do with the background regards repeating or position, here's a good reference point https://developer.mozilla.org/en/CSS/background
You must specify height property and set repeating of background.
#content{
width:349px;
height: 700px;
...
}
Alternately, you could add <div style="clear:both;"></div> after the closing for text3. This would then stretch the container divs around the elements even though they are floated.
You have your elements floated. You need to clear the float before closing the wrapper element in order to have the #content to grow normally:
See this working Fiddle Example!
CHANGE YOUR MARKUP TO THIS:
<div id="content">
<div id="text">
<div id="text_1">...</div>
<div id="text_2">...</div>
<div id="text_3">...</div>
<div style="clear:both;"></div> <!-- Add this line -->
</div>
</div>
Additionally, you can remove the inline style and use a class.
Change your css to smart way
<style>#content{ display:table;
width:1049px;
background: url("image_src") ;
}
#text{
display:table-row;
width:1049px;
padding-left:27px;
padding-right:28px;}
#text_1,#text_2,#text_3{ display:table-cell;
padding-left: 40px;
width: 278px;
}#text_3{
padding-right:40px;
}
</style>
Clear the #text div.
add the following styles:
#text {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
#text:after {
content:"";
display:table;
clear: both;
}
DEMO:
http://jsfiddle.net/uxUqJ/13/
I created the following layout:
<div class="title" id="m1">
<div class="chkbx">something</div>
<div class="name">
Dummy #1
</div>
</div>
// .. the div above repeats several times
I'm using the folowing CSS:
div.title { border: 1px black solid; }
div.chkbx {
clear:both;
float:left;
padding:2px;
text-align:right;
width:5%;
}
div.name {
float:left;
width: 50%;
}
and would expect a border around all of class=title, but see only some strange lines at the top. Please let me know what I do wrong.
Many many thanks!
You are probably floating the content. Set overflow: hidden on the container.
http://complexspiral.com/publications/containing-floats/ explains why you get this behaviour
http://www.ejeliot.com/blog/59 lists various ways to avoid it, most of which are better than those described above, and including the overflow approach.
Try adding one more element in .title with clear: both; style.
Your .title elemnt contains only floated elements, and floated elements don't stretch their parent elements, so .title element is rendered as if it were empty.
Here you wrong cause of you missed clear side of DIVs. If you use div with float:left/right, for start new line you must use clear:both with div.
-- JUST ADD ONE DIV WITH CLEAR:BOTH;
<div class="title" id="m1">
<div class="chkbx">something</div>
<div class="name">
Dummy #1
</div>
<div style="clear:both;"></div>
</div>