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.
Related
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
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.
I have a peculiar issue with CSS -- the 'VPS Plans' div and 'Features' div should be floated together and line up at the bottom. Unfortunately, unless I adjust the size of the Features div to 460px, it kicks down to the next line and I can't figure it out.
The page can be seen here.
Thanks!
Everything is looks good, you need to add display: inline-table; for below CSS.
The element will displayed as an inline-level table
ul.vt li.vt-line-header {
display: inline-table; //----Add this to your CSS
}
Hope you understand.
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407
http://jsfiddle.net/XKL6E/
How can I centre these images so they form a pyramid (overlapping each other halfway)?
If you don't care to support IE7, you can use display: inline-block instead of float: left and just center the whole chunk: http://jsfiddle.net/XKL6E/16/
Add display:inline-block to .empty-button, and text-align:center to .button_row:
http://jsfiddle.net/XKL6E/14/
If you change all of the buttons to span elements instead of div, you can apply the display: inline-block to them.
Credit to #Blender for the inline-block idea and the original version of this fiddle.
http://jsfiddle.net/XKL6E/21/
Edit:
I forgot to mention, the difference between inline-block on a div and a span element is IE7 support. Articles like this one give all sorts of hacky ways to make this work. In the case of div elements, substituting span is good enough.
Using fixed width divs and centring them automatically with
margin-left: auto;
margin-right: auto;
The fixed width is dependant on the width of the images. If the image width is always the same, which I assume in your case is, you can multiply the width by an integer ( use jQuery .css(attr,value) selector ).