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.
Related
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;
}
My float div contain just text and i want to align it vertically at the middle
HTML:
<div>CC</div>
I try this
div {
height: 100px;
border: 1px solid;
float: left; /* this element is necessary for my big other code so i have to keep it */
vertical-align: middle;
}
But it didn't work, how can i fix it ? here's a FIDDLE
You can use display:table-cell; to accomplish this. Like so:
HTML:
<div id="container">
<div class="content">CC</div>
</div>
CSS:
#container {
height:100px;
width:100%;
border:1px solid;
display:table;
}
.content {
text-align:center;
display:table-cell;
vertical-align:middle;
}
Updated Fiddle
Use display: table-cell and vertical-align: middle :)
div {
height: 100px;
border: 1px solid;
vertical-align: middle;
display:table-cell;
}
Fiddle
If you have a single word or a short line of text, you could simply use the following CSS:
div {
height: 100px;
line-height: 100px;
vertical-align: middle;
float: left;
border: 1px solid blue;
}
Set the line-height to be the same as the height and then apply vertical-align: middle, works well if you have a single line of text.
See demo at: http://jsfiddle.net/audetwebdesign/2En98/
You can use text-align property instead of vertical-align then use "center" as value;
Simply as follows:
div {
text-align: center;
}
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
when i want to float a child div to left or right inside the centered parent div, the whole design goes left or right, depending on the float. So, how to float a child div and make the centered parent div in the center.
HTML:
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS:
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: left;
width: 300px;
}
#child-right{
float: right;
width: 300px;
}
Why does parent div go left/right, and doesn't stay in center? And how to make it to stay in center?
See the demo
#parent{
padding: 0px, auto;
width: 605px;
height:200px;
border:solid 1px #f00;
}
#child-left{
float: left;
width: 300px;
height:200px;
border:solid 1px #0F0;
}
#child-right{
float: right;
width: 300px;
height:200px;
border:solid 1px #00F;
}
For parent div you use this css code
margin:0 auto;
width:980px;
and for child u use this code for float
float:right or left;
width:anypx;
best regards
To center the parent element, use margin: 0 auto;
#parent{
margin: 0 auto;
width: 600px;
}
There are also lots of spelling mistakes in your code (chile not child), and missing > symbols, fix them before you continue
A working JSFiddle (Click me)
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/