I'm having problem in alignment of a div. Please see following html. I have basically a form fiend with label and input field, and a <p> on the right of the input field. For some of the fields, the <p> element has small text, which fits on same line. But for some fields, it has more text which goes to 2 or 3 lines.
How can I set the CSS of the <p> element that if its only one one line, then it should be displayed in the middle the input field, but if the text is over one line then it just goes up.
Hope my question is clear. Thanks for any help.
HTML:
<div class="container">
<label>Label</label><input class="input" />
<p>Lorem ipsum dolor. </p>
</div>
CSS:
.container{
border:1px solid black;
padding:20px;
float:left;
}
label{
line-height:2.5;
float:left;
border:1px solid green;
width:60px;
margin-right:10px;
}
input{
border:1px solid green;
height:34px;
padding:4px 6px;
width:200px;
float:left;
margin-right:10px;
}
p{
border:1px solid red;
float:left;
width:150px;
line-height:15px;
}
jsFiddle:
http://jsfiddle.net/JFjx4/
Please, explain what you mean "it should be displayed in the middle the input field"? May be what you need is jsfiddle. I replaced 'float: left' in 'LABEL INPUT P' with 'display: inline-block' and added 'vertical-align: middle' in 'P'.
#Grigor: "text-wrap" is css3 feature. It can be inappropriate for #Roman.
set a fixed width and put text-wrap: normal;
You could have a table for your form with 3 columns. The last one (with your p) you could style with vertical-align:middle in your css
Edit your jsfiddle html to this:
<div class="container">
<table>
<tr>
<td><label>Label</label></td>
<td><input class="input" /></td>
<td style="vertical-align:center"><p>Lorem ipsum asdf asd </p></td>
</tr>
</table>
</div>
I'm not one for recommending plugins because it generally doesn't help you learn... but in this case since you want different placements depending on length, AND because it sounds like you're using that for form validation... I'd recommend using the tipsy tooltip for this. its a pretty straightforward way to add messaging that also can move around your input element depending on your needs.
http://onehackoranother.com/projects/jquery/tipsy/
Related
I'm typing up a document for a nonprofit I'm involved in, and I'm currently working on the headers at the very top of the first page.
It's supposed to be two headers on the same line, one left-aligned and the other right-aligned, and both 13px bold text. It's also supposed to be directly above the title of the document, which is centred in <h1> text style.
Everything is going swimmingly except for the fact that the headers are both left-aligned, and I cannot for the life of me figure out what I'm doing wrong. I know it's not my browser because both StackEdit and WordPress fail to recognise it. And I asked 2 friends to take a look at it, and they can't figure out what's wrong either.
I recognise I probably screwed something up since I'm still learning HTML (I also haven't learned CSS yet), but it has thus far escaped me.
This is what I have:
<span style="text-align:left; font-size:13px"><b>Project Name</b></span>
<span style="text-align:right; font-size:13px"><b>Branch Name, Org
Name</b></span>
<div style=text-align:center><h1>Document Name 1-PubDate</h1></div>
Is this what you are trying to do? Use float css property
<span style="float:left; font-size:13px"><b>Project Name</b></span>
<span style="float:right; font-size:13px"><b>Branch Name, Org Name</b></span>
<div style="text-align:center;clear:both"><h1>Document Name 1-PubDate</h1></div>
Try to use div instead of span like in the following example:
<div style="float:left; text-align:left; font-size:13px; display:inline-block;"><b>Project Name</b></div>
<div style="float:right; text-align:right; font-size:13px; display:inline-block;"><b>Branch Name, Org
Name</b></div>
<div style="clear:both;"></div>
<div style="text-align:center;"><h1>Document Name 1-PubDate</h1></div>
Hope this may help. Best regards,
Because <span> defaults to display:inline, which means it will only grows as wide as its content's width. Try display:inline-block. Also use float to eliminate the white space between them:
span.header
{
display:inline-block;
width:50%;
font-size:13px;
font-weight:bold;
}
span.header.left
{
float:left;
text-align:left;
}
span.header.right
{
float:right;
text-align:right;
}
div.document
{
clear:both;
}
<span class="header left">Project Name</span>
<span class="header right">Branch Name, Org Name</span>
<div class="document"><h1>Document Name 1-PubDate</h1></div>
You are aligning the text of inline elements rather than aligning the elements themselves. If you inspect and look at the spans they are only as large as the text inside them. You can set the width's if you set them to display: inline-block and then the width to 50% and align the text however you want: http://plnkr.co/edit/hQKymbtYp5iBealcEkr3
<span style="display: inline-block; width: 50%; text-align:left; font-size:13px">
<b>Project Name</b>
</span>
<span style="display: inline-block; width: 49%; text-align:right; font-size:13px">
<b>Branch Name, Org Name</b>
</span>
<div style=text-align:center>
<h1>Document Name 1-PubDate</h1>
</div>
I'm going to change things up a bit and make it a bit more semantic (i.e. meaningful)
h1 {text-align:center; /*Center the H1 text*/
clear:both; /*Remove the affects of loats*/}
.preHeader {font-size:13px; font-weight:bold;} /*Set font size and bold pre-head elements*/
.project, .org {width:50%} /*Set common details*/
.project {float:left; } /*Set the project elemetn to the left*/
.org {float:right; text-align:right; } /*Text align the Right side elelment and set it to the right*/
<!-- A Container for your project and organisation elelments -->
<!-- You don't actually need the container, but it seperates it nicely -->
<div class="preHeader">
<div class="project">Project Name</div>
<div class="org">Branch Name, Org Name</div>
</div>
<h1>Title</h1><!-- Already is the width of its parent so don't need to wrap it -->
Learn more about how different elements display. You have block level elements, inline and (inline block) elements, and replaced elements (images and form elements).
Read more about floats here: https://developer.mozilla.org/en-US/docs/Web/CSS/float
And to see a discussion of the merits of floats (and their drawbacks) and the inline-block alternative see: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, get to know some of the handy tools. Pressing f12 in Chrome and Internet Explorer give you the developemt tools for those browsers enabling you to inspect element on a web page and see what styles are affecting it and how they are affecting it as well as giving you the ability to experiment with the styles in place. Firebug for Firefox provides the same functionality.
So, I did a search and it seems that every single person who's asked this exact same question has actually had success with an answer given by someone - I tried multiple different methods and honestly, I'm about to have a meltdown.
I've tried floating left, floating right, inline-block, etc, and none of it has seemed to work. I am at a loss as to what I'm doing wrong, but it's driving me nuts.
Here's the HTML I'm trying to get on the same line:
<div class="search-and-staff-app-button">
<div class="search-position">
<form method="get" id="sb_searchform" action="<?php bloginfo('home'); ?>/">
<div class='search-box'>
<input name="s" id="s" class='search-input' placeholder='Search' type='text' />
<img onclick="document.getElementById('sb_searchform').submit();" class='search-img' src='<?php bloginfo('template_url'); ?>/img/search.png'>
</div>
</form>
</div>
<div id="staffAppButtonPlaceholder" class="staff-app-position"></div>
</div>
and the CSS:
.search-and-staff-app-button {
width:360px;
margin:0px;
float:right;
display: inline-block;
}
.search-position {
float:left;
}
.staff-app-position {
float:left;
}
What am I doing wrong? I've tried Getting 2 divs on the same line and this doesn't work either.
Any help would be super appreciated!
-Stu
To place the search-position and staffAppButtonPlaceholder divs on the same line, first float the search-position div:
.search-position {
float: left;
}
Then add some content to the placeholder:
<div id="staffAppButtonPlaceholder" class="staff-app-position">Content</div>
Finally, increase the width of the containing div to allow the elements to fit side-by-side:
.search-and-staff-app-button {
width:760px;
Both divs will now be aligned horizontally.
http://jsfiddle.net/jzefu2j9/1/
Here is a little example, maybe it will help you. I used flexbox, which in my opinion is a great solution for aligning.
.search-and-staff-app-button{
display: flex;
background:red;
align-items:center;
}
.search-and-staff-app-button > div{
box-sizing:border-box;
display:block;
flex:1 50%;
align-self:center;
padding:1em;
}
http://jsfiddle.net/pulamc/u9nLwacs/
add style="position:relative" to your outer div. Then make the inner div's style="position:absolute;left:0". You will have to manually set the left value for each of the divs. The downside is that you will have to know the width of the other divs on the same line.
Am having 2 label inside a td and am trying to make the alignment work
Is it possible ?
Here is Fiddle for the same explaining issue and how i need.
jsFiddle
<tr>
<td><label >Some Label Test:</label><label>Some Label Test:</label></td>
<td>
<label >Some Label Test:</label>
<label >here is the long test which exceeds the width and comes to second line but i want it like it should start below after test: instaead from some</label></td>
</tr>
Am looking for second label inside if the length is long it is coming to next line and starts from where the second label has started.
Here is a simple div usage of how to get what you want. http://jsfiddle.net/KHAJz/3/
HTML
<div class="container">
<div class="first">Some Label Test:</div>
<div class="first">Some Label Test:</div>
<div class="first">Some Label Test:</div>
<div class="text">here is the long test which exceeds the width and comes to second line but i want it like it should start below after test: instead </div>
</div>
CSS
.container{
width:700px;
height:60px;
display:inline-block;
}
.first{
width:60px;
height:60px;
display:inline-block;
float:left;
}
.text{
width:300px;
display:inline-block;
float:left;
}
What you do is make a container that holds everything together so that the tables or divs don't go everywhere.
If you don't want (or cant) change your DOM,
just add this to your CSS
label
{
display: inline-block;
height: 100%;
}
See this Working Fiddle
But if you can change your DOM, I'd recommend you to leave the Table layout and reconstruct your layout with divs. -like in Keith's answer.
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/
I have the following:
<div style="width:100%;">
<table>
<tr>
<td style="width:30px;">hi</td>
<td style="width:40px;">hi</td>
<td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>
<td style="width:25px;">hi</td>
</tr>
</table>
</div>
What I want to happen is for this table to grow to 100% possible of the outer DIV. Problem is, that the table, with a lot of text inside, ID='lotoftext' is causing the table to grow to a width bigger than the outer div which then breaks the page.
Any ideas? thanks
can you use max-width? You might need to put a div inside that specific TD and give that the max-width
Unless it is tabular data, you should build it using DIVs and CSS. You should be able to achieve what you want with less of a headache this way.
AnApprentice, to achieve this layout using DIV's and CSS (alternate option to using tables) you could approach the situation like this:
CSS:
#body_container{
max-width:700px;
}
.data-container{
background-color:#ccc;
zoom:1;
}
.data-content_a{
width:30px;
float:left;
background-color:#3FF;
}
.data-content_b{
width:40px;
float:left;
background-color:#CF0;
}
.data-content_c{
width:25px;
float:right;
background-color:#9FF;
}
.data-content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 26px 0 71px;
clear:left;
display:inline;
}
.clear{
clear:both;
padding:0;
margin:0;
}
HTML:
<div id="body_container">
<div class="data-container">
<div class="data-content_c">4</div>
<div class="data-content_a">1</div>
<div class="data-content_b">2</div>
<div class="data-content_lotsoftext">lots of text goes here!</div>
<div class="clear"></div>
</div>
</div>
The #body_container (or outter container) can to set to any width or no width. The left margin on the .data-content_lotsoftext is the combined width of .data-content_a and .data-content_b (70px + 1px to be on the safe side) and the right margin on .data-content_lotsoftext is the width of data-content_c (25px + 1px to be on the safe side).
By not assigning a width to .data-content_lotsoftext it will automatically stretch to be full width. display:inline helps it sit better in ie6.
Tested in Firefox, Chrome, IE8, IE7 and IE6 (IE6 and 7 are a little glitchy - if anyone could help refine the CSS to get it to work perfectly in IE6 and 7, please shout out!)
Hope this helps.
Dan
The scenario you are describing is simply not suited for a table. A table should only be used when displaying tabular data. You should be using some other kind of html elements to build your structure and style it with CSS.