Let's say I have random children in my div, which has fixed height and width set to 100% to breathe with the layout.
Which CSS must I use to force child elements to align horizontally and when the div's width is smaller then the content, display a scrollbar and not overlap one another?
Fiddle:http://jsfiddle.net/GRBc6/1/
simple css:
.parent{
width:500px;
height: 50px;
background-color: red;
}
.kid{
width: 150px;
height: 20px;
background-color: green;
float:left;
margin-left:4px;
}
if you make the kid an inline-block element and take off the float:left, you can make the parent have white-space:nowrap and it will achieve what you want:
.parent{
width:300px;
height: 50px;
background-color: red;
white-space:nowrap;
overflow-x:scroll;
}
.kid{
width: 150px;
height: 20px;
background-color: green;
display:inline-block;
margin-left:4px;
}
http://jsfiddle.net/GRBc6/6/
You need to add 2 properties to .parent: overflow-x:scroll and white-space:nowrap, and change the float property of kids to display: inline-block. Here's working code:
.parent{
width:500px;
height: 50px;
background-color: red;
overflow-x: scroll;
white-space: nowrap;
}
.kid{
width: 150px;
height: 20px;
background-color: green;
margin-left:4px;
display: inline-block;
}
or otherwise you could just use table with a single row, tr → td
So it won't let the elements inside it wrap
Related
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
see fiddle here
As I gradually resize the window from the right to left:
red right box shrinks its width smaller and smaller ... ok
2nd green item goes under the 1st green item ... ok
red right box and 2 inner green item goes under the blue left box ... not ok
I want the red right box to stay there with rest of behaviour unchanged.
Tried so many things, like block: inline-block, min-width, white-space: nowrap, none worked.
Please help!
(And could anyone explain why the red box wraps when there still so much space on the right side?)
Thanks!!!
display: table for the parent and display: table-cell; for the children is what you are after.
Have a fiddle!
Remove the floats on .left and .right (leave the float on your green boxes)
Add display: table to .wrapper
Add display: table-cell; to your .left and .right
Add vertical-align:top; to your "table cells" so content is not vertically centred
CSS
html {
width:100%;
height:100%;
}
body {
padding: 0px;
margin: 0px;
width:100%;
height:100%;
}
.wrapper {
width: 100%;
height:100%;
display: table;
}
.left {
width: 25%;
min-width:100px;
height: 100%;
margin:0px;
border: 1px solid blue;
display: table-cell;
vertical-align:top;
}
.right {
display: table-cell;
vertical-align:top;
width: 70%;
height: 100%;
border: 1px solid red;
}
.item {
width:100px;
height:100px;
margin:20px;
float: left;
border:1px solid green;
}
I have two divs here: http://jsfiddle.net/TXSfN/
CSS CODES:
#div1{
background-color: red;
display: inline-block;
width: 50%
}
#div2{
background-color: blue;
width: 20%
display: inline-block;
height: 263px;
float: right;
}
I'm trying to set the two divs in the same line also after zoom-in/zoom-out in browser(CTRL +/CTRL -).
The problem isn't with setting the two divs in the same line, it's with the zoom-in/out, when I zoom-in/out the div with the long content get's longer and longer with the height and the one with the short content stay as it is.
Is there a way to set the two divs in the same row for every action(zoom-in/out).
I have updated your Fiddle: http://jsfiddle.net/TXSfN/2/
Set a max-height to the 2 divs, and overflow-y: auto the first div to keep the height the same and not have the content force it to become larger.
CSS
#div1{
background-color: red;
display: inline-block;
height: 250px;
overflow-y: auto;
max-height: 250px;
width: 50%
}
#div2{
background-color: blue;
width: 20%
display: inline-block;
height: 250px;
max-height: 250px;
float: right;
}
I need create element, that cover whole page except 20px margin on all sides. I try this and it works in webkit browsers and Firefox, but Internet Explorer (10) and Opera have problem with this :-( . Any idea how to solve this?
HTML
<div id="first">
<div id="second">
Hello world!
</div>
</div>
CSS
head, body
{
width: 100%;
height: 100%;
}
body
{
position: absolute;
margin: 0;
background-color: blue;
display: table;
}
#first
{
display: table-cell;
height: 100%;
width: 100%;
padding: 20px;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
I'd suggest:
#first {
display: table-cell;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
Which will position the element 20px away from each of the sides. However I'd suggest not using display: table-cell; since that requires a parent element to have display: table-row which itself then requires a parent element with display: table.
Also, it looks like you're trying to emulate table-based layouts, if you could list the overall problem you're trying to solve you may get better/more useful answers.
Try a solution like this:
http://jsfiddle.net/cyHmD/
Never use position:absolute and display:table on body - leave those properties as they are since body is your base from where you build the rest of the site - at most use position:relative on body tag. box-sizing changes how the browser box model is calculated - for example instead of calculating 100% width + 20% padding + 20% border = 140% it calculates as 100% width + 20% padding + 20% border = 100%.
This solution will work from IE7 on including IE7.
head, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background-color: blue;
}
#first
{
position:absolute;
width:100%;
height:100%;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
How about this? Simply replace required margin with border:
#first
{
display: table-cell;
height: 100%;
width: 100%;
border: 20px solid blue;
background-color: white;
}
Please Check out the fiddle on http://jsfiddle.net/Qu63T/1/
What I want is The green div to float next to the blue one. and the .block divs to appear as a grid. I don't want to remove the .m div and float the .blocks inside the container. What Can be done without specifying width of .m
No JavaScript Only CSS Solution
You can add a a wrapper div, after .m and before .block and set his width:
<div class="m">
<div class="wrapper">
<div class="block">
(...)
</div>
</div>
</div>
Style:
.wrapper{
width:100px;
}
Or you can add some padding in .m, so the blocks will line-break. But that's a wierd solution.
as i understand your question that you want floated div's work like block div's
your
CSS:
.
block{
border: 1px solid white;
float: left;
display: inline-block;
clear:left;
}
check this http://jsfiddle.net/sandeep/Qu63T/6/
Your best solution in this case would be to assume that "m" isnt floating, its just a padded div sitting inside a bigger container, and the blue div is living absolutely positioned, like this:
.c{
background-color: red;
display: block;
position: relative;
overflow: hidden;
}
.l{
background-color: blue;
height: 40px;
width: 120px;
display: inline-block;
position: absolute;
left: 0;
right:0;
}
.m{
display: block;
position: relative;
margin-left: 125px;
}
.block{
border: 1px solid white;
float: left;
display: inline-block;
background-color: green;
}
http://jsfiddle.net/Qu63T/7/