This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
In this case, the wrapper's height is calculated as zero. However, i wonder how it is sorted without wrapping all the items.
Html code is:
<!doctype html>
<html>
<head>
<style>
.wrapper {
width: 660px;
margin-left: auto;
margin-right: auto;
}
.item {
float: left;
width: 200px;
background-color: orange;
height: 200px;
margin-right: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
Thx, everyone.
What I'm curious about, I think align in this way is to put it in a frame. By the way, I thought that I put it in a frame that had a width but no height, so I asked a question. This is because even if there are more items, that is, even if there are six items, they are arranged with three items per line.
The parent div is not containing its children because they're floated. The easiest fix is probably to add overflow:hidden with display:block to .wrapper,
Please try with following code for wrapper class.
.wrapper {
width: 660px;
display: block;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
You're probably floating the child divs. If so, try below style:
.wrapper {
content: " ";
display: block;
clear: both;
}
When you are using float to the child elements the parent should be float. So use another property as I given below.
.wrapper{
width: 660px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 200px;
background-color: orange;
height: 200px;
margin-right: 10px;
margin-left: 10px;
}
Related
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:
How to center a flex container but left-align flex items
(9 answers)
Closed 4 years ago.
Scenario :
I have a list of inline-block elements that I'm able to center.
But when the number of elements don't fit on a line, Todo : I would like
them to be justified to the left.
I've been messing with flex boxes
and other things, but I seem to only be able to do one at a time
(center the entire element or justify the elements left).
Anyone know
how to accomplish this?
Below is the jsfiddle I've been messing around with, as well as some images that are hopefully helpful.
What I have:
What I want:
https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/
Code:
jsx:
<div>
<button onClick={this.handleClick}>Increase!</button>
<div id="items-box">
{ items.map((item, idx) => (
<div className="item-box" key={idx}>{item}</div>
))}
</div>
</div>
CSS:
#items-box {
margin: 50px;
text-align: center;
}
.item-box {
display: inline-block;
height: 100px;
width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Try to use flexbox:
https://jsfiddle.net/hapu8ny2/
html,
body {
min-height: 100%;
}
#items-box {
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.item-box {
display: flex;
min-height: 100px;
min-width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Note: see i use min-height and min-width instead
I would like to achieve a layout that looks like this:
I am interested in a css/html only solution, so no javascript required.
The widths of both divs are dynamic, so I cannot use any static margins.
The spacing between the sides of the divs, and the top, should be the same.
I tried using margin: auto auto 0 auto on the inner div, as you can see in this jsfiddle, but it only works for left and right.
Note, the following attempt doesn't answer the question fully, since the width of the child cannot be dynamic.
The idea is to use a percentage width + percentage margin-top values on the child. It's a responsive layout, see the comments in the code, and try it out on different window sizes.
JSFiddle: http://jsfiddle.net/jkoycs6e/
body {
margin: 0;
}
.outer {
height: 100vh; /*for demo only*/
background: teal;
overflow: auto;
}
.inner {
width: 80%;
background: gold;
margin: auto;
margin-top: 10%; /* 100%-80%/2 */
}
<div class="outer">
<div class="inner">
hello<br/>hello<br/>hello
</div>
</div>
This is not possible. At least not without using javascript. There is no css-only solution.
If you put align="center" in your div you'll get to the middle of the screen every time but it's not going to be supported in HTML5 so I recommend the 50:50 approach.
div
{
text-align:center;
margin-top:50%;
margin-bottom:50%;
}
Hope that helps. ^^
Set the outer parent's overflow to auto and give your margin-top a relative value. Something like this:
.outer {
background: blue;
overflow: auto;
}
.inner {
background:yellow;
width: 100px;
height: 100px;
margin: 1em auto 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
This seems to work:
.outer {
height: 500px;
width: 300px;
background: blue;
position: relative;
}
.inner {
width: 80%;
height: 200px;
background:green;
position: absolute;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 0;
}
You can change the percentages marked for the margins as per your intended value for k.
Here's the fiddle
EDIT: Note that the width of inner has to be set in terms of percentages for this to work. Also note that when a margin is specified in terms of percentage, the margin's value is computed as a percentage of the width of the container. Even for the vertical margins, the percentage is applied on the width (and NOT the height) of the container.
Here's an SO post that's helpful in understanding how to position elements with respect to their container.
This answer doesn't actually make use of the margin property, nor does it have only two div.
body {
font-size: 26px;
text-align: center;
font-family: monospace;
}
#container {
display: inline-block;
position: relative;
width: 100%;
}
#dummy {
margin-top: 20%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver
/* show me! */
}
#wrapper {
display: table;
width: 100%;
}
#row {
display: table-header-group;
}
#left {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
#incenter {
display: table-cell;
background-color: aqua;
}
#right {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
<div>
<div id="container">
<div id="dummy"></div>
<div id="element">
k (20%)
</div>
</div>
<div id="wrapper">
<div id="row">
<div id="left">width = k (20%)</div>
<div id="incenter">incenter</div>
<div id="right">width = k (20%)</div>
</div>
</div>
</div>
Another example with measurements in pixels is here.
For explanation refer:
https://stackoverflow.com/a/12121309/2534513
https://stackoverflow.com/a/6615994/2534513
I have actually combined techniques mentioned in above two answers to make this one.
Using JavaScript would have been a lot easier.
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;
}
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