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;
}
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%;
}
I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.
CSS:
#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}
.circle{width:200px;height:200px;border-radius:100px;
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8);
margin:auto; display:inline-block; vertical-align:middle;
}
Thanks in advance
Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.
Demo
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
CSS
.wrap_me {
width: 33%;
border: 1px solid #f00;
float: left;
}
.wrap_me div {
width: 150px;
height: 150px;
border-radius: 100px;
border: 1px solid #ddd;
margin: auto;
}
You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width
What Mr.Alien said isn't wrong, but
I'm having difficulty keeping them evenly spread apart
If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:
.container {
width: 300px;
height: 100px;
}
.container div {
width: 25%;
height: 100%;
background: blue;
border-radius: 100%;
}
.inner-left {
float: left;
}
.inner-middle {
float: none;
margin: auto;
}
.inner-right{
float: right;
position: relative;
bottom: 100%;
}
See the jsfiddle.
EDIT:
updated fiddle - didn't save...
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
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/
Could you please refer this http://jsfiddle.net/BRWWN/
How can I position the divs in the following order.
The blue div shows in left as a left side menu, the red div comes right of the blue div.
Add float:left; to both:
#a {
width: 25%;
border: thick solid Blue;
height: 200px;
display:inline;
float:left;
}
#b {
width: 25%;
border: thick solid Red;
height: 200px;
display:inline;
float:left;
}
Or change display: inline to display: inline-block for both div's.