Stuck on a problem where when I enter text in a div with display property set to inline-block. Here's the HTML:
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
CSS:
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
The problem is with the div having id 'sectionheading'. When I have text in it like in the HTML given it shifts downwards for some reason, however when the div is empty it is aligned properly with the other divs. What's the problem here?
Use vertical-align: top; will solve your issue.
If you are using display: inline-block; you need to set vertical:align property of the div. Because default it's vertical-align value is baseline.
.sectionheading {
background-color: #df5e5e;
display: inline-block;
height: 35px;
vertical-align: top;
width: 6px;
}
Check Fiddle Here.
Try like this: Demo
.sectionheading {
vertical-align:top;
}
Another option for solve this issue..
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
float: left;
margin-right:10px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
The reason why such happens when there is text is because there is a height given by default and with no proper padding height added. You can either add vertical-align: top; or add line-height: 24px; and remove height.
Fiddle : Example
Related
I have a html page with a page title.
The height of the page title is determined by the height of the users photograph. The users photograph can be any size.
The issue that I cannot solve myself is that I am trying to vertical-align the text title to the middle of the title holder, but I am not able to figure this out if the photo has a dynamic height (the max-height is 149px). Assigning a specific height to the div does allow the middle vertical alignment, but as the users photograph can be any height, assigning a set height can make the appearance seem odd.
Here is what I am trying to achieve:
Does someone know how to vertical align middle the users name with a dynamic height? I have read several similar SO posts, tried several things but I cannot get this to work.
Here is my html code:
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="{{ name_details_photograph_url }}" />
</div>
</div>
</div>
Here is my CSS:
.resumeStyleNameTitleWrapper {
display: table-cell;
width: 100%;
}
.resumeStyleNameTitle {
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: calc(100% - 159px); /*less the width of the photograph plus 10px */
background-color: lime;
}
.resumeStyleNameTitleInner {
direction: ltr;
display: table-cell;
max-height: 149px;
text-align: left;
vertical-align: middle;
width: 100%;
background-color: orange;
}
.resumeStyleNameTitleFontChange {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleNameTitlePhotograph {
direction: ltr;
display: table-cell;
float: right;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: top;
}
.resumeStyleNameTitlePhotographInner {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
Example: http://jsfiddle.net/kevalbhatt18/78Lzadtt/2/
I solved your Problem by putting resumeStyleNameTitlePhotograph clss in to resumeStyleNameTitleInner
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="">
</div>
</div>
</div>
</div>
So now if your image size change then your text div will also change its height depending upon image div size
Simplify your markup
One div containing a text element and an img:
The parent div is given display: table and text-align: right to align the image to the right
The names element (h2 in my example) is given display: table-cell and vertical-align: middle to keep it vertically centered. text-align: left brings the name to the left
The image is given vertical-align to remove the default baseline gap
Full Example
Compatibility: display: table is recognised in IE8+ and all modern browsers.
* {
margin: 0;
}
.name {
background: #F00;
display: table;
width: 100%;
text-align: right;
}
.name > img {
max-height: 149px;
max-width: 149px;
vertical-align: middle;
}
.name > h2 {
text-align: left;
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
<div class="name">
<h2>John Smith</h2>
<img src="http://www.placehold.it/200X100" />
</div>
Try this
.container {
display: table;
width: 80%;
background: green;
padding: 5px;
}
.first-child {
display: table-cell;
text-align: center;
vertical-align: middle;
background: yellow;
}
.second-child {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
color: red;
font-size: 20px;
}
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x150" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x200" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x100" />
</div>
</div>
I will simply use table to accomplish this task. Neat and simple. No messing around with CSS, and I don't have to worry about browser compatibility.
Just ensure to set valign (vertical alignment) to middle on the column for username.
<table width="100%" border="0">
<tr>
<td width="52%" valign="middle">Username</td>
<td width="29%"> </td>
<td width="19%"><!-- IMAGE HERE --></div></td>
</tr>
</table>
HERE IS A FIDDLE
I am having trouble vertical aligning text in a div. I have tried suggestions that i have read on other posts. I'm sure its obvious what I am doing wrong but its not working.
http://jsfiddle.net/o6gqvtoo/
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text{
display: block;
vertical-align: middle;
}
.pull-left {
display: block;
}
vertical-align is sort of an odd one.
Generally you should use it on the elements themselves, not their containers and it's really only for inline and inline-block elements.
But even then it probably won't vertically center like (I'm guessing) you are wanting. So a little trick is to set your line-height to the same as your height and voila:
http://jsfiddle.net/06c7eosv/
Note: With display: inline-block and width: 50% you can't have any white space between the elements in your html
Good:
<div>...</div><div>...</div>
Bad:
<div>...</div>
<div>...</div>
Based on the supplied image and limited information availableI believe that the best option available is to absolutely position the banner-text wrapper div
.banner {
margin-top: -2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pull-left {
display: block;
}
<div class="banner">
<div class="span10">
<!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
</div>
</div>
</div>
That said, other options may be available if the two internal divs can be combined.
Usually, vertical-align sets the alignment of inline level elements relatively to the line box.
However, in when applied to table cells, it has a different meaning: it sets the alignment of the content inside the cell.
Therefore, you can use CSS tables:
.banner {
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text {
display: table-cell;
vertical-align: middle;
}
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text{
display: table-cell;
vertical-align: middle;
}
.pull-left {
display: block;
/* float:left; */
}
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
</div>
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/