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*
Related
This is my first question so I'll try my best to get my point across as coherently as I can.
Lets assume something like:
<div id="parent">
<div id="child1">shot text</div>
<div id="child2">very long text</div>
</div
What I'm asking is is there a way to "link/lock" #child2 width to #child1's width or #parent's so that #child2 never exceeds #child1's width.
Is there anyway, using only CSS, I can force #child2 (or #parent) to have the same width as #child1, without fixing #parent's and #child1's width?
The point is that I want to be able to edit the contents on the fly (like translations) of both #child1 and #child2 but as #child2 will always have more words it will always be wider.
PS: Don't forget, using only CSS, no JavaScript.
Edit: Done a fiddle https://jsfiddle.net/ricardojcmarques/seckdugj/5/
Basically what I need is the green box to be the same width as the orange box, without giving the orange box (nor the brown) any width. Using the width the browser needed to render it correctly.
So just Improvised on your suggestion, the key here is to set
#parent{
background: brown;
position: absolute;
left: 0;
height: 0;
margin: 0;
padding: 0;
}
Heres is a working JSfiddle
DEMO
A little bit of a hack but it might work.
<div id="parent">
<div id="child1">short text that will expand and expand
<div id="child2">very long text that will remain within the confines of child1
</div>
</div>
</div>
#parent {
position:absolute;
background-color:green;
padding:5px;
padding-bottom:0;
}
#child1 {
position:relative;
background-color:#fff;
}
#child2 {
position:absolute;
border:5px solid green;
border-top:none;
margin-left:-5px;
margin-right:-5px;
}
EDIT
Have a look at this one, it's a little closer to yours but I have to modify the list in order to nest child2. I don't know if you have a specific style you need to set to the parent div but if you do it will take some more thought.
Demo2
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}
I have the following layout: nested DIVs, the outer having 100% width and the inner having some fixed width. The inner one is centered using margin:auto.
Now I need to set different backgrounds to the DIVs. Say, the inner should be red and the remaining part of the outer should be green. The problem is that the backgrounds need to be semitransparent (using PNG or CSS3's rgba()). So, the background of the inner DIV does not look red, it becomes brown! Here is my code:
<div id="outer">
<div id="inner"></div>
</div>
and the CSS
#outer{width:100%;height:50px;background:rgba(0,255,0,0.5)}
#inner{width:800px;height:50px;margin:auto;background:rgba(255,0,0,0.5)}
I've tried to use 3 floated DIVs inside the #outer. But I can't set width for the other 2 DIVs to make the #inner to be in the center of the screen. width:auto doesn't work as well.
I know such layout is possible with tables; more precisely with elements that have display:table-cell. So when I add another "outer" DIV, I get the result I need (3 "levels" are required for table-like layout: table, row, cell). CSS:
#outer2{display:table;width:100%}
#outer{height:50px;display:table-row}
#inner{width:800px;height:50px;background:rgba(255,0,0,0.5)}
#left, #right, #inner{display:table-cell}
#left, #right {background:rgba(0,255,0,0.5)}
and the ugly HTML:
<div id="outer2">
<div id="outer">
<div id="left"></div>
<div id="inner"></div>
<div id="right"></div>
</div>
</div>
Is there any other way to put 3 DIVs in a row with such "balance"? Or, maybe, there is a completely different way to solve the original issue? I mean, the problem appeared only because of the transparency! :)
I don't like the solution with display:table, because I've added 3 additional DIVs... Also, please don't suggest any solutions using JS.
If you're feeling edgy and don't mind losing a horizontal scrollbar...
HTML
<section></section>
CSS
body { overflow-x:hidden; }
section {
width:500px;
height:50px;
margin:0 auto;
position:relative;
background:rgba(255,0,0,0.5);
}
section:before, section:after {
top:0;
bottom:0;
content:"";
width:9999px;
position:absolute;
background:rgba(0,255,0,0.5);
}
section:after { left: 100%; }
section:before { right: 100%; }
Demo: http://jsfiddle.net/6STug
Hat-tip, CSS-Tricks
Why don't you use a single background png image on the #outer? The image could contain the semitransparent red then the semitransparent green and again the semitransparent red.
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )
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>