#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/
Related
I am trying to achieve this layout.
left column fixed size
right column fluid, it may have x number of elements inside, for example up to 4 divs 50px wide (this is done dynamically) so it must be max 200px wide, or if it has 3 such elements, then it must be 150px wide...
center column fluid, takes all the rest space
The closest I have comes is this:
#container {
overflow:hidden;
width: 100%;
}
#leftcol {
border: 1px solid #0f0;
float: left;
width: 80px;
}
#rightcol {
border: 1px solid #0f0;
float: right;
}
#centercol {
border: 1px solid #000;
margin-left: 80px;
}
.box{
width:50px;
height:20px;
background:red;
float:left;
}
<div id="container">
<div id="leftcol">
fixed 80px
</div>
<div id="rightcol">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div id="centercol">
fluid center
</div>
</div>
but center fluid is not correct width.
I can change some html if it will be easier to achieve desired effect.
You can do it with the Flexbox:
body {margin: 0}
#container {
display: flex; /* displays flex-items (children) inline */
overflow: hidden;
}
#leftcol {
border: 1px solid #0f0;
width: 80px;
}
#centercol {
flex: 1; /* takes the remaining horizontal space */
border: 1px solid #000;
}
#rightcol {
display: flex;
border: 1px solid #0f0;
max-width: 200px; /* adjust to your needs */
}
.box {
width: 50px;
height: 20px;
background: red;
}
<div id="container">
<div id="leftcol">
fixed 80px
</div>
<div id="centercol">
fluid center
</div>
<div id="rightcol">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
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>
EDITED:
I have the following HTML code:
<div class="div-table">
<div class="div-table-row">
<div class="div-table-first-col">
<div>11:00</div>
</div>
<div class="div-table-col">
<div style="height: 11"></div>
<div class="appuntamentoContainer">
<div class="appuntamento" style="height: 25px">11:12 - 12:35</div> //--> need to stretch to bottom
</div>
</div>
<div class="div-table-col">
<div style="height: 0"></div>
<div class="appuntamento">11:00 - 11:45</div>
<div class="appuntamento">11:00 - 12:00</div>
<div class="appuntamento">11:45 - 12:30</div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
</div>
</div>
and CSS:
.div-table div.appuntamento {
background-color: #f3f2de;
padding: 3px 5px;
border: 1px solid #d7dde6;
border-radius: 5px;
}
.div-table {
display:table;
width:auto;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
height: 45px;
}
.div-table-col {
float:left;/*fix for buggy browsers*/
display:table-column;
width:154px;
}
.div-table-row .div-table-col{
border-left: 1px solid #d7dde6;
border-right: 1px solid #d7dde6;
border-top: 1px solid #d7dde6;
min-height: 44px;
}
.div-table-first-col {
float:left;/*fix for buggy browsers*/
display:table-column;
text-align: right;
width: 45px;
}
.div-table-first-col div{
padding: 3px 5px;
}
Here the fiddler
Notice the vertical borders. On the left side how it actually is, on the right side how it should. How do i stretch the div to the bottom?
Use the flexbox layout model. Just add display: flex; to .div-table-row, and remove any float or display property.
Here's the JSFiddle.
add height: 100% on parents table and td.
table {
height: 100%;
}
td {
height: 100%;
}
for reference look here: Make div stretch to fit td height
Check this out for some dynamic behaviour:
jQuery
var a=$(".second").outerHeight();
$(".first").height(a);
$(".third").height(a);
https://jsfiddle.net/1cejh0dL/6/
i tried some codes but, no works anything.
would like make this with css, thanks =)
this code i tried, but doesn't work.
#left{
float:left;
width:65%;
overflow:hidden;
}
#right{
overflow:hidden;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
i don{t know why this doesnt work.
A simple solution with no floats:
#main {
width: 200px; /* adjust as needed */
font-size: 0;
}
div div {
display: inline-block;
height: 60px; /* adjust as needed */
width: 100%;
box-shadow: inset 0 0 4px #000; /* cosmetics only */
background: #eee; /* cosmetics only */
}
div.h {
width: 50%;
}
<div id="main">
<div class="h"></div>
<div class="h"></div>
<div></div>
</div>
Note: using font-size: 0 for the container div to avoid the actual whitespace in the markup - can be avoided by removing spaces between elements, of course: <div>content here...</div><div>other one...</div>
Add float:left; to #right, then it should work. Note that you could also use float:right; to #right, then #right would be on the right side. Using float: left; for both displays both divs next to each other without any gap.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Try this script, I wrote it on JSfiddle:
http://jsfiddle.net/xb5vvpzn/1/
HTML
<div class="main">
<div class="top"> </div>
<div class="bottom1"> </div>
<div class="bottom2"> </div>
</div>
CSS
html, body {
padding:0;
margin:0;
}
.main {
width:400px;
border:1px solid #000;
height:400px;
padding:10px;
}
.main div {
display:inline-block;
}
.top {
width:396px;
border: 1px solid #cc0000;
height:100px;
}
.bottom1, .bottom2 {
margin-top:10px;
border: 1px solid #cc0000;
width:195px;
height:100px;
}
Here's a jsFiddle that I've quickly created for you. The layout is same as what you had requested and it's responsive as well.
HTML:
<div id="container">
<div id="onetwo">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
</div>
CSS:
#container {
width: 100%;
border: 3px solid blue;
padding: 1% 1%;
text-align: center;
}
#onetwo {
display: block;
width: 100%;
}
#one, #two {
width: 49%;
border: 3px solid red;
height: 50px;
display: inline-block;
}
#three {
width: 100%;
border: 3px solid red;
height: 50px;
}
#media (max-width: 820px) {
#one, #two {
width: 46%;
}
}
#media (max-width: 240px) {
#one, #two {
width: 40%;
}
}
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?