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>
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>
In my site layout I'm using a negative margin to move my left column up next to my banner so it overlaps. The problem is I don't know what the banner's height will be in the final version. At first I used position:absolute on the left column, but that won't work because it needs to be part of the layout and push down the footer if necessary. I'd like to know how to position the left column to the top of the page, because then I could set a top margin the same height as the header since that won't change height. I could figure this out with javascript but I'd like to avoid that and use pure css.
https://jsfiddle.net/z77fwaj7/1/
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
Is this Ok.
<style type="text/css">
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:0px;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
</style>
<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>
If anyone is curious I had to change my layout in order to get it working without javascript. BackgroundBanner won't change height when Banner shrinks, but in my case that doesn't matter since it will be out of view anyway.
https://jsfiddle.net/z77fwaj7/4/
css:
#Header
{
background-color: gray;
height: 50px;
}
#Background
{
position:absolute;
width:100%;
z-index:-1;
}
#BackgroundBanner
{
height: 50px;
background-color:orange;
}
#Banner
{
float:left;
background-color: orange;
height: 50px;
width:75%;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
html:
<div id="Header">header</div>
<div id="Background">
<div id="BackgroundBanner"></div>
</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="Banner">banner</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
As a conclusion:
Using a value of an element on another element in css is not possible. (as far as i know)
So there are two solutions:
Change the layout.
Use javascript.
I would prefer the second. Don't know why it's such a shame to do so.
A short simple javascript is better then mess up the layout. (In my opinion)
#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/
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%;
}
}