What is wrong with this? Ive read a couple of posts which suggest that in order to have inline-block elements all on the same line with only overflow-x, the following CSS is all that is required on the parent:
div {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
This is my CSS, straight from my firebug for both the parent, and the elements which i need on the same line. The elements are wrapping with only a vertical overflow. Im confused. Any suggestions?
.elementsRequiredOnSameLine {
background: none repeat scroll 0 0 white;
display: inline-block;
float: left;
height: 10em;
text-align: center;
width: 6em;
}
.parent{
display: inline-block;
margin: 10px auto;
min-height: 12em;
overflow-x: scroll;
padding: 10px;
white-space: nowrap;
width: 95%;
}
Using float: left on the elements will cause them to ignore the nowrap rule. Since you are already using display: inline-block, you don't need to float the elements to have them display side-by-side. Just remove float: left
Was because of the float:left;, once i removed that, fine. Spotted it after typing out question sorry.
Related
I'm switching divs from float:left to inline-block and don't know why some of the divs are displacing, like they have some invisible border or something.
Here are with float:left https://jsfiddle.net/f7op4dze/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
float:left;
margin:0 20px;
}
And here with inline-block https://jsfiddle.net/dfdxa5hc/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
display:inline-block;
margin:0 20px;
}
There's a space automatically added with inline elements and this space is applied to inline-block as well.
If there's no whitespace (either a space or a return) between the elements in your markup, the inline-block elements will be rendered without a space.
The easiest way to do this and still retain optimal formatting is using comment tags in between the <div> elements like so:
https://jsfiddle.net/orvn/wd0ynq98/2/
<section>
<div></div><!--
--><div></div><!--
--><div></div><!--
--><div></div>
</section>
As one possible option to fix the problem, set the font-size of the parent to 0.
section { font-size: 0; }
You can restore the font on the child elements:
div { font-size: 16px; }
Demo: https://jsfiddle.net/dfdxa5hc/3/
For an explanation and other possible solutions, see my answer here:
inline-block boxes not fitting in their container
There is (finally) a CSS only solution to this problem
section {
display: table;
word-spacing: -2em;
width: 100%;
}
div {
display: inline-block;
word-spacing: normal;
}
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
I am trying to achieve similar thing as SO with tags.
It looks great, but the problem is that I want to have a maximum width of each tag, so if a the length of the the tag, is too big, it will be truncated.
I can achieve it with:
.label{
width: 50px;
float: left;
overflow: hidden;
}
Ok, it works, but when I do this, my number is not on the same line as label.
How can I achieve the same effect as on the first fiddle, but with maximum width.
This should to do the trick:
.label {
display: inline-block;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
JSFiddle demo.
What I've done here is dropped the float: left and replaced it with display: inline-block. I've then given it an ellipsis text-overflow property to make it look nicer, and set the vertical-align to middle to get it in line with the .multiple element. Oh, and I've replaced width with max-width to stop smaller tags being the same size.
Example Usage
Here is an example with multiple tags (each are on a new line intentionally): JSFiddle.
Obviously you can adjust the max-width accordingly.
You can give
float:left;
to span.multiple as well so the span and label come in the same line.
.multiple{
float:left;
}
You can add line-height to both of them
.label, .multiple {
line-height: 15px;
}
Here is jsFiddle link.
.label{
max-width: 150px;
float: left;
overflow: hidden;
}
I have a need for my links and buttons to look the same, but I've been unable to vertically align the text within an "a" tag in the same manner as the "button" tag. It is important to note that the tags need to be able to handle multiple lines of text (so line-height will not work).
a,button {
display: inline-block;
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
See the jsfiddle below:
http://jsfiddle.net/bZsaw/3/
As you can see, I can get it to work with a combination of a span tag inside and setting "display:table" to the "a" and setting "display:table-cell" and "vertical-align:middle" to the span, but that doesn't work in IE7.
a,button {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
}
a {
display: table;
-moz-box-sizing: border-box;
}
a span, button span {
vertical-align: middle;
text-align: center;
}
a span {
display: table-cell;
}
Looking for a simple CSS only solution.
The only reliable way to I've found align text vertically and allow wrapping of the text if it gets too long is with a 2 container approach.
The outer container should have a line height of at least double that specified for the inner container. In your case, that means the following:
a {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
line-height: 150px;
display: block;
}
a span {
display:inline;
display:inline-table;
display:inline-block;
vertical-align:middle;
line-height: 20px;
*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
Add float left on the a tag if you want everything inline. Here's the updated example with long text in the A tag too..
http://jsfiddle.net/bZsaw/13/
You can set the line height on the span to whatever you like and if it is less than half of the line height of the parent, it will center AND allow text wrapping if your text exceeds the parent container width. This works on all modern browsers as far as I know.
All answers are not updated,and all of them are basically hacks, you should use new CSS3 features, in this case flexbox
a,button {
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
display:flex;/*CSS3*/
align-items:center;/*Vertical align*/
justify-content:center;/*horizontal align*/
border: 1px solid #000;
}
<span>Testing 1,2,3</span>
<button><span>Testing 1,2,3</span></button>
That should work for your problem, note that align-items and justify-content will behave the opposite if set flex-direction:vertical, default is flex-direction:row.
Feel free to use, all browsers support it caniuse.com/#search=flex
Also check out the free and excellent course flexbox.io/ he is the best teacher at this
Also check out css-grid, also new in CSS3
If your text won't be larger than the width of the box you could set the line-height equal to the height of the box.
line-height:150px;
The cleanest and most consistent way I found is this
display: grid;
place-items: center;
https://jsfiddle.net/j8bktum9/
Use line-height:150px; and display-inline:block;
I have got a div id event_container and two div classes inside that div id by the class name create_event_button and search. I want to have a specific background for the event container and then style the classes differently.
Below is the css styling of these elements :-
#event_container{
background: red;
}
#event_container .create_event_button {
margin-left: auto;
margin-right: auto;
display: block;
float: right;
text-align: center;
width: 150px;
color: #1C1C1C;
background: #A9D0F5;
font-size: 150%;
font-weight: bold;
padding: 1em;
}
#event_container .search {
margin-left: auto;
margin-right: auto;
display: block;
float: left;
width: 480px;
background: #A9D0F5;
padding: 1.4em;
}
The inner div stylings are working all right but the #create_event is not giving me a proper background color.
I have been trying to hack around this one but have not got any success yet. It would be great if anyone could answer it.
Thanks,
The outer div contains only two floats, which are allowed to slip out of the parent div, unless you apply some clearfix trick ( there are many solutions: http://www.google.com/search?q=clearfix ), or simply use overflow:hidden; on the parent div to always contain any inner floats:
http://jsfiddle.net/E4J3Q/
the two inside divs are floated, so the outside div (#event_container) would not have a height.
you can append a <div class="clear"></div> and add a css rule like this: .clear {clear:both;}
jsfiddle: http://jsfiddle.net/ym9K9/