If you have two divs contained within a div:
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;">
<div style="float:left;background-color:red;width:20px;height:20px;">
</div>
The two inner divs are rendered as 'invisible', as in the container div doesn't stretch to allow them to fill, as if they were not there. This creates ugly overlaps/whitespace etc.
How do you go about resolving this issue?
Insert the third div:
<div style="clear:both;"></div>
I think it may be because you are forgetting to close the tags, try this:
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>
Try to add the <br style="clear:both"/>, (or clear left) it is a common method to give life to floated elements within a container
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>
Parent elements are never to expand to contain floated children. While IE<8 does do this, that's a long standing bug (one of millions) in that inept browser. The best solutions are to float the parent, set the height/width, or use overflow:auto in the CSS.
The outer div isn't floated, so unless you explicitly set a height it won't display in this case (other than the border). Either set height of outer div to 20px or float it.
Is there a reason why you aren't/can't put any content in the divs? They overlap / are displayed invisible since there is no content.
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>
Will show the two divs next to eachother (Tested IE6, Chrome 3, Firefox 3.5, IE7)
Related
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
While dealing with html code in one of my project I faced one problem in which I have taken one main div as a container,inside which I have taken one sub div in the left position,second one in the right position and third one following in the next row.
Till now my code is running very perfectly as u can see in my code.But i want my third div exactly bottom of my first div of which height is less then my second div.
So,I just want to know that is their any other property in html or css except using "margin-top" property in my third div, by which I can make it possible.
To make it more clear I have given one example below.
I will be more then happy if any one will even bother my question and suggest me anything.Thank you in advance.
<div style="width:500px;">
<div style="width:150px;height:50px;background-color:black;float:left; color:white;">
1st div
</div>
<div style="width:100px;height:100px;background-color:#0CF;float:right;">
2nd div
</div>
<div style="clear:both"></div>
<div style="width:50px;height:50px;background-color:#F00;float:left;">
3rd div
</div>
</div>
You need to start by removing the <div> with clear:both; - this is pushing your third div beneath the other two.
Then add clear:left; to the third div. This causes it to clear any items floated left while ignoring those floated right.
<div style="width:500px;">
<div style="width:150px;height:50px;background-color:black;float:left; color:white;">
1st div
</div>
<div style="width:100px;height:100px;background-color:#0CF;float:right;">
2nd div
</div>
<div style="width:50px;height:50px;background-color:#F00;float:left;clear:left;">
3rd div
</div>
See JSFiddle
You may also want to look at this question on SO, which covers float And clear in more detail.
I am not quite sure what you want exactly, but this is what i understood of it.
Try running this snippet:
<div style="width:500px;">
<div style="width:150px;height:50px;background-color:black;float:left; color:white;">
1st div
</div>
<div style="width:100px;height:100px;background-color:#0CF;float:right;">
2nd div
</div>
<div style="clear:both"></div>
<div style="width:50px;height:50px;background-color:#F00;float:left;position:relative;top:-40px;">
3rd div
</div>
</div>
I just added
position:relative;
top:-40px;
That -40 px means it moves 40 pixels towards the direction "top". That makes that object go up. But if you typed in there 40px instead of -40 it will go 40 pixels away from "top" making it go down :)
Hope this helps you :)
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
I have a two column layout that has 'tiles' within the columns. These tiles are floating divs as well. The desired result is a very tabular layout without using tables.... Like so:
Question: Why in the linked fiddle is my first tile being rendered outside of my container divs?
<div class="column1"></div>
<div class="column2"> <!-- I am floating next to column1 -->
<div class="tile-container">
<div class="tile1"></div>
<div class="tile2"></div> <!-- I am floating next to tile1 within column2 -->
</div>
</div>
FIDDLE
How about http://jsfiddle.net/KtDhX/8/
I've added a #wrapper around your divs and gave it a 1000px width.
I've floated your second column left and your first right and floated both the tiles left so they won't leave their container.
Also try looking into display: inline-block to avoid the sometimes buggy behaviour of float and enables you to remove the position: relative.
My issue was solved by applying float:left to all container div's and tiles div's. This is per CSS 2.1 Specs.
I want to horizontally align div elements within a container div element avoiding line break between the child elements.
But, when one of the child div element has width:100% style as in the following:
<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
<div style="display:inline-block;background-color:yellow;">1</div>
<div style="display:inline-block;background-color:green;width:100%;">2</div>
<div style="display:inline-block;background-color:yellow;">3</div>
</div>
that element is placed by itself on a new line like this:
How can I avoid line breaks under any circumstances? When the sum of the child elements' width is greater than that of the parent's width, I want that part of the element to be cut off (hidden). I tried it using overflow-x:hidden as above, but it did not work.
Do you mean that you want all of the elements to push outside the parent when their sum is greater than the parent? If so, try adding this to the parent:
{ white-space:nowrap; }
View on JSFiddle
This works because the children are set to be inline-block elements, so they're treated like text. Chris Coyier has a good explanation (with pretty diagrams) of all things white-space here, which you might find interesting.
You can try this instead of inline-block use table-cell:
<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
<div style="display:table-cell;background-color:yellow;">1</div>
<div style="display:table-cell;background-color:green;">2</div>
<div style="display:table-cell;background-color:yellow;">3</div>
</div>
result:
full display property list
One way to do it is to use another DIv but use px widths rather than percentage as using 100% as a width is NEVER going to work afaik.
<div style="float:left;overflow:hidden;background-color:blue;width:300px;">
<div style="width:3000px; overflow:auto;">
<div style="display:inline-block;background-color:yellow;width:100px">1</div>
<div style="display:inline-block;background-color:green;width:300px;">2</div>
<div style="display:inline-block;background-color:yellow;width:100px;">3</div>
</div>
</div>