This is what I want http://jsfiddle.net/QsLMh/9/
HTML:
<div class="container">
<div class="header">
</div>
<div class="filter">
</div>
<div class="body">
<div class="data">
</div>
<div class="data">
</div>
<div class="data">
</div>
<br style="clear:both">
</div>
CSS:
.container{
margin:5px;
height:300px;
border: 1px solid blue;
overflow: hidden;
}
.header{
margin:5px;
height:100px;
border: 1px solid green;
}
.filter{
margin:5px;
height:100px;
border: 1px solid red;
}
.body{
margin:5px;
border: 1px solid black;
overflow-y: scroll;
overflow-x:hidden;
height:100%;
max-height: 70px;
}
.data{
margin: 10px;
height:50px;
float:left;
width:100%;
border: 1px solid pink;
}
As you can see if you click on filter div the body div doesn't automatically resize. I can do this with JavaScript but I wonder if it's possible to do so using the only CSS?
Related
#myDiv {
display: inline-block;
border:1px solid red;
width:200px;
}
#myImg {
max-height:100%;
max-width:100%;
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
I want to fit the image height to its container div.
Using height:100%; works only when the container have a fixed height.
Simply add display:flex to container to get the stretch alignment by default:
#myDiv {
display: inline-flex;
border:1px solid red;
width:200px;
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
A different result with display:grid:
#myDiv {
display: inline-grid;
grid-auto-flow:column; /* column flow */
justify-content: flex-start; /* align everything to left */
border:1px solid red;
width:200px;
}
#myImg {
height:100%; /* image 100% height of the div */
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv" style="height:50px">
</div>
</div>
Here the another way without using flex: I will recommend that display:flex; will be the good and easy one.
#myDiv {
display: inline-block;
border: 1px solid red;
width: 200px;
position: relative;
padding-left: 22px;
}
#myImg {
position: absolute;
left: 0;
height: 100%;
}
#anotherDiv {
display: inline-block;
border: 1px solid blue;
height: 100px;
width: 50px;
}
<div id="myDiv">
<img src="https://i.imgur.com/rw9ypWD.png" id="myImg" />
<div id="anotherDiv"></div>
</div>
I am creating a html layout with a sidebar. But my header and content are appearing underneath my sidebar instead of next to it.
.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
position:relative;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
Thanks
Add "display: inline-block;" to the elements that you want to display next to each other.
Just add
#sidebar {
float:left;
}
.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
position:relative;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
float:left;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
I have introduced .inner-container and defined two flexboxes. CSS is simplified.
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.inner-container {
display: flex;
flex-flow: column;
width: 80%;
}
#sidebar {
width: 20%;
background: gray;
}
#header {
border: 1px solid black;
height: 300px;
padding: 10px;
}
#content {
border: 1px solid black;
padding: 10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div class="inner-container">
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
</div>
you should just try editing the
position: fixed
this will solve your problem.
You should try to change your position: relative; to position: absolute;. You can then adjust the position of your divs using a margin.
.container {
position:relative;
padding:10px;
top:0px;
right: 0;
left: 0;
height: 1200px;
}
#sidebar {
position:absolute;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
margin-top:-10px;
}
#content {
border:1px solid #000;
height:700px;
margin-left: 200px;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
Working fiddle: https://jsfiddle.net/khs8j3gu/2/
Good luck!
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
I've the web page like the below layout.
The content of css file is following.
#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}
.child{
border:10px solid black;
display:inline-block;
margin:0px;
}
.parent{
border:10px solid #f00;
display:table;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
The html content is following.
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
I've gotten the rendering result as following.
why do I have white gap in the layout?
I've not added any white color gap in the div tag.
Please help me.
Thanks.
that is happened because you set parent display property to table and child display property to inline-block . just remove display:inline-block; property of your div.child ,it works fine.I'm added the snippet below.
#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}
.child{
border:10px solid black;
/*display:inline-block;*/
margin:0px;
}
.parent{
border:10px solid #f00;
display:table;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
Fighting the Space Between Inline Block Elements ,The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, you can simply fix this font-size:0 property ,
check the reference site https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.parent {
font-size:0;
}
see the attached snippet
#green {
border: 20px solid #3D3;
float: left;
display: block;
}
#orange {
width: 100px;
height: 100px;
border: 10px solid orange;
float: left;
}
.child {
border: 10px solid black;
display: inline-block;
margin: 0px;
}
.parent {
border: 10px solid #f00;
display: table;
padding: 0px;
margin: 0px;
font-size:0;
}
.clear {
clear: both;
}
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
#All:
I want to create a responsive structure of two divs which in turn contain two divs each as shown in the fig below.
Once the same turns responsive the structure should appear like:
Please guide me in achieving the same.
you can try something like this
<body>
<div class="container">
<div class="big">
<div class="small"></div>
<div class="small"></div>
</div>
<div class="big">
<div class="small"></div>
<div class="small"></div>
</div>
</div>
and the style
.container{
width:600px;
margin: 0 auto;
}
.big{
width: 250px;
height: 250px;
border: 2px solid #000;
float: left;
margin: 20px;
}
.small{
width: 100px;
height: 100px;
float: left;
margin: 0 auto;
border: 2px solid red;
}
#media(max-width:597px)
{
.container{
width: 300px;
}
}
There are many ways of doing this. One of the simplest is to use display: inline-block. The content will then automatically wrap to fit the width of your browser. Try running this snippet, click "Full page", and resize your browser.
div {
display:inline-block;
border:3px solid black;
width:300px;
height:150px;
padding:4px;
margin: 0 0 10px;
}
div div {
border-color: red;
width:134px;
height:136px;
}
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
try this HTML
<div id="conatiner">
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
</div>
<div id="div2">
<div id="div21"></div>
<div id="div22"></div>
</div>
</div>
and the css is
#div1, #div2 {
width:45%;
min-width:200px;
margin:1%;
float:left;
border: 1px solid black;
}
#div11, #div12, #div21, #div22 {
display:inline-block;
width:45%;
min-width:50px; // this width should 1/4th of the min-width of div1 and div2
margin:1%;
height:100px;
border: 1px solid black;
}
here js fiddle http://jsfiddle.net/90knutoc/9/