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
Related
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.
I have a div. It is 100% width and 150 pixels tall. I nested an <h1> tag in it, and it sits under an image instead of next to it.
<body>
<div class='topbar'>
<img src='img source is here'/>
<h1>
GO COSMOS!!!
</h1>
</div>
</body>
CSS:
body {
background-color: #aaffaa;
}
.topbar {
width: 100%;
height: 150px;
background-color: #00bb00;
}
img {
height: 150px;
width: 150px;
}
h1 {
}
A heading (<h1>,<h2>,etc) is a block level element:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.Source: MDN Docs
Simply display the h1 inline-block like:
h1 {
display: inline-block;
vertical-align:top;
/*vertical-align aligns it at the top of the image, instead of the baseline*/
}
JSFiddle Example with your code
All header tags are block by default, meaning it spans the width 100%. If you want it side-by-side another element you need to change the display like so:
h1 {
display: inline;
}
Another option would be to float the two inside elements left. See fiddle: https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/
img {
float: left;
height: 150px;
width: 150px;
}
h1 {
float: left;
}
While creating a HTML layout, I noticed some strange positioning issue I was unable to solve.
Take the following HTML:
<div class="outer-wrap">
<div class="header">
I am a Header
</div>
<div class="element">
Hello world
</div>
And combine with this CSS code:
#import "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css";
html, body { height: 100%; }
.outer-wrap {
width: 100%;
height: 100%;
display: table;
background: grey;
}
.element {
display: table-cell;
vertical-align: middle;
background: blue;
}
.header {
position: absolute;
background: red;
}
Fiddle
As you can see, I've set the wrapper to display: table, which enables me to vertically center any child element with setting display: table-cell and vertical-align: middle.
Now when I try to add a header, strange things start to happen.
First, I have to declare position: absolute on the header, otherwise the header horizontally pushes away .element. I don't know why this happens, but I understand why this fix works: Because position: absolute takes things 'out of the flow'.
But if I take a look at the Fiddle, you'll notice a small gap on the left side which exposes the grey background color defined on .outer-wrap:
What is causing this gap & how to fix this?
Why do I have to use absolute positioning on the header to make it expand to the full container width?
The key reason causing that is you're not defining the table-cell div and would not be 100% wide and you see its shifting towards right seeing the gray border color which is the background of outer-wrap div. So, you need to define the width:100%; when you use display:table-cell; to make it display correctly.
Changed css:
.outer-wrap {
width: 100%;
height: 100%;
display: table;
background: grey;
}
.element {
display: table-cell;
vertical-align: middle;
background: blue;
width: 100%;/*explicitly define width to be 100%*/
}
.header {
position: absolute;
background: red;
z-index: 1;/*to make it display in front*/
}
Fixed fiddle
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
I have a HTML code as;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
My CSS is as follows;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)
I tried the standard way of using margin:auto, but that is not working.
Also I want to avoid using text-align:center.
Is there some other way of fixing this?
You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.
You could give the span a set width, then add the margin:0 auto again. This would center-align it.
.left
{
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt
{
display:block;
width:100px;
height: 100%;
margin: 0 auto;
}
If you know the width of the span you could just stuff in a left margin.
Try this:
.center { text-align: center}
div.center span { display: table; }
Add the "center: class to your .
If you want some spans centered, but not others, replace the "div.center span" in your style sheet to a class (e.g "center-span") and add that class to the span.