I have the following HTML code:-
<html>
<head>
<meta charset="utf-8">
<title>Personal Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="header1">
hello world
</div>
<div class="header2">
</div>
<div class="header3">
</div>
</body>
</html>
Below is the style defined in the style sheet:-
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
}
.header3{
background-color: green;
width: 34%;
height: 200px;
display: inline-block;
}
I am getting the following output:-
Question: Despite defining my display property as inline-block, why is the yellow box along with Hello World going in the second line? If I remove the text Hello world then all three box lines up together?
Can someone please explain this behavior?
The inline-block display property treats block level elements (e.g. ) as an inline element (e.g. ), and, just like if you had a line break between two elements, the line-break between the s is creating a space between the s. That extra margin is actually a space—not a margin.
ref: more details...
apply 'float:left' to each header block.
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
float:left;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
float:left;
}
.header3{
background-color: green;
width: 35%;
height: 200px;
display: inline-block;
float:left;
}
Seems to be a quirk of inline-block. If you add vertical-align:top; it sorts it out.
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
vertical-align:top;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
vertical-align:top;
}
.header3{
background-color: green;
width: 34%;
height: 200px;
display: inline-block;
vertical-align:top;
}
The following is a theory, based on reading the Visual formatting model document provided by the W3C. I'm most likely wrong on at least part of this, but:
By applying display: inline-block to the div elements, the end result is
the divs themselves are inline
the content inside each div gains a, let's call it a "virtual container", that's a block element (or treated as such).
Inline elements collapse to the height and width of their content. In the second and third divs, since those are empty, means those collapse to a height of 0. The boxes you see are actually the inner content overflowing the parent divs.
The three elements all have a default vertical-align value of baseline, so I suspect what you're ultimately seeing is three divs aligned in a row, to the baseline of the first div, but then the bottom of the inner content of the latter divs is aligning to the baseline of the first div, with their tops pushing the whole row down from the top of the page.
Adding the the old "has-layout" trigger will cause the inline elements to resize to fit their content, if that's all you're after (you'll want to run this with the full-screen option to see it correctly):
.my-block{
height: 200px;
display: inline-block;
/* these rules applied together trigger hasLayout */
/* see https://webplatform.github.io/docs/css/cssom/properties/hasLayout/ */
overflow: auto;
zoom: 1;
}
.header1{
background-color: yellow;
width: 35%;
font-size: 25px;
}
.header2{
background-color: blue;
width: 30%;
}
.header3{
background-color: green;
width: 34%;
}
<html>
<head>
<meta charset="utf-8">
<title>Personal Site</title>
</head>
<body>
<div class="header1 my-block">
hello world
</div>
<div class="header2 my-block">
</div>
<div class="header3 my-block">
</div>
</body>
</html>
Changing the vertical-align to top or bottom would yield the same effect in your example, although you'd need to make sure either of those alignments make sense in your "real" code.
Related
I am learning floating elements in CSS and i encountered the following peculiar behavior.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one { background-color: red; width: 200px; height: 200px; margin: 10px; }
#two { background-color: yellow; width: 200px; height: 205px; margin: 10px; }
#three { background-color: lightpink; width: 200px; height: 200px; margin: 10px; }
#four { background-color: green; width: 200px; height: 200px; margin: 10px; }
#five { background-color: coral; width: 200px; height: 200px; margin: 10px; }
#six { background-color: #b1ffea; width: 200px; height: 200px; margin: 10px; }
div{
/*display: inline-block;*/
float: left;
vertical-align: central;
}
</style>
</head>
<body>
<div id="one">
First div
</div>
<div id="two">
Second div
</div>
<div id="three">
three div
</div>
<div id="four">
four div
</div>
<div id="five">
five div
</div>
<div id="six">
six div
</div>
</body>
</html>
My question is why "four div" is placed below the "third div" not first and second ?
On the other hand, if i resize the browser (see image below) why in this case it is working perfectly ?
Because the second div element is taller than the first div, the forth div collides with the second div. When the forth div drops to the next line, it starts on the right and slides left, beginning under the third div, until it collides with the second div. If you look at your code at with 4 div elements per line, the fifth div drops to the next line. It begins below the fourth div and beginning moving left until it collides with the second div, because the second div is longer that the third or fourth div elements.
This is perfectly working as usual. Height of div2 is 205px instead of 200px. Change it to 200px and it will work fine.
I adjusted the CSS margins of #two using Inspect to this...
After that change, the div elements all seemed to behave as you wanted them to when the browser's window width was adjusted.
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.
Here is a simple piece of code, resulting in blue span element overflowing out of yellow and black box.
I know, I can use overflow property to hide/scroll it, but I rather need to resize the #inner and #outer containers to cover it (so that scrollbar would rather be on whole page instead of in the containing div). Is there any way?
The content ( = width) of "blue span" is dynamicly generated from application?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; width: 400px; }
</style>
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</html>
If you want the two outer boxes to resize dynamically based on the content thats inserted in the span, you will have to reconsider your approach. All boxes that scale dynamically cannot have a width defined, so they cannot be centred using the margin: auto. However, it is possible to achieve the same effect by wrapping the whole thing into another box that covers the full width of the page, text-align centring that box and then making the outer box displayed inline-block. This is the code that works. Now you can add a min-width to the content box if you want and it will scale nicely. Heres some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#wrap {
width: 100%;
text-align: center;
}
#outer {
display: inline-block;
background: black;
margin: 10px 0;
padding: 20px;
}
#inner {
background: yellow;
height: 200px;
}
#inner span {
background: blue;
display: block;
}
</style>
<div id="wrap">
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</div>
</html>
I think so you can add % units for your divisions to make it as perfect
Here is the CSS
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; }
Here is the fiddle
http://jsfiddle.net/mohamedmusthafac/n6CEx/
I think so this is what you are expecting for??
I'm trying to place two div horizontally, but one the content of the second div exceeds the height of the first one i get bad results:
Here is my Html code:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body>
<div class="container">
<div class="yellow">sometext</div>
<div class="green">more text here more text here more text here more text here more text here more text here more text here more text here more text here more text here </div>
<div class="spacer"></div>
</div>
</body>
and this is my Css:
.yellow {
background-color: yellow;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: #00ff00;
}
.container {
width: 30%;
}
.spacer {
clear: both;
}
The result i want is this:
but this is what i get:
Why not make the container background the same colour as your first div and change the CSS to:
JSFiddle here
.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: yellow;
overflow: hidden; <-- added
}
.container {
width: 30%;
background-color: #00ff00; <-- added
}
.spacer {
clear: both;
}
Although float is commonly used for layout purposes like this, it was originally designed to float text elements. This is the reason for why floated divs behave in a strange manner when ones not familiar with it.
Beside the text formatting issues there is actually another difficulty when you want two floated elements have the same automatic height. This could be achieved much better by using the display property with table and table-cell.
Have a look at this:
CSS for HTML dynamic layout with not fixed columns?
Or just take the regarding fiddle:
http://jsfiddle.net/TfuTE/
I think restricting .container to has a specific background-color may be cumbersome.
I suggest using display: table for parent element and display: table-cell for children to get rid of this issue.
Just add following lines in your stylesheet:
.container {
display: table;
height: 100%;
}
.container > div {
display: table-cell;
height: inherit;
vertical-align: top;
}
Here is a JSBin Demo
if you make a blocklevel element float your element won't be height and width 100% but as big as it's content, or as big as you set it with css.
you could give it a height with css
you could give the yellow div a margin-left: 104px
If you try to give margin-left to C1 div, it moves and overflow is hidden. But if you try to give margin-left to C2 div, it moves towards right, but overflow is not hidden, rather it moves in next line (behavior of inline-block).
So why is it not working on C2 div? Is there any way to solve this problem?
(Basically I want C1 and C2 div to be placed together and overflow should be hidden if I increase their widths, or if I give them margins).
Here's what I'm trying:
.c1 {
width: 220px;
height: 200px;
background-color: #666666;
display: inline-block;
}
.c2 {
width: 200px;
height: 220px;
background-color: #CCCCCC;
display: inline-block;
}
.c3 {
width: 180px;
height: 210px;
background-color: #333333;
display: block;
}
.wrapper {
background-color: red;
width: 500px;
height: 500px;
display: inline-block;
overflow: hidden;
}
<div class="wrapper">
<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
</div>
Add white-space: nowrap to the container (.wrapper).
white-space
The white-space property is used to describe how whitespace inside
the element is handled.
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text
wrapping) within text.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
To understand why, with white-space: normal, C2 wraps but C1 does not, see these posts:
Understanding the wrapping behavior of inline-block elements with overflow:hidden
Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?
Here's an excerpt from an answer by #BoltClock:
The value of overflow on a container doesn't influence whether or
when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.
So you have to force the inline-blocks to actually overflow the
container.
Since an inline-block has the same rigid physical structure as a block
container box, it's impossible for an inline-block to "break apart" or
wrap when it's the only inline-level box on a given line box.
Don't use Display Property.. Use Float property for example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-2.2.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.c1{
width: 220px;
height: 200px;
background-color:#666666;
float:left;
margin-left:10px;
overflow:hidden;
}
.c2{
width: 200px;
height: 220px;
background-color:#CCCCCC;
float:left;
margin-left:10px;
overflow:hidden;
}
.c3{
width: 180px;
height: 210px;
background-color: #333333;
float:left;
margin-left:10px;
overflow:hidden;
}
.wrapper{
background-color: red;
width: 500px;
height: 500px;
display: inline-block;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
</div>
</body>
</html>