lets say I got 20 same divs with float:left property and some width. I want them to be in one line and if they dont fit in screen just to make page scroll horizontally.
fiddle
That's basically how floats work. If you want the described behaviour you can do something else instead, for instance white-space: nowrap; on the container and display: inline-block; instead of float.
http://jsfiddle.net/NPzsV/3/
.container {
white-space: nowrap;
}
.line {
display: inline-block;
width: 200px;
vertical-align: top;
white-space: normal;
}
One thing to note though: with this approach, newlines/spaces/tabs between the divs will cause a space between them in the rendering.
Use display: inline-block instead of float: left on the divs, and add the property white-space: nowrap to their parent container.
Demo: http://jsbin.com/akiniv/1/edit
Demo with your fiddle ;) http://jsfiddle.net/NPzsV/4/
set the height to the parent div, and add the property overflow:scroll
<div class="parentDiv">
<div class="line">ddd</div>
<div class="line">ddd</div>
<div class="line">ddd</div>
...
</div>
and css:
.parentDiv{height:50px; overflow: scroll;}
Set a hard width on the parent element:
body{ width:8000px; }
Demo
Related
Buttons have a magic property where you can use margin: auto on them without setting a width. I'd like to be able to do this with a div. Is it possible?
div, button {
background-color: #FFA;
display: block;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
They do this by having a sort of magic internal sizing function which makes them only as big as their text:
Why doesn't "display: block" & "width: auto" stretch a button to fill the container?
I would like to know if I can make a div do this, without wrapping it in any containers (I know flex box around it would work).
Can I make a div shrink to text-width like a button, while still being display block, without necessitating a specific container?
EDIT: inline-block will not work for my use case.
Simply set a width on the <div> of fit-content:
div,
button {
background-color: #FFA;
display: block;
margin: auto
}
div {
width: fit-content;
text-align: center;
}
<div>Center me</div>
<button>I Center Magically</button>
Use display:table and you will have better support than fit-content (it doesn't work on Firefox, Edge and IE)
div,
button {
background-color: #FFA;
display: table;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
buttons will have inline-size:fit-content by default.
width:fit-content dose the same effect.
I have an answer on another question, where you can find spec ref.
I know how to vertical align the text by reducing the height of inner div and assigning it absolute positioning with top,bottom,left,right= 0,margin:auto properties
I also know display:flex layout but it also does not work properly.
problem is display:table and vertical-align does not work properly with bootstrap classes. My div is simple i assigned it proper height , my inner div has reduced height so it should vertically align but it does not. I used bootstrap. I do not want to use absolute position to center it. Any idea?
<div class="col-sm-3" style="height:65px;display:table;vertical-align:middle;">
<div style="display:table-cell;vertical-align:middle">abcabcabc</div>
</div>
When you are using bootstrap, vertical align is done with "display: inline block"
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
You can check here - http://plnkr.co/edit/vPKRjAf4wgtzJ7VVdOPN?p=preview
what about using line-height? if line-hight is equal to its hight the text is centered vertically
#test {
width: 100%;
height: 100px;
background-color: green;
line-height: 100px;
font-size: 32px;
text-align: center;
}
<div id="test">
Test Text
</div>
Hope this helps
Problem was with my div , i set its dimensions upon removing stuff, things worked out. Thanks.
Ok, I've got a problem out there. To be short, here's a fiddle. I'll repeat myself here:
HTML:
<div class="container">
<div class="selected">
<span>Why don't you cover all the width!?</span>
</div>
<div>
<span>Little content</span>
</div>
</div>
CSS:
.container {
width: 100px;
white-space: nowrap;
background-color: #0f0;
overflow-x: auto;
height: 200px;
}
.selected {
background-color: #f00;
white-space: nowrap;
}
The first question is: why does not the inner div's background cover the entire span?
The second one: I'd like to have a fix, of course.
And one more thing: the html elements are generated by a third-party tool, to which I have no access, which makes "wrapping it all in another div" thing impossible. Only CSS, only hardcore!
UPDATE:
By the way, the container is itself resizable (a frame inside a frameset to be precise).
EDIT:
I've updated the fiddle in order to provide more info. The problem is, that when the second div will be selected, I'd like the red background to stretch to the width of the longest line.
UPDATE 2:
The above described problem can be solved with display: table-row; (see here). The tricky thing is to make this work even if content is less wide than the container itself (a fiddle).
Divs have width:auto by default. So the inner div is 100px wide, like the outer one. The span overflows out of the div.
In this particular case, the easiest solution is to give the inner div display:inline-block
div div {display:inline-block}
so that it no longer fits itself in its parent, but it moulds itself to the width of its contents.
Updated fiddle.
Edit: to answer your second question: yes, the display:inline-block stops the selected div from being as wide as the container.
Fortunately, that can be corrected by adding
min-width:100%;
in addition to the display:inline-block. See more updated fiddle.
Another edit:
And the question keeps changing. Now it's about frames in a frameset. Oh well.
Here is the latest fiddle that solves the problem as formulated now. But let's see what changes the future has in store...
I think you just need to apply the background color to the span instead of the div.
http://jsfiddle.net/M294p/8/
HTML:
<div class="container">
<div class="selected">
<span>Why don't you cover all the width!?</span>
</div>
<div>
<span>Little content</span>
</div>
</div>
CSS:
.container {
width: 100px;
white-space: nowrap;
background-color: #0f0;
overflow-x: auto;
height: 200px;
}
.selected {
background-color: #f00;
white-space: nowrap;
display:inline-block;
}
The answer to your first question is because you have explicit width to the parent div. You can apply display: inline-block to inner div and remove the width: 100px from the parent.
HTML
<div>
<div class="test">
<span>Why don't you cover all the width!?</span>
</div>
</div>
CSS
.test {
background: red;
display: inline-block;
}
An example : http://jsfiddle.net/M294p/6/
This has probably been done before but I can't find a solution for my specific case. I have the following:
<div class="holder" style="height:260px;width:260px;">
<img src="image.jpg" />
</div>
How can I get the image to align into the middle of the div?
Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image.
You can prevent this with
img{
display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}
This removes the reserved space underneath the image.
you can change the alignment by
img{
vertical-align: [top|middle|bottom|baseline|...] ;
}
to align it according to your text.
In general, you can only vertical-align inline elements. So an image with display:block won't be affected by a vertical alignment declaration.
Add
text-align: center;
vertical-align: middle;
display: table-cell;
to the div's style.
Try :
.img
{
display: block;
margin-left: auto;
margin-right: auto
}
If this is your mark up then you can use line-height property for this. Like this:
.holder{
line-height:260px;
}
As I have an element with a percentage height I can't use the line-height hack. Does anyone have any ideas on how to solve this?
<div height="100%">
I want to be vertically aligned in the middle
</div>
Here's what you want: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html
You have to set the height value of div, then set line-height: value_of_div_height. line-height 100% won't work because it will take value of text, not div element. It works with or without vertical-align, as long as height=line-height
div {
height: 200px;
line-height: 200px;
display: block;
}
Alternative method if you want to do with a paragraph inside a div element: http://www.w3.org/Style/Examples/007/center
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
If you set the font-size, and you know the number of lines of text you have.
You can wrap the text in a span. And use the following CSS on the span.
span {
font-size:20px;
margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
position: relative;
top: 50%;
}