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
Related
I am working on this project, the url is grouporigin.com//clients/upload/WAHA_Capital1/index.html If you see the bottom section in the home page, the div boxes with the background images are behaving differently than the div boxes without a background image. They are also not covering the full height. What css changes I need to do, to make the divs with the background image behave in exactly the same way, as the div boxes without a background image.
as you are not providing any html i try by inspect element.. and you make comman mistake. while using bootstrap grid system you need to wrap every element in th form of <div class="row"> as you can see in pic the 3 div with class name "form-field" is not wrap around row class div
wrap these div around row like
<div class="row">
<div class="col-sm-12">
<div class="form-field">..</div>
do this for every row and give appropriate col-sm-* class
I was creating a simple html with a header and logo in it. Im doing this for email templates, so all are inline styles. I noticed there is a float break happening and the image is overflowing its parent.
<div style="width:640px;">
<!-- header -->
<div id="header" style="background-color:#005387; height:160px;">
<div id="logo-container" style="margin-top:20px;margin-left:20px;">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw">
</div>
</div>
</div>
http://jsfiddle.net/HMswX/8/
Any idea why this is happening? When I add overflow:hidden to #header elem, it works fine. But Im not floating any element within that, then why is there a float break?
EDIT:
Okey, I wasnt clear enough. Updated the code. I want to add margin-top to #logo-container. But when I do that, the whole div comes down, as if the #header is not within the normal flow(which I meant by float-break which usually happens when we float elements inside a parent).
Why not just specify a height on the img?
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw" height="60px">
http://jsfiddle.net/HMswX/2/
Otherwise just don't spcify a height on the header..
http://jsfiddle.net/HMswX/3/
Based on your update..
The margin isn't working because the div is collapsing.. look at this:
Float the div.. http://jsfiddle.net/HMswX/10/
Apply overflow:auto.. http://jsfiddle.net/HMswX/12/
If you want to read more on collapsing divs see this post same issue..
Why does this CSS margin-top style not work?
JoshC has the right answer to your question about why this is happening.
For the desired effect why not simply add a padding to the parent div?
<div id="header" style="background-color:#005387; padding:20px">
<div id="logo-container">
http://jsfiddle.net/HMswX/13/
This saves you from having to set an explicit height.
Because you have defined in the div with id=header:
height:60px;
Do you want the image to scale down or what is your desired result?
I'm not sure what you mean by float break, but you specify a height in your #header which is smaller than the height of your image. Thus, by default, it will overflow. If you specify overflow:hidden, it will be cut off. Why not remove the height and specify overflow:auto in your #header? Alternative reduce the size of your image by giving it a height, too.
See jsFiddle 1 and jsFiddle 2.
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 have following code:
<div>
<div id="dynamic" style="float:left;height:50px;background-color:#aaa;">
floated block which will be dynamically increase
</div>
<div id="static" style="height:50px;background-color:#FC3;">
Hello guys
</div>
</div>
I want to move static div as dynamic div width changes. Above code works as I want but I don't know whether the above way is the right to do that?
Is floated div inside inline text the right way? Is that cross-browser?
Will this code affect anything else, like the content below it or moving below static div?
And why does floated div not move below inline content, rather aligns it with inline text?
You can use float:left for the <div id="static"> too. I don't see any issues until your dynamic div width + static div width reach the window width.
This >> http://jsfiddle.net/gxpBL/ is what I'm telling.
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>