I have a div box that I would like at a min-height: 33px; and word-wrap to increase the height, when greater than that height. Here's a fiddle that does work http://jsfiddle.net/PzfF7/! Any reasons it does this locally with only height:33px; :
& (fiddle style)
<div class="outerDiv">
<div class="messages">
<div class="topMessage">
new message that is really long and should be on multiple lines as this continues on to the next line and so on and so forth
</div>
</div>
<div class="comments">
<div class="comment">Here's a comment</div>
</div>
</div>
For whatever reason, setting the min-height: 33px; does not work, only height: 33px;.. And word-wrap or overflow-y: auto; (less preferable) don't work at all..
.outerDiv {
width: 260px;
}
.messages {
float: left;
min-width: 100%;
max-width: 100%;
min-height: 33px;
border: 1px solid #999;
display: table;
padding: 1%;
font-size: 12.9px;
}
.topMessage {
display: table-cell;
vertical-align: middle;
padding-left: 2%;
font-size: 12.9px;
}
.comments {
float: left;
min-width: 100%;
max-width: 100%;
height: 33px;
border: 1px solid #000;
padding: 1%;
display: table;
}
.comment {
display: table-cell;
vertical-align: middle;
padding-left: 2%;
padding-right: 2%;
font-size: 12.9px;
}
As #ChristianVarga pointed out: "Do you have line-height: 0 anywhere on your local copy?"
An inherited line-height: 0; was the interfering style.
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I've been running into an issue trying to vertically center an image and text together. I cannot get the image to align with the text, and even when I think it is centered, changing the browser size ruins it.
.icon-button-with-text-wrapper {
border: 1px solid #7e898a;
background-color: white;
box-sizing: border-box;
display: table;
margin-top: 10px;
padding: 10px;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.icon-button-with-text-wrapper img {
margin-right: 10px;
max-height: 50px;
max-width: 50px;
vertical-align: middle;
float: left;
}
p {
vertical-align: middle;
}
}
<div class="icon-button-with-text-wrapper"><img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png" width="100" height="100" style="
padding-top: 10p;
" align="middle"><p>Speak to an Admissions Counselor<p></div>
I've tried vertical-align: middle, display: table-cell (and others), and different positions, along with adjusting the height, margins, etc. I've also looked at several other similar questions such as this one, this one and this one. However, none of those offered a solution that worked in this instance.
maybe so?
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.icon-button-with-text-wrapper {
border: 1px solid #7e898a;
background-color: white;
display: table;
margin-top: 10px;
padding: 10px;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.icon-button-with-text-wrapper > .item{
display: table-cell;
vertical-align: middle;
}
.icon-button-with-text-wrapper > .item:nth-of-type(1){
width: 60px;
text-align: center;
}
.icon-button-with-text-wrapper img {
max-height: 50px;
max-width: 50px;
}
<div class="icon-button-with-text-wrapper">
<div class="item">
<img src="http://i.imgur.com/YjcaGSx.png" alt="" />
</div>
<div class="item">
<p>Speak to an Admissions Counselor<p>
</div>
</div>
Fiddle
Hope this will help.
<html>
<head>
<title>Flaticon WebFont</title>
<style>
.icon-button-with-text-wrapper {
border: 1px solid #444;
box-sizing: border-box;
padding: 10px;
font-size: 1.0em;
vertical-align: middle;
font-size: 1.3em;
}
.icon-button-with-text-wrapper img {
width: 50px;
height: 50px;
float: left;
vertical-align: middle;
padding: 10px;
}
</style>
</head>
<body>
<div class="icon-button-with-text-wrapper">
<img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png">
<p>Speak to an Admissions Counselor<p>
</div>
</body>
</html>
You don't need to float the image or put the text in its own block (p).
.icon-button-with-text-wrapper {
border: 1px solid #7e898a;
background-color: white;
box-sizing: border-box;
display: table;
margin-top: 10px;
padding: 10px;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.icon-button-with-text-wrapper img {
margin-right: 10px;
max-height: 50px;
max-width: 50px;
vertical-align: middle;
}
<div class="icon-button-with-text-wrapper"><img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png" width="100" height="100">Speak to an Admissions Counselor</div>
I have a user name and photograph that appears side by side and middle aligned, as shown below.
I am now trying to change the css so that the photo is dynamically floated to the left and the user name is dynamically floated to the right.
I have tried adding float: right and float left to the css but this only makes the photograph appear under the user name.
I have read several similar threads and tried many things, but I cannot solve this. It is really frustrating. It may be a simple fix, but I cannot see it.
Using CSS, how do I display the username on the right and the photo on the left and still have the user name and photo vertical-align: middle with a width of 100%? The photo that the user uploads can be different height, so I cannot use line-height.
Here is my HTML code:
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img class="name_details_photograph_preview_dimensions" src="{{ image_url }}" />
</div>
</div>
</div>
</div>
Here is my css code:
.resumeStyleResumeTitleWrapper17 {
display: table-cell;
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
padding: 2px;
text-align: left;
vertical-align: middle;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
max-width: 149px;
padding: 2px;
text-align: right;
vertical-align: middle;
}
.resumeStyleResumeTitlePhotographInner17 {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
Here is one way of doing it using CSS3 transforms to take care of the vertical alignment of the name/title element.
I defined two classes, .flipLeft and .flipRight to control the placement of the name/title and the image elements.
I assumed that the image height will be as tall or taller than the height of the name/title, otherwise, things get more complicated.
The trick is to use the text-align property to place the image to the left or to the right of the parent block.
I then use absolute positioning to take the name/title element out of the content flow and pin it to the opposite edge of the parent block and adjust the top offset to 50% to get approximate vertical centering.
Finally, I use CSS3 transforms to adjust for the height of the name/title element.
Note: In the snippet below, scroll vertically to see both examples.
.resumeStyleResumeTitleWrapper17 {
display: block;
width: auto;
border: 1px dotted blue;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
position: relative;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.resumeStyleResumeTitlePhotograph17 {
border: 1px dotted yellow;
display: inline-block;
vertical-align: top;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
display: block;
}
.flipLeft.resumeStyleResumeTitle17 {
text-align: left;
}
.flipLeft .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.flipRight.resumeStyleResumeTitle17 {
text-align: right;
}
.flipRight .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<h2>Flip Image to Left</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipLeft">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
<h2>Flip Image to Right</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipRight">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
Couldn't achieve it with float but I got the desired layout using display: flex;
JS Fiddle
div.container {
display: flex;
width: 100%;
align-items: center;
background-color: black;
height: 100px;
padding: 20px 0;
}
div.user_name {
display: flex;
font-size: 32px;
font-family: Helvetica;
color: white;
width: 50%;
padding-left: 20px;
}
div.user_img {
display: flex;
justify-content: flex-end;
width: 50%;
height: 100%;
padding-right: 20px;
}
div.user_img > img {
height: 100%!important;
width: auto;
}
<div class="container">
<div class="user_name">User Name</div>
<div class="user_img">
<img src="http://www.lessons4living.com/images/penclchk.gif"/>
</div>
</div>
Found a fix for this problem, update your HTML to following,
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWd99Qkjbg4ZVu-XHvaIo4LX1MittAmD0CvsiN6QcYeuv4XOQm" />
</div>
</div>
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
</div>
</div>
In CSS,
.resumeStyleResumeTitleWrapper17 {
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
float: left;
text-align: left;
width: 100%;
height: 150px;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
padding: 2px;
text-align: left;
display: inline-block;
vertical-align: middle;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: middle;
display: inline-block;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
.resumeStyleResumeTitle17:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -2px;
}
Basically I added a .resumeStyleResumeTitle17:before element which acts like a ghost element and takes the full height and allows each adjacent elements to be aligned by display:inline-block and now vertical-align:middle property is applicable.
Ok, this is to point you in the right direction, but it is obvious that you don't really understand what is going on. You have way too many div's there and really bad naming structure on the classes. Here is how I got it working somewhat in the direction you want without removing the divs and starting over (which is what I would do otherwise): ( Here is the live jsfiddle for it).
<!DOCTYPE HTML>
<style>
.resumeStyleResumeTitleWrapper17 {
position:relative;
width: 100%;
display:block;
background-color: #000;
height:175px;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
float:right;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
float:right;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
}
.resumeStyleResumeTitlePhotographInner17 {
float:left;
height:175px;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
</style>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<span class="resumeStyleResumeTitleFontChange17">User Name</span>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<!-- image has max-height: 149px & max-width: 149px; assigned in the css file -->
<img class="name_details_photograph_preview_dimensions" src="http://www.lessons4living.com/images/penclchk.gif" />
</div>
</div>
</div>
</html>
I'm trying to get 2 divs on the same line, but alligned differently. Here is a pic of what I have right now and what I want:
[pic removed by poster]
and here is the code I've got:
<div class="newsdiv">
<div class="picdiv" style="background-image: url('[...]');"></div>
<div class="titlediv">
<font size="4">', $row['title'], '</font>
</div>
<div class="textdiv">
<font size="1">This is some dummy text</font>
</div>
<div class="linksdiv">
[Read More...]
<div class="statsdiv">
Views: 0 , Comments: 0
</div>
</div>
</div>
and the stylesheet:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
}
Any ideas of how to do this? Thanks!
You need float here
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
May be there will be more cleaner solution but you can try this for now
.linksdiv > a{
margin-left:12%;
}
Updated Demo
You can use the position: absolute; on your .statsdiv and position:relative; on .linksdiv to achieve what you want. I guess using float will be too much for this.
Updated CSS(modified classes only):
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
position: relative; /*added*/
}
.statsdiv{
font-size: 7pt;
/* text-align: right; not required */
display: inline-block;
height: 10px;
position: absolute; /*added*/
right: -0.5%; /*added*/
}
FIDDLE
Consider this working css. Here is Demo
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right;/*added*/
}
Add this to your .statsdiv css
float:right;
here is the fiddle http://jsfiddle.net/cc68d/
Edit :- Although this works, as pointed out by you , it does not align Read More[..] in center. Actually the issue is with the design part. I will not go into details. You can correct this by adding style="padding-left:100px;" to your ReadMore[..] <a> tag attribute.
as shown here http://jsfiddle.net/cc68d/1/
Replace your total css code, You need float on the class .statsdiv
Your total modified code is:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
You could make your div go out of the flow making its position absolute :
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
position: absolute;
align: right;
padding: 0 15px;
width: 96%;
left: 0;
}
Needs a little tuning to make it right in all definitions though...
Add a third div with a width of how ever wide you need it with no content between them - a place holder div ...remember to float right , text align and a margin as well.
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/