How can we have the text "Create New Position" be vertically centered?
HTML/CSS is below.
Adding margin-top:5px to the "Create new.." div helps but it seems hacky.
<div style="margin-top:5px">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
The following will work based on creating a line-height which is equivalent for both items.
HTML:
<div class="row">
<span class="left">Create new position</span>
<span class="right"><input type="button" value="Save" />
</div>
CSS:
/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */
.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }
The trick is to set the .row containing DIV to be 24px tall, and also set the contained SPAN elements to have a line-height of 24px. By doing this, you tell the browser how much vertical space to take up for the line of text.
Note, however, that 24px is not the important part - the important part is identifying how tall your button is, which is based on your CSS and your selected font for the button itself.
The reason the example I'm giving you works to vertically center in this case is based on the EXAMPLE ONLY CSS I put in at the top - which says the font-size should be 12px. The default browser sizing (at least in Chrome) is then going to provide a little extra margin and padding around the button, as well as a border - which results in a total height of roughly 24px, and this appearance:
The border is created by the example CSS also, and is only there to show you that the vertical alignment is correct. Once you remove .row { border: 1px solid #ccc; }, it will disappear.
Here is a JSBin which shows it working:
http://jsbin.com/otekil/1/edit
The below may help you.
<div align="center">
</div>
So it would look like this maybe:
<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
Make the line-height of the interior div the same height as the height of the exterior div.
Example:
<div style="margin-top:5px; height: 100px;">
<div style="float:left; line-height: 100px;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
Slightly different approach but you don't need the floats, vertical-align should work fine in this instance IMO:
<div>
Create new position:
<input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>
This method should work in all browsers, is stable, and allows you to easily choose the object to which you want your content centered. The empty container is the only problem I have with this method, but I can easily overlook it when comparing the pros/cons of other methods.
Solution:
You use a div at half of the parent's height to push your content block (push_to_center class), then reduce it by half the content height (content class).
In-line style declaration
<div style="float:left; height:50%; margin-bottom:-55px;"></div>
<div style="clear:both; height:110px; position:relative; width:200px;">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
</div>
Complete HTML page (see it working):
<html><head><title>Test Center Div</title>
<style>
.push_to_center {float:left; height:50%; margin-bottom:-55px;}
.content {clear:both; height:110px; position:relative;}
</style>
</head>
<body>
<div class="push_to_center"></div>
<div class="content" style="width:200px; height:110px;">
<div style="float:left;">Create new position</div>
<div style="float:right;"><input type="submit" id="x" value="Save"></div>
</div>
</body>
</html>
To exclude the Save button from centering simply move it out of the Content classed div (put it earlier in the page flow if you want it above, and below in the page if you want it at bottom):
I always used such trick:
style="height: 30px; line-height: 30px; vertical-alignment: middle;"
Having fixed height plus the same height as line height plus middle vertical alignment.
Maybe the above are better answers, I'm posting this because it's simple and worked for me. :)
Addressed this by adding margin-top:4px to the "Create Position" div. This was the only solution I could get to work!!
This will work.....
<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
<div style="float:left;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
</td>
</tr>
</table>
Related
How to make a div stop wrapping?
Set this style on your div. It works in Chrome and IE. I haven't tested other browsers.
overflow: auto;
Do you mean you want <div class="objectives"> to appear below <div class="icon">? If so, div.objectives { clear: left; } should do the trick.
Or do you want the entirety of <div class="objectives"> to appear alongside <div class="icon">? If so, div.objectives { float:left; } should make it happen. You may also need to specify a width on div.objectives. Alternatively, remove the float code and set both div.objectives and div.icon to { display: inline-block; vertical-align: top; }.
This works just edit the code and replace it with the code below
<div class="icon"><img align="left" alt="" src="/resource/uploads_scope/issues/090113/090113_pairedText_featuredSkills.png"></div>
<div style="overflow: auto;">
<h5>Featured Skills:</h5>
<p>Compare and contrast; vocabulary; shades of meaning.<br>
<strong>Other Key Skills: forming and supporting a claim, inference, author’s craft, key ideas.</strong></p>
</div>
<div style="clear:both;">
</div>
</div>
Based on my earlier thread I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.
With my short text the two divs align correctly, but when I add loner text it drops below the image. Can anyone explain why this is happening and how do I fix it?
My JSFIDDLE
HTML:
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
CSS:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
padding:5px;
float: left;
}
div.right {
float: left;
}
.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
Floats expand to try to encompass their content. They generally expand up to the width of the containing region, regardless of how they are positioned. That is why it is going to a new line when the text is really long.
For what you are doing, I believe you want the image to the left of some text. This is done by having the outer region set with clearfix CSS (to always encompass all floats):
.container {
overflow: hidden;
min-width: 1px;
}
/* IE7+ */
*+html .container {
min-height: 1%;
}
Then, only float your image to the left. Do NOT float your content. Add margins around the image as desired. So something like:
.left {
float: left;
margin: 0 10px 10px 0; /* 10px on right and bottom */
}
The content in the div will then act like you are expecting.
Remove the float rule on the long text (jsFiddle example). When en element is floated after another floated element, it can't come before it vertically.
<div>
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
See the W3 for the long version:
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
Remove the float:left; on the rule and it will work. However, you may want to improve and test in ie 6+.
You have to set max-width attribute to restrict your text form taking as much space as available and to get maximum space its going to next line.
http://jsfiddle.net/a6BbD/1/
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
<br>
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some short text here</div>
</div>
</div>
The recommendation says you should always set width on floated elements.
the below link has great material to understand floats..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div>
<div id="b" class="fif">text2</div>
</div>
As in above code I have a contenteditable div and many divs inside it (child divs). Number of child divs vary dynamically and also the content between div tags. I want text1 and text2 (i.e. content between div tags) to be displayed on same line, without any blank space in between. Also while typing in contenteditable div if I press ENTER key it should go to next line.
I tried float:left but it does not allow me to go to the next line when I press ENTER key while typing in contenteditable div. display:inline, span when used show blank space in between 2 div contents. I tried using flex from http://www.w3.org/TR/css3-flexbox/ but didn't get desired output.
Just make the <div>s have display: inline or display: inline-block and remove the white space between them in the HTML source.
Whether you use inline or inline-block depends on how you want content within the divs to be laid out. Here's an MDN article on the subject.
Demo: http://jsfiddle.net/timdown/GVZPX/
CSS:
.fif {
display: inline; /* Or inline-block */
}
HTML:
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>
<div>
<div style="display: inline-block;">1</div>
<div style="display: inline-block;">2</div>
</div>
use display:inline for the inner div
#test div{
display:inline;
}
Answering this question more than 5 years after it was originally posted, since none of the answers barring Tim Down's strike at the actual problem. Elaborating it further, here is what happens when you inline-block two elements:
The white space between the two inline block divs is expected. When you inline an element (or inline-block in this case), you are in affect instructing the browser to put all the elements on the same line side by side. By doing so, you are in affect treating your divs equivalent to the white-spaces on the line (space/tab etc) as they share the line space.
In your snippet, you have 4 space characters between the closing div tag (</div>) and the next opening <div> tag. Browser rendering engine shrinks multiple spaces into a single space and that single space takes up the extra character which is what you are observing in this case.
So, once you understand the above, you can easily solve this by adopting one of the many workarounds like:
<div id="a" class="fif">text1</div><!--
--><div id="b" class="fif">text2</div>
or
<div id="a" class="fif">text1</div
><div id="b" class="fif">text2</div>
or
<div id="a" class="fif">text1</
div><div id="b" class="fif">text2</
div>
The last one is a invalid XML, but browsers do not barf at this.
Your fiddle is forked with the above workarounds here: http://jsfiddle.net/AshwinPrabhuB/otavbncr/1/
Well
.pad {
background-color: #eee;
padding: 4px;
overflow:hidden /* first */
}
.fif {
display: inline-block;
margin: 0;
padding: 4px 8px;
float:left /* second part */
}
jsFiddled here
I'm not sure I fully understand, but this might help: http://jsfiddle.net/UwZsm/3
.fif {display: inline-block; margin: 0 -4px 0 0;}
I tested out an idea, and it worked for what you are talking about I believe.
<html>
<head>
<title>test</title>
<style>
.fif{
padding:0px;
float:left;
}
</style>
</head>
<body>
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div>
<div id="b" class="fif">text2</div>
</div>
</body>
</html>
Hope that helps!
Ok I figure it out if you have access to the html code.
<div id="test" class="pad" contenteditable="true">
<table>
<tr>
<td>
<div id="a" class="fif">text1</div>
</td>
<td>
<div id="b" class="fif">text2</div>
</td>
</tr>
</table>
</div>
<style>
.pad {
background-color: #eee;
padding: 0px;
overflow:hidden
}
.fif {
display: inline-block;
margin: 0;
padding: 0;
}
table,td,tr{
padding:0;
}
#a {
background-color: #ddd;
}
#b {
background-color: #ccc;
}
</style>
http://jsfiddle.net/hari_OM/4GfcJ/2/
Here it is without any space.
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>
Ok so I'm trying to align an image(which is contained in a div) and some text(also contained in a div) on the same line, without setting width for the text, how can i do it? This is what I have so far.
<div id="container">
<div id="image" style="float:left;">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
</div>
When the text is short, the image and text can be fit into the same line, but my text is pretty long, and it automatically jumps on another line below the image.
Basically, now it's this: http://puu.sh/MPw2
I want to make this: http://puu.sh/MPvr
I'm been trying to solve this problem for like 3 hours I'm so noob please help? :S
Floating will result in wrapping if space is not available.
You can use display:inline and white-space:nowrap to achieve this. Fiddle
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<img src="tree.png"/>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
A very long text(about 300 words)
</div>
</div>
Try
<img src="assets/img/logo.png" align="left" />
Text Goes here
Simple HTML Attribute:
align="left"
Other values for attribute:
bottom
left
middle
right
top
I know this question is over 6 years old, but still, I would like to share my method using tables and this won't require any CSS.
<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>
Cheers!
Happy Coding
To get the desired effect, you should place the image tag inside the same div as your text. Then set the float: left attribute on the image. Hope this helps!
I was working on a different project when I saw this question, this is the solution I used and it seems to work.
#[image id] , p {
vertical-align: middle;
display: inline-block;
}
if it doesn't, just try :
float:right;
float:left;
or
display: inline instead of inline-block
This worked for me, hope this helped!
Method1:
Inline elements do not use any width or height you specify.
To avoid two div and use like this:
<div id="container">
<img src="tree.png" align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
<style>
img {
display: inline;
width: 100px;
height: 100px;
}
h1 {
display: inline;
}
</style>
Method2:
Change your CSS as follows
.container div {
display: inline-block;
}
Method3:
It is the simple method set width
Try the following css:
.container div {
overflow:hidden;
position:relative;
width:90%;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.image {
width:70%;
display: inline-block;
float: left;
}
.texts {
height: auto;
width: 30%;
display: inline;
}
Try
<p>Click on <img src="/storage/help/button2.1.png" width="auto"
height="28"align="middle"/> button will show a page as bellow</p>
It works for me
From another answer :
<table>
<tr style="background-color:white">
<th><b>To solve your doubts </b></th>
<th><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" style="width:150px" style="display:inline-block; "/></th><th style="float:right"></th>
<th><b> has the requisite clout.</b></th>
</tr>
</table>
Demo:
:D A little cheesy but, I thought, why not.
I built on the last answer and used display:table for an outer div, and display:table-cell for inner divs.
This was the only thing that worked for me using CSS.
Just set the img css to be display:inline or display:inline-block
U wrote an unnecessary div, just leave it like this
<div id="texts" style="white-space:nowrap;">
<img src="tree.png" align="left"/>
A very long text(about 300 words)
</div>
What u are looking for is white-space:nowrap; this code will do the trick.
<div id="container" style="display: flex;">
<div id="image" style="float:left; margin-top: 10px">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
use display flex and give margin-top(10 is approximate), please remove the float and give width to both div.
I'm sure this will be ridiculously simple, but whatever... I'm trying to display a text area with a button to its right, similar to how StackOverflow displays a comment field with button when one clicks the 'Add Comment' link...the problem I'm experiencing is with the button alignment; it appears to align at the top right of its div (see image), I want to align it at the bottom left. I've tried using text-align, align, nothing works to move that pesky button, I used padding-top to move the button down, but padding-right appears to have no effect, but there's got to be a better way than padding. I need it to be cross-browser compatible as well.
Here is the html/css I'm using...
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input type='submit' value='Add Comment'/>
</div>
</div>
The reason why it is not adjacent to the textarea is because the div encompassing the text area is too large. If you inspect element on Chrome, you will notice where all the elements are.
I'd suggest you do not put them in separate divs if you want them stuck together.
<style>
.newComment {
position: relative;
width: 475px;
background-color: white;
}
</style>
<div class='newComment'>
<textarea style='border:1px solid #888; overflow:auto' rows='3' cols='40'>comments</textarea>
<input type='submit' value='Add Comment' />
</div>
You've set the widths of the container divs but you haven't specified the height, so your padding is not taking. I've provided a sample below so you can visually see what is happening...
http://jsfiddle.net/g6JSU/
Below is a possible solution with the button aligned to the vertical center:
http://jsfiddle.net/g6JSU/1/
try this
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input style="float: left; margin-top: 20px;" type='submit' value='Add Comment'/>
</div>
</div>