This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
The div#inner1 and div#inner2 are inside the div#outer, but still the height of div#outer shows as 0px with height:auto.
How do I get the height of the child elements for the outer div?
This is my code:
#outer {
width: 300px;
height: auto;
background: #ccc;
}
#inner1 {
float: left;
width: 100px;
height: 100px;
background: #f00;
}
#inner2 {
float: left;
width: 100px;
height: 100px;
background: #0f0;
}
<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
Add overflow:auto to the div with id outer. This will solve your problem.
Demo
Float the outer div. that will cover your all height, whatever the inner divs holding heights. But if you will provide your inner div float property. then i will suggest you to use the hack clearfix..
/* Assuming this HTML structure:
<div class="clear">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
*/
.clear:before, .clear:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clear:after {
clear: both;
}
try this it will sure work
Related
This question already has answers here:
Using margin:auto to vertically-align a div
(15 answers)
Why don't margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?
(2 answers)
Closed last year.
I think I've got some confusion on how margin auto works. In this case, I'm creating a parent div and a children div inside of it, and both div boxes are given width & height. Then, I tried to use margin auto to make the inner div horizontally & vertically aligned.
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 200px;
height: 200px;
background: red;
}
#child {
width: 50%;
height: 50%;
background: blue;
margin: auto;
}
Result:
Somehow the result was out of my expectation. Anyone knows why?
Just use display: flex
#parent {
width: 200px;
height: 200px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#child {
width: 50%;
height: 50%;
background: blue;
}
<div id="parent">
<div id="child"></div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 5 years ago.
I'm trying to create a div (Menu) with a width of 20% of my screen and a height of 100% but the div does not display on the screen. I do not know why. Here is my code:
#Menu {
display: inline-block;
background-color: black;
min-width: 20%;
min-height: 100%
}
#Bar {
float: right;
background-color: blue;
width: 80%;
height: 100%;
margin: 0;
float: left;
}
<div id="Menu">Menu</div>
<div id="Bar">Bar</div>
Since your div elements are empty, they will collapse to 0 height. A height of 100% does not help in this case.
You will find that you can display your elements if you include a min-height property.
I have made some modifications to get it to work, together with some fine-tuning. I always indent my real code, but I have left the modifications un-indented so that you can see them more easily.
#Menu {
display:inline-block;
background-color : black;
min-width:20%;
min-height:100%;
margin: 0;
min-height:10px;
float: right;
}
#Bar {
float:right;
background-color : blue;
width:80%;
height:100%;
margin:0;
float:left;
min-height: 10px;
}
<div id="Menu">
</div>
<div id="Bar">
</div>
This question already has answers here:
2 column div layout: right column with fixed width, left fluid
(8 answers)
Closed 8 years ago.
I had faced with tricky problem, I need to place two divs in one line (left, right), right must have fixed width, but left must fill free space, in another words: left div must have 100% - X pixels, right div should be X pixels.
Important point: without position relative/absolute hack.
Is there any way to achieve this result. I have tried in many ways but without luck.
here is jsfiddle
Markup
<html>
<head>
<title></title>
</head>
<body>
<style>
.container {
/* container don't matter */
width: 500px;
background-color: bisque;
height: 50px;
}
.container .left {
/* display: inline-block; */
margin-right: 50px;
background-color: burlywood;
height: 50px;
}
.container .right {
float: right;
background-color: chartreuse;
width: 50px;
height: 50px;
}
</style>
<div class="container">
<div class="left">
fill free space (100% - right)
</div>
<div class="right">
fixed width
</div>
</div>
</body>
</html>
You could do it like this:
JSFiddle - DEMO
CSS:
.container {
width: 500px;
background-color: bisque;
height: 50px;
display: table;
}
.container .left {
background-color: burlywood;
height: 50px;
display: table-cell;
width: 100%;
}
.container .right {
background-color: chartreuse;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: text-top;
}
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 8 years ago.
How do I center a div at the middle of my page in html using CSS?
Something like www.google.com, when you go to the site, you will see the search bar and the logo are centered in the middle of the page.
Any way to go around this?
MARKUP
<div class="outer"><div class="inner">your content</div></div>
STYLE
.outer {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
text-align: left;
}
DEMO
<div class = "center_me">Some content</div>
corresponding CSS to center the div would be,
.center_me {
dislay: table;
margin: 0px auto;
}
or,
.center_me {
display: table;
width: 50%;
}
center the div using margin : auto.
Html:
<div id="center"></div>
And css:
#center {
margin : auto;
display : inline-block;
}
Try this;
Html:
<div id="element">your element</div>
css
#element {
width: 200px;
display: block;
margin: 0 auto;
}