I have 2 div(s) that they have been floated to left.(At the left bottom)
I have done the following code for the 2nd div:
#div2
{
float:left;
clear:left;
}
here the clear property forces the 2nd div to go down because div1 is also floated to left.
Is it possible make the 2nd div go upper than div1 when clear property is set?
Thanks
edit(added screenshot):
What you describe is fundamental box-model behavior. Part of the definition of 'clear' is that nodes clear down. There are a variety of strategies (JS, various positioning hacks) for putting things in an order different from how they appear in markup, but the best strategy is to just rearrange your markup.
No, this is not possible, #div2 comes after #div1 so it will always follow it whether vertically or horizontally (when both are floating).
The only solution here is to move #div2 before #div1 in the document, whether in the HTML or by manipulating them with Javascript.
no, It is not possible as has already been explained by previous answers
If you want to switch the divs you can try this fiddle that change the display css property
http://jsfiddle.net/S4975/1/
.div2
{
display: table-header-group;
}
.div1{
display: table-footer-group;
}
html
<div class="div1">A</div>
<div class="div2">B</div>
in this way who has display: table-header-group will render before elements with display: table-footer-group;
refer this
Related
I am confused how to bring two div into same line.
I used float:left and float:right one for each of them and also they are contained as two different div id of a div class. Also used display:inline in class.
Please give any idea regarding this problem.
try float: left for both of them
You can chance the display property to either inline or inline-block.
For example:
<div class="example">One</div><div class="example">Two</div>
With
.example {
display: inline;
}
There are several methods to achieve this, and I've detailed seven of them on a sample page. Tl;dr:
floating the divs (#vladkras' answer)
Using display: inline-block; (#Sohnee's answer)
Using Flexbox: display: flex on the parent
Playing with negative margin to move the second div around
Using display: table on the parent and display: table-cell on the children
Playing around with position: absolute
And, the newest and in many cases best solution, CSS Grid Layout: display: grid on the parent.
A parent div must completely contain the contents to a child div. Due to an odd circumstance, that child div might be wider than the page view itself. Problem being, the parent div seems to always be limited to the page width, no matter what it contains.
http://jsfiddle.net/e5Lkq/1/
contains:
<div class="outer clearfix">
<div class="inner">Oversized content here.</div>
</div>
.inner{
background-color:red;
height:50px;
width:1800px;
}
.outer{
border:5px solid blue;
/* overflow:hidden; */
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
In this example, I need the outer div (with the blue border) to expand around the child's contents.
I've come across this problem before - something about a quirky rendering of the "body" style - but I've been unable to locate similar questions again this time. Setting overflow to hidden for the parent just cuts off the child element. I could always throw in a js to to resize after loading, but I'd rather avoid this. Any thoughts?
Thanks,
Jeremy
PS I see this similar item, but the answer is jquery. This might just have to be the way of it:
https://stackoverflow.com/questions/8360465/expand-parent-div-width-to-fit-children-divs-horzontal-scroll-website
What you want is similar to a shrink-wrap. http://jsfiddle.net/e5Lkq/2/
.outer { display: table }
To get old IE support, you can use inline-block (on a by-default inline element) inside a block container. See this and this (if you're really concerned about support). But I strongly encourage you to drop support (if you can). Is the extra 8% worth the effort? Also note that the percentages are different depending on the site.
floating the parent appears to work:
.outer{
border:5px solid blue;
float:left;
}
see: http://jsfiddle.net/n6WLG/
I have a class defined like this:
<div class="float-left inline">
where:
.inline {
display: inline;
}
.float-left {
float: left;
}
Can someone tell me if I need to use both float: left; and display: inline;. I am bit confused as they both seem to do the same thing.
display:inline means a element may be placed next to other items.
This is different from block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Actually there is no need to use both the properties together, but as you are using two classes having respective properties is fine, let me explain you here, if you use display: inline; ONLY, than first you need to see how inline is it different from float
Inline Elements
Floated Elements
Now, yes, am aware that span are already inline elements, but if you see, when I use float, it makes an inline element behave like an inline-block, it applies margins at top and bottom as well, while display: inline; won't.
Another difference is float is in general different positioning, when you float an element to left or right, it creates an empty space besides, which makes element below it to shift besides that.
Floated Example
While display: inline; won't
Inline Example
See the difference? So it depends on you what suits best to your needs, just make sure you clear your floating elements by using overflow: hidden; or any clearfix available out there else you will see some unexpected behavior of your layout.
Conclusion: Even if you use display: inline;, your element will be a block level element and inline, so there's no need to use display: inline;
With display you are changing the display type of the element.
With float you are setting position for that element.
Here is an answer with practical explanation why would you prefer float for positioning.
Although the two work on different aspects of the element they can be used on conjunction. For example changing an Anchor to display:block and float:left will work and allows you to set a height and width on it.
Taking a div and applying display:inline and floating it wouldn't make much sense no.
Not redundant. Actually, I meet a problem when I set a float: right with an element and it works on chrome not works in IE. Specifically, on IE, the content of element overflows the boundary of the container. So, I use display: inline and float:right together, it works very well on chrome and IE 11.
Probably not the best title I've ever written, but I find it hard to formulate this question well. I'm working on a div that should cover 100% of the parent (could be body). This div should have a variable number of children, so every time the page is refreshed the children count can vary from one to ten, maybe more.
I want these children to all be equally wide and have a percentage width. So if there are five children, each child should have width: 20%. If there are two children, they should have width: 50%. I could do this with JavaScript, but I'd really prefer keeping all layout stuff in the css.
Is there a way to accomplish this without using tables?
Use display: table, display: table-cell, and table-layout: fixed.
See: http://jsfiddle.net/thirtydot/ZKXrM/
table-layout: fixed is to equally distribute the available width between any cells without an assigned width.
This works in all modern browsers. It doesn't work in IE7. If you need this to work in IE7, either use JavaScript to polyfill, or use a real <table>.
CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.container > div {
display: table-cell;
border: 1px dashed red;
}
HTML:
<div class="container">
<div>1</div>
<div>2</div>
..
</div>
You could define something like
div#contains2 div
{
width: 50%;
}
div#contains3 div
{
width: 33%;
}
and so on, then apply the appropriate class to the parent div.
That said, is there a good reason why you're avoiding a table, but trying to recreate how a table works? Sure, it may not be the absolute nicest "sleep-well-at-night" way to make a page, but if the table does the job how you want it doing, and you can't think of anything else that does, go with the table.
The bottom line is that you have essentially 3 options for automatic same-width columns:
Tables, which do it out of the box and will work cross-browser with no major issues
jQuery, which will probably work cross browser, provided the user has JS enabled
CSS like I suggested above, which adds bloat to your CSS file, and fluff to your markup
You can divide the total width (100%) into the number of items (X). So W = 100/X and W=Width.
I have a div under a float:right div. For some reason, the top margin cannot be applied to the first div. here is the css
#over{
width:80%;
float:right;
color:#e68200;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:10px auto; /*does not work!!!*/
width:95px;
height:20px;
}
does anyone know what's going on?
Floated things are kind of floated out of the normal layout, so generally don't affect other things that aren't floated like them. Of course the float behaviour in different browsers differs, but that's the general idea.
After the floated div you'd need something (like an empty div) that will clear the float (has style="clear:both;").
However, like I said, browser behaviour will still vary, on where it then decides the margin should be counted from. There are of course workarounds for that. See this page for more on that.
A solution without extra <div>
What you see, is the problem of collapsing vertical margins in CSS3. This problem will be more easily solved with the advent of CSS4. In the mean time, it is not a good idea to add an extra <div>, as easy as it may sound. It is generally better to keep content and presentation strictly separated.
Here is how I solved this issue on my website. The solution exploits the absence of vertical margin collapse inside inline blocks.
#under should contain at least the following items:
#under {
clear: both;
display: inline-block;
width: 100%;
}
try this css snipe, i think this will solve your problem.
#over{
width:80%;
float:right;
color:#e68200;
background-color:#234fdd;
height:auto;
margin-bottom:30px;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:auto;
width:200px;
height:20px;
background-color:#23ffff;
}