I have a problem where the number of line rows affects a box position. The more rows I have, the worse is it displaying.
The HTML I'm working with
<div class="block">
<img alt="*" src="http://placekitten.com/200/300" alt="*" />
<h2>Nameasdasd asd asdf wsd fgW</h2>
</div>
And the CSS
.block
{
width: 120px;
height: 150px;
display: inline-block;
border-radius: 10px;
margin: 13px 13px 0 0;
text-align: center;
padding: 5px;
position: relative;
behavior: url(/Media/PIE.htc);
cursor: pointer;
background: #f00;
}
.block img { height: 70px; width: 70px; display: block; margin: 0 auto 10px auto; }
.block h2 { font-size: 12px; padding: 0; margin: 0; font-family: 'Arial'; }
Fiddle: http://jsfiddle.net/3GVTK/2/
I've never encountered this problem before.
Edit: Thanks for all the response and solutions! All of them are valid and works (as of now).
I'm going to stick with Blazemongers solution as it doesn't have any side-effects for the current layout.
Add vertical-align: top; to the css for your .block element.
http://jsfiddle.net/mblase75/tsRKG/
If you look at your fiddle's blocks in a wide screen, you may notice that they're aligned to the last line of text. This is what baseline means, which is the default vertical alignment.
Simply add following property to .block css class
float: left;
Check here http://jsfiddle.net/3GVTK/4/
remove display:inline-block; and add float:left;
fiddle
just add display:inline-table to block h2 in your css
like
.block h2 { font-size: 12px; padding: 0; margin: 0; font-family: 'Arial'; display:inline-table }
you'll need to make sure, that the kitten's name is not overly long
Related
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
In the following code:
<a href="*">
<h3>My really really long header</h3>
<img src="thumbnail.png" width="150" height="100" />
</a>
The h3 overflows its size. If I set the overflow to hidden, an extra margin is added to the bottom of the h3. If I change the header to short one, the extra bottom margin does not appear.
After searching SO I found something about collapsing margins. But the point is there is no margin applied to img nor to h3.
Here is the CSS:
h3 {
width: 300px;
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
margin: 0;
display: inline-block;
width: 150px;
background-color: #0f0;
}
a {
position: relative;
display: block;
margin-bottom: 20px;
padding: 4px;
border: 1px solid #000;
width: 160px;
height: auto;
}
img {
background-color: #00f;
}
Fiddle
If I set the font-size of tag a to zero, the extra margin doesn't show up.
Question: Is there a proper way (not setting font-size: 0) to solve this issue?
You have your h3 set to inline-block. By default, inline-block respects line-height and font-size. Change your h3 to display block.
css:
h3 {
width: 300px;
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
margin: 0;
display: block;
width: 150px;
background-color: #0f0;
overflow:hidden;
}
Remove display: inline-block from the h3, or add vertical-align:bottom.
That you are making the h3 an inline-block element is causing this, because as such it gets laid out in the line box in a way that leaves space for the descenders of characters of (potential) text content on that same line.
Up until a couple days ago using position:absolute; and bottom:-36px was enough to hide the controls down the page, and they would popup whenever the mouse was hovered over the player. Now I'm able to scroll down to see them. How can I fix this while keeping the same slide-up effect?
Also, one more thing... I set the controls div with line-height:36px expecting it to be 36px in height but it is actually 38px (making bottom:-36px kind of useless since 2px are visible). The timer and the P, M and F divs get two extra px on the top and the seek bar gets them on the bottom. Where are these extra px coming from?
Sample
Any help on how to fix these issues and understand what's going on will be greatly appreciated. Thank you.
EDIT1:
Thanks to Fahad I managed to solve my first issue. The snippet didn't work outside of codepen but I fixed it adding position:relative; to the parent div. It still is unclear to me why line-height adds those extra px, though.
Giving the parent div a relative position raised another problem, don't ask me why but sometimes I need to scroll inside the "player" (well, you can ask) and when I do the controls don't stay at the bottom. Please see for yourselves:
Sample
EDIT2:
Apparently that can be easily solved by replacing position:absolute; with position:fixed; in the controls div. I'm still testing just in case this little change is messing with anything else.
You can assign overflow-y: hidden; to your body tag using CSS (to disable vertical scrolling) and change the bottom value to -38px.
html,
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #EEE;
margin: 0;
overflow-y: hidden;
}
#player {
background-color: #333;
text-align: center;
height: 100vh;
}
#toggle {
margin: auto;
width: 500px;
font-size: 24px;
line-height: 60px;
background-color: #B83B3B;
}
#toggle:hover + #controls {
bottom: 0;
}
#controls {
position: absolute;
left: 0;
right: 0;
bottom: -38px;
line-height: 36px;
background-color: #B83B3B;
transition: bottom 0.3s ease;
}
#left {
float: left;
}
#right {
float: right;
}
#curTime {
font-size: 13px;
font-weight: bold;
margin: 0px 8px;
display: inline-block;
vertical-align: middle;
}
#center {
overflow: hidden;
}
#seekBar {
-webkit-appearance: none;
outline: none;
background-color: #1F7783;
height: 6px;
margin: 0;
width: 100%;
}
#seekBar::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #EEE;
height: 12px;
width: 12px;
border-radius: 12px;
cursor: pointer;
opacity: 0.8;
}
.button {
margin: 0px 8px;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
<div id="player">
<div id="toggle">Hover to show controls.</div>
<div id="controls">
<div id="left">
<div class="button">P</div>
<span id="curTime">0:01</span>
</div>
<div id="right">
<div class="button">M</div>
<div class="button">F</div>
</div>
<div id="center">
<input type="range" id="seekBar" step="any">
</div>
</div>
</div>
Here's the example on CodePen.
I need a div to be positioned at the top inside its containing div, and leave unused space below itself. The default behavior seems to be the opposite, e.g. the contained div falls down to the floor of its containing div and leaves unused space above itself.
I assume that's quite a trivial thing to do, but I don't even know how to search for the solution on Google (tried "div float top", "div gravity" and some other meaningless searches...)
Here is my html code:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And relevant css:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
}
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
}
.bonustext {
display: inline-block;
width: 70%;
}
The resulting layout is ok except the logo div (the one containing the img tag) that occupies the lower part of its containing div free space, while I need it to "fight" gravity and stay with its top edge hooked to the container top edge.
Thanks in advance for any help.
Here is a slight modification using float instead of inline-block.
Seems to work OK:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And CSS:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
height: 100px;
border: 10px solid red; /* test */
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
clear: both;
}
.bonusbookmakerlogo {
float: left;
width: 20%;
}
.bonustext {
float: left;
width: 70%;
}
The answer by #Marius George works and I think it is the cleanest possible solution, but here his a different one I've found meanwhile:
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
vertical-align: top;
}
I have been stuck with this div in the header wrapping to the next line when the window is resized. You can view it at http://www.commexfx.com . The right div in the header which includes the search box etc is wrapped to the next line when resizing the window. I tried everything: changing position, display, white-space, etc, but nothing. the structure is like this:
<div id="header">
<div id="logo"> </div>
<div class="top-widget"></div>
</div>
And the CSS code for the time being is:
#header {
margin: 0 auto;
/* max-width: 960px; */
width: 960px !important;
height: 100px !important;
border: 1px solid blue;
background-color: #ffffff;
white-space: nowrap !important;
}
#logo {
float: left;
z-index: 9999999;
margin-bottom: 20px;
width: 360px;
display: inline;
border:1px solid green;
padding: 0 !important;
margin: 0 !important;
}
.top-widget {
background: none;
border: none;
/*clear: right;*/
float: right;
height: 95px;
text-align: right;
display: inline;
width: 590px !important;
border: 1px solid yellow;
padding: 0 !important;
margin: 0 !important;
}
Would appreciate any help. Also searched the forums here and tried every possible solution I could find but nothing.
Thanks
Add min-width:960px to your css #header declaration.
Replace your css with these new ones. Floating two elements, one right and one left will make them wrap so I would use inline-block.
You don't need position:relative unless you are positioning elements within that div as absolute so you can remove those as well. Same with z-index.
Also, you don't need !important unless you have other styles overriding this. I try and use it sparingly.
#header {
margin:0 auto;
width:960px;
}
#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}
#logo img {
vertical-align: inherit;
}
.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}