I've tried to find any hint of a similar question to what I have on Stack Overflow to no avail. On a quest to fundamentally understand float and clear, I've run into an obstacle that doesn't quite make sense to me.
CSS:
.div1 {
background-color: red;
width: 20%;
height: 100%;
display: inline-block;
}
.div2 {
background-color: blue;
width: 60%;
height: 600px;
display: inline-block;
}
.container {
height: 800px;
}
HTML:
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
Why does the second div have all that space above it? I understand how including float: left to div1 would alleviate the issue because div2 would then wrap around div1, but I fail to understand why the issue exists in the first place. I would appreciate any explanation. Thanks.
Here's a JSFiddle for quick access to see what I'm working with: https://jsfiddle.net/y8gdbzd6/3/
By "tuck under", I'm guessing you're referring to the vertical alignment of the two blocks.
When using display: inline-block, the vertical-align property is set to baseline by default. This will cause elements of varying height to line up based on the baseline of the parent element.
You're probably expecting the behavior of vertical-align: top:
.div1 {
background-color: red;
width: 20%;
height: 100%;
display: inline-block;
vertical-align: top;
}
.div2 {
background-color: blue;
width: 60%;
height: 600px;
display: inline-block;
vertical-align: top;
}
.container {
height: 800px;
}
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
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;
}
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
you can see the issue in Safari on this page: http://mknepprath.com/lab/pyrus/safari_bug.html
The "See Our 2015 Graduation Lookbook" section is vertically centered in every browser except this one. I've tried quite a few ideas I've found on here, but nothing seems to work... Here's a codepen with the example below: http://codepen.io/mknepprath/pen/WbBWBQ
Here's my SSCCE:
<style>
.square {
width: 34%;
height: 0;
padding-bottom: 30%;
float: left;
position: relative;
background: red;
}
.table {
display: table;
position: absolute;
min-height: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.content {
width: 200px;
height: 20px;
background: yellow;
}
</style>
<div class="square">
<div class="table">
<div class="table-cell">
<div class="content"></div>
</div>
</div>
</div>
I want the square to scale proportionally when the browser width is decreased, so I'm currently using a padding technique, where the height of .square is set to 0, and the padding bottom is set with a percentage. An example of this is the second answer here: How to style a div to be a responsive square?
The div within that is set to display: table, and then the one within that is set to display: table-cell; vertical-align: middle. These are enough for all browsers except Safari. Any ideas?
Thanks!
Using Bootstrap 3.0.3, I'm attempting to center both horizontally and vertically a div with a hard-coded width and height. The JSFiddle has the latest code in it, also reported here to be consistent with SO's rules regarding JSFiddle.
http://jsfiddle.net/alex_kurilin/pNYg9/
The HTML:
<div class="text-center full-height">
<div class="inline full-height">
<div class="fake-table full-height">
<div class="fake-table-cell full-height">
<div class="content fake-table">
<div class="fake-table-cell">foobar</div>
</div>
</div>
</div>
</div>
</div>
The CSS:
html, body {
height: 100%;
}
.fake-table {
display: table;
}
.fake-table-cell {
display: table-cell;
vertical-align: middle;
}
.inline {
display: inline-block;
}
.text-center {
text-align: center;
}
.full-height {
height: 100%;
}
.content {
background-color: grey;
width: 300px;
height: 150px;
}
What I'm showing in the JSFiddle appears to "work", however for some reason it adds a vertical scrollbar. What's interesting is that changing the body's font-size, font-family and line-height appears to affect the scrollbar, and thus I imagine this has something to do with the height: 100% and the inline-block div.
I'd love a pointer on two on how to make this specific layout happen correctly, as I suspect I'm doing this the hard way.
why not just use content element and remove others:
.content {
background-color: grey;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -75px;
width: 300px;
height: 150px;
}
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.