I have 3 elements inline block with each other. The 2 smaller grids are flush with the bottom of the larger chart by default. How can I get them to be flush with the top of the larger chart instead. http://i.imgur.com/TAUG2rZ.png
I would prefer to not have to give an absolute position to each element, unless thats the only way.
all thats applied atm:
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;}
Add vertical-align:top to css if you want to align them to top.
Other options for vertical-align which you may want are: middle, baseline, bottom etc.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;
vertical-align: top; }
If, by default, the elements don't end up aligning themselves towards the top, I would use the vertical-align property to position each of the inline-block elements to the top.
I've created a simple CodePen that demonstrates this more clearly. Notice how I style each of the div elements on the page:
div.element {
display: inline-block;
vertical-align: top; /* aligns each of the divs to the top of the container */
}
In this case, the element ids are arbitrarily named element1, element2, and element3, but you would probably name them smallgrid1, largechart, and smallgrid2 respectively.
Hi there you could try this
#smallgrid1, #largechart, #smallgrid2{
display: inline-block; vertical-align: top}
Related
Looking at the bottom example here, if you give .after-box a margin-top:5px it doesn't make a difference as it'll stay in the same location. But if you give .box a margin-bottom:5px it'll move the .after-box down. Why is it that on floated elements, their margin matters but other elements around them don't?
Hey margins don't move floated html elements, instead they push it away.
To give a fake margins on floated elements is to put the content inside another container then apply padding.
.outer {
float: left;
padding: 20px;
}
.inner {
//styles here..
}
I have built a content div with three further divs who have the
display:inline-block;
attribute. One of them contains another div element which has some audio controlls. The right div has a really big margin! Chrome and Firefox don't show any margins or paddings. If I delete the #music element, everything is okay.
Here is a live demo
Thanks for helping
Because you are using the display: inline-block; definition, your content is verticaly aligned to baseline by default.
Apply this on your .frames class:
vertical-align: top;
Problem solved. ;)
if you add float:left to #music it gets fixed _
as suggested using clearfix on parent element doesn't hurt:
.parent:after{
display:table;
content: "",
clear:both
}
ive got some problem with my css styles:
I have different groups ( <div>'s ) that have subgroups displayed in ONE colum
or MULTIPLE ( max. 3) colums.
The problem i have is, that my vertical-align wont work within float elements with an 100% height.
within the subgroups: ST200 | Überblick... | EN DE should be displayed with vertical-align: middle
Maybe someone could help me.
complete code posted on jfiddle
http://jsfiddle.net/ZAa33/
Andres's comment here seems to address your problem: the line-height of the text is confining it to a smaller area than its container div.
To test, I changed the line-height property on .kursid to 35px, and the ST200 was successfully centered vertically, but only for those divs that had heights of 35px. For a more general solution, you could redesign your code to allow line-height and height to be set explicitly equal on all divs with text you want centered vertically, or you could see the other answers to that question for other options.
Vertical-Align Property works with only inline and inline-block elements. if you float any element, by default that element display property value is changed to block. In your case that is why vertical-alignment is not working on floated element. one solution for your problem is use inline.
[Inline-block demo](http://jsfiddle.net/Mostwanted_cJ/W8nf8)
Your JSFiddle is edited.
change all of your span to div and apply display:inline-block and vertical-align:middle
Inline-block demo
i found a solution to my Question that works pretty nice ;)
i just needed to set:
.kurs {
border-radius: 15px 15px 15px 15px;
background-color: #c5c5c5;
width: 100%;
min-height: 35px;
margin-bottom: 10px;
display: flex;
! display: -webkit-flex; <- remove
! display: -moz-box; <- remove
align-items: center; <- add
justify-content: center; <- add
}
The updated fiddle ;)
http://jsfiddle.net/ZAa33/9/
I am confused how to bring two div into same line.
I used float:left and float:right one for each of them and also they are contained as two different div id of a div class. Also used display:inline in class.
Please give any idea regarding this problem.
try float: left for both of them
You can chance the display property to either inline or inline-block.
For example:
<div class="example">One</div><div class="example">Two</div>
With
.example {
display: inline;
}
There are several methods to achieve this, and I've detailed seven of them on a sample page. Tl;dr:
floating the divs (#vladkras' answer)
Using display: inline-block; (#Sohnee's answer)
Using Flexbox: display: flex on the parent
Playing with negative margin to move the second div around
Using display: table on the parent and display: table-cell on the children
Playing around with position: absolute
And, the newest and in many cases best solution, CSS Grid Layout: display: grid on the parent.
I have two div id's. One has has an image in it and the other has a background image. There is an unwanted space in between these two divs. In the dreamweaver design view it appears as if there is no space, but if I make it live or preview in browser the space appears again.
This is the css for the divs
#header {
text-align: center;
padding: 0px;
margin: 0px;
}
#content {
background-image:url(img/ContentBox.png);
background-repeat: no-repeat;
background-position:center;
padding: 0;
margin: 0;
}
This is my body html (ignore the multiple line breaks, this is just so I can see the bg img in the div)
<body>
<div id="header"><img src="img/Header.jpg" /></div>
<div id="content"><br><br><br><br><br><br><br></div>
</body>
Images have a default display setting of inline. This causes them to flow inline with text, vertically-aligned with the baseline. All text is vertically-aligned with the baseline by default as well, unless you change it by setting vertical-align to something else on its containing element.
What is baseline?
The baseline floats above the bottom of the actual line. Look at the lower-case letter g. The bottom of the top circle is the baseline. That's where the images are getting aligned.
You can solve this multiple ways, but here are a couple:
Vertical Alignment
Again, image elements are set to display: inline by default. Assuming you don't want to change this, you need to adjust how the image element aligns vertically on the current line of text.
The vertical-align CSS property sets the vertical alignment of an inline element on the current line of text. It doesn't set it relative to the container.
Therefore, you can set the vertical-align property to middle, top, or bottom, and as long as the image element is larger than the line-height of the current line of text, it will not have the extra space below it.
However, you need to remember what I just said about line-height. In the event that your line-height is larger than your image element, vertical-align will do more than remove that extra spacing: it will actually align the image element on the line accordingly. See this jsFiddle to see an example of how a line-height greater than the height of the image will affect the result.
So, keeping with the HTML that you provided, to set the vertical alignment, you'd do the following CSS rule:
#header img {
vertical-align: bottom; /* or top or middle */
}
Displaying as Block Level
Another option would be to change the image element to display as a block level element. I don't recommend this approach unless you know you want a block level image.
Block level elements automatically fill to their container, and don't flow inline with text or other inline elements. Also, if you set a float on the image, this would force it to be block level.
So, you have two options to display as block level:
#header img {
display: block;
}
or
#header img {
float: left; /* You could float right too */
}