I want to align horizontal DIVS inside parent div #main and hide horizontal scroll
I tried to make such: http://jsfiddle.net/Ty9kg/30/
<div id="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
#main {
border:1px solid black;
width:250px;
height:150px;
overflow-y:hidden;
overflow-x:scroll;
}
#main div {
width:165px;
height:120px;
display:inline-block;
float:left;
background:#ccc;
border:1px solid #ccc
}
Do you want the following?
#main {
border:1px solid black;
width:250px;
height:150px;
overflow-y:hidden;
overflow-x:scroll;
white-space: nowrap;
}
#main div {
width:165px;
height:120px;
display:inline-block;
background:#ccc;
border:1px solid #ccc;
white-space: normal;
}
If so, float was redundant in your code.
I think you want this:
http://jsfiddle.net/umQ32/
html:
<div id="mainContainer">
<div id="main">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
css:
#mainContainer{
width:300px;
height:120px;
overflow-x:scroll;
}
#main{
width:1200px;
height:100px;
background-color:blue;
}
.child{
width:200px;
height:100px;
margin:0 5px 0 0;
float:left;
background-color:red;
}
If i understand correctly, you want the grey boxes to be next to each other in a row? Currently you've given your main div a width of 250px and the inside divs a width of 165px. For obvious reasons they won't fit.
try this:
#main {
border:1px solid black;
overflow-y:visible;
width:990px;
}
#main div {
width:165px;
height:120px;
display:inline-block;
background:#ccc;
margin-right:-4px;
padding:0;
}
http://jsfiddle.net/Ty9kg/32/
Related
I am trying to place two divs on same line.
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>
css
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
}
it place itself in same line when I use vertical-align:top in the second-box. But why it behave like that? Thanks
http://codepen.io/rajinirajadev/pen/xgBVab
add this line in your second-box's css:
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
vertical-align: top; // add this line
}
Short and Sweet
My solution is very simple; I use less CSS, and the secret of aligning both DIV is to simply add display: inline-flex; to your #page DIV.
Below is the full code:
HTML
<div id="page">
<div id="first-box">
This is the first box
</div>
<div id="second-box">
this is second box
</div>
</div>
CSS
body{
background:grey;
color:white;
}
#page{
padding:20px;
display: inline-flex;
display: -webkit-inline-flex; /* Safari */
}
#first-box, #second-box{
width:200px;
height:150px;
border: 1px solid black;
padding:10px
}
#second-box{
border: 1px solid green;
}
Click HERE for a working CODEPEN
[UPDATE: 09/13/2020] IF YOU WANT TO USE CSS-GRID RATHER THAN INLINE-FLEX
#page2{
padding:20px;
display: grid;
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr) ) ;
}
#first-new-box, #second-new-box{
height:150px;
border: 1px solid black;
padding:10px
}
#second-new-box{
border: 1px solid green;
}
<div id="page2">
<div id="first-new-box">
This is the first new box
</div>
<div id="second-new-box">
this is the second new box
</div>
</div>
Try this code
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
float: left;
}
live demo - http://codepen.io/anon/pen/YNgqRN
while adding contents to the first block also it works fine
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
}
<div id="page">
<div id="first-box">
this is first box
</div><div id="second-box">
this is second box
</div>
</div>
Try this ..
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
border:1px solid green;
float:left;
}
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>
Change display:table-cell to each id & add vertical-align:top for text to display at top but it is not important for box alignment. And you are done. Remove any floats.
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:table-cell;
border:1px groove black;
vertical-align:top;
}
div#second-box{
display:table-cell;
width:200px;
height:200px;
border:1px solid green;
vertical-align:top;
}
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>
Replace Your css with below code:
Added Float:left, Position:relative, and Margin and it will not disturb you in further coding also.
div #page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div #first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
/* extra added 3 lines */
position: relative;
float:left;
margin:10px;
}
div #second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
/* extra added 3 lines */
position: relative;
float:left;
margin:10px;
}
<div id="page">
<div id="first-box">
<br clear="all">
</div>
<div id="second-box">
this is second box
</div>
just replace ur code with this one
There is a little white gap on the downside of mainBox, what is it and which cause it?
body {
margin: 0px;
padding: 0px;
}
div {
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
}
#wrapper {
width: 900px;
margin: 0px auto;
}
#header {
width: 100%;
height: 100px;
background: red;
}
#container {
width: 100%;
height: 100px;
background: black;
}
#mainBox {
width: 75%;
height: 150px;
background: blue;
float: left;
}
#sideBox {
width: 25%;
height: 100px;
background: yellow;
float: left;
}
#footer {
clear: both;
width: 100%;
height: 50px;
background: white;
}
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
Add border: none to #container
body{
margin:0px;
padding:0px;}
div{
border:1px solid black;
box-sizing:border-box;
font-size:30px;}
#wrapper{
width:900px;
margin:0px auto;}
#header{
width:100%;
height:100px;
background:red;}
#container{
border: none; /**** Add this extra line ****/
width:100%;
height:100px;
background:black;}
#mainBox{
width:75%;
height:150px;
background:blue;
float:left;
}
#sideBox{
width:25%;
height:100px;
background:yellow;
float:left;
}
#footer{
clear:both;
width:100%;
height:50px;
background:white;
}
<body>
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
You have a white gap here because your blue div (#mainBox) is 150px, which is taller than its container div (#container), set at 100px. This has caused the #mainBox div to extend outside the container with a slight offset at the leftmost side due to the black border applied to the div.
There are a number of ways to correct this gap, such as removing the border or the hardcoded height values.
It is because #sideBox have 100px height and #mainBox have 150px height. Make both same solve your issue.
Here i set #sideBox to height:150px;
And you have given parent container #container to height:100px and child to height:150px.
Edit:
I think i misunderstood your issue before. But as i say above. Your parent height is small then your child. Make it proper solve your issue.
body{
margin:0px;
padding:0px;}
div{
border:1px solid black;
box-sizing:border-box;
font-size:30px;}
#wrapper{
width:900px;
margin:0px auto;}
#header{
width:100%;
height:100px;
background:red;}
#container{
width:100%;
height:150px;
background:black;}
#mainBox{
width:75%;
height:150px;
background:blue;
float:left;
}
#sideBox{
width:25%;
height:100px;
background:yellow;
float:left;
}
#footer{
clear:both;
width:100%;
height:50px;
background:white;
}
<body>
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
I have a layout where I have 3 columns.
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
How can I place these 3 blocks in one line without JS, calc and flexbox if I need:
logo should be fixed
user-name should have auto width
search-input should places on the left free space between logo and user-name blocks. It has to be fluid container.
Use flexbox:
#wrapper {
display: flex;
/* flex-direction: row; <-- by default */
}
#logo {
flex: 0 0 200px;
background-color: lightgreen;
}
#user-name {
flex: none;
background-color: lightblue;
}
#search-input {
flex: 1 0 auto;
background-color: lightgrey;
}
<div id="wrapper">
<div id="logo">logo</div>
<div id="search-input">input</div>
<div id="user-name">user name</div>
</div>
May be this is what you want. you can add content of user-name to see how it work.
.wraper{
width: 100%;
border: 1px solid red;
}
#logo{
float:left;
width:250px;
height: 50px;
border:1px solid #CCC;
display:block;
background-color:yellow;
}
#search-input{
margin-left:260px;
min-height:50px;
display:block;
background-color:red;
}
#user-name{
float:right;
display:block;
height:50px;
background-color:#FFF;
}
#search-input > .inner{
height:50px;
background-color:red;
margin-right:20px;
}
#user-name > .inner{
background-color:green;
min-width:150px;
height:50px;
margin-left:10px;
}
<div id="wrapper">
<div id="logo">Logo</div>
<div id="user-name">
<div class="inner">
user name
</div>
</div>
<div id="search-input">
<div class="inner">
search input
</div>
</div>
</div>
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
<style>
#logo{float:left;padding:2px}
#search-input{width:50%;float:left;padding:2px}
#user-name{width:auto;float:left;padding:2px}
</style>
#wrapper{
display:block;
}
#logo{
display:inline-block;
width:30%;
float:left;
}
#search-input{
width:50%;
display:inline-block;
float:left;
}
#user-name{
width:auto;
display:inline-block;
float:left;
}
This will keep them in one line.
I am able to make a horizontally scrolling div using the following:
CSS
.scroll {
width:100%;
height:100px;
overflow-x:auto;
white-space:nowrap;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
HTML
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
However, once this is nested inside a div with display:table, the .scroll div no longer scrolls and instead stretches the .scroll div to show all of the boxes.
Pretty sure there's an easy fix for this, any ideas?
For reference: http://jsbin.com/makigome/29/edit?html,css,output
Try this CSS, hope it helps
.table {
display: block;
width:100%;
}
.table-cell {
display:block;
width:100%;
}
.scroll {
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
Is not possible using table and table cell, you can do it using float like this:
.table {
float:left;
width:100%;
}
.table-cell {
float:left;
width:100%;
}
.scroll {
clear:both;
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
For anyone interested, I fixed this by setting position:absolute to the .scroll div and wrapping it within another div with position:relative like so:
http://jsbin.com/makigome/39/edit?html,css,output
<div class="table">
<div class="table-cell">
<div class="scroll-wrapper">
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</div>
.table {
display:table;
width:100%;
}
.table-cell {
display:table-cell;
width:100%;
}
.scroll-wrapper {
height:100px;
position:relative;
}
.scroll {
height:100%;
width:100%;
overflow-x:auto;
white-space:nowrap;
position:absolute;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
My center div goes out of its container, how can it take the remaining space between left and right?
Left and right have to be fully visibles, but the contents on center can be overflow hidden
** jsFiddle **
HTML
<div id=container>
<div id=left>
<div>first element</div>
<div>second element</div>
<div>third element</div>
</div>
<div id=right>right frame variable width</div>
<div id=center>
<div>first element</div>
<div>second element</div>
<div>third element</div>
</div>
</div>
CSS
html,body{margin:0;}
*{box-sizing:border-box;}
#container {
height:30px;
white-space:nowrap;
background-color:lightgreen;
}
#left {
float:left;
border:4px solid black;
height:100%;
}
#left *{
border:2px solid blue;
display:inline-block;
height:100%;
}
#center {
float:left;
border:4px solid black;
display:inline-block;
overflow:hidden;
height:100%;
}
#center *{
border:2px solid red;
display:inline-block;
height:100%;
}
#right {
float:right;
border:4px solid black;
height:100%;
}
Just remove the float:left and display:inline-block from the #center element..
Demo at http://jsfiddle.net/Z2x8e/8/