The way I like for my code to displayed is
Name1
Name2 Jim
The way it is doing now is:
Name1 Name2 Jim
How can I change it so that it looks like the way I want it to?
CSS
.display-left {
float: left;
width: 200px;
text-align: left;
font-weight:bold
}
.display-right {
text-align: left;
}
HTML
<div class="display-left">Name1: </div>
<div class="display-right" > </div>
</div>
<div>
<div class="display-left">Name2: </div>
<div class="display-right">Jim </div>
</div>
Easiest way is to add a clear:left; to your .display-left class. And a float:left; to your display-right class
http://jsfiddle.net/f5cUx/3/
.display-left {
float: left;
width: 200px;
text-align: left;
font-weight:bold;
clear:left;
}
.display-right {
text-align: left;
float:left;
}
The "clear" property specifies on which sides other floating elements are not allowed.
I also just noticed you had wrapped each "row" in a div. In that case you could just put a new class on those "wrapper" divs that clears the float.
http://jsfiddle.net/f5cUx/4/
if you add:
display: block;
to your .display-left class, it would probably work. try it on!
Add display:block to .display-right; . This tells the HTML to say "please take up the whole line" . You could use <br> tags, but this would be good only for one example. After that it is a waste of code
You can also try adding clear:both; to display-right
This tells the HTML to say "break out of the float and always stay below the float"
put a <br> in your html after name1 but before name2 this should do what you want or try <p></p
Related
I'm trying to position two HTML elements with the CSS attribute float: right;, an input element next to it the metric unit of the input. So far I've tried placing the unit next to input without placing it in an element, also placing it in a p element, and both input and the element inside a div element; didn't work. I'd like to ask whether there's a way to stick an element next to another?
here's the code:
.caloriesinput {
position: relative;
float: right;
}
<div>
<h5>Calories</h5>
<div class="caloriesinput"><input type="text">
<p>kcal</p>
</div>
</div>
and here's how the code shows:
much appreciated for your time.
I think you must change the display of p tag so add this line of code to your CSS:
.caloriesinput p {
display: inline-block;
}
.caloriesinput {
position: relative;
float: right;
}
<div>
<h5>Calories</h5>
<div class="caloriesinput"><input type="text"<p>kcal</p>
</div>
</div>
I have the following html. I need to align the .faf-text fields to each other vertically without using a table.
<div id="faf-field-2" class="faf-field faf-field-input ">
<div class="faf-name"> Vendor </div>
<div class="faf-text"> Brocade </div>
</div>
<div id="faf-field-6" class="faf-field faf-field-input ">
<div class="faf-name"> Platform </div>
<div class="faf-text"> ADX </div>
</div>
<div id="faf-field-7" class="faf-field faf-field-input ">
<div class="faf-name"> Version </div>
<div class="faf-text"> 12.4 </div>
</div>
An example of what the layout should be like is below :
Vendor Brocade
Platform ADX
Version 12.4
Thanks
You can use the CSS display: table to make your elements act like a table.
Use display: table-row; for the container <div> tags to make it behave like a <tr> and display: table-cell; for the elements inside to make it behave like <td>.
Something like this:
.faf-field-input{
display: table-row;
}
.faf-field-input div{
display: table-cell;
}
.faf-name{
width: 80px; /*for testing*/
}
jsFiddle DEMO
Just use
float: left
for both classes.
An ex:
.faf-name{
width: 200px;
float: left;
/* other CSS may come here */
}
in the same way,
.faf-text{
width: 200px;
float: left;
/* other CSS may come here */
}
It would have been easier and clearer if you have provided jsfiddle. Hope this will work for you
Just Use this css property so faf-text fields to each other vertically without using a table.
.faf-field{display:table-cell;}
DEMO
From your code, it looks to me that you are displaying tabular data.
So it's perfectly good to use a table.
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
Morning,
I have the following HTML:
<div id="sah_padding">
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">✖</div>
</div>
You are working with [customer_name]
</div>
and I have the following CSS:
#sah_padding{
padding:10px 10px 10px 10px;
}
#sah_holder{
padding-bottom:10px;
clear:both;
}
#sah_name{
float:left;
width:50%;
}
#sah_logout{
text-align:right;
}
#logout_link{
color:#fff;
text-decoration:none;
font-weight:bold;
}
However my login link and Hello message aren't aligning correctly, the logout link is a few pixels below the hello message and I need them to be on the same horizontal line. What am I doing wrong?
if you set line-height :1 to #logout_link element, it should correct the alignment
(of course feel free to choose a different value to adjust it)
Give float to your #sah_logout also. Write like this:
#sah_logout{
float: left;
text-align:right;
}
Check this http://jsfiddle.net/QUNT2/
Check the line-height of your elements!!!
You need to set a float to #sah_logout as well:
#sah_logout{
float: left;
text-align:right;
}
You can even make it say, float: right. It's entirely your choice. Doing only a text-align: right will modify how the inner contents of the container behave, not how the div behaves within the flow.
Also, you might have a few problems with the parent div not wrapping correctly around the children divs (as all children now have float properties), so you might need to add another div, with clear: both set in its style:
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">✖</div>
<div style="clear: both"></div>
</div>
Instead of wasting time with block level elements why don't you simply use inline elements for both the "Hello" text and the logout link? That's what inline elements are supposed to do - stay in line with each other.
<div id="sah_padding">
<div id="sah_holder">
<span id="sah_name">Hello [agent_name]</span>✖
</div>
<span>You are working with [customer_name]</span>
</div>
Its is highly unlikely that you would need any of the CSS code you previously used for elements inside sah_holder unless you want to style them differently.
check it your updated html :-
<div id="sah_padding">
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">You are working with [customer_name]</div>
</div>
</div>
your updated css:-
#sah_padding{
padding:10px 10px 10px 10px;
}
#sah_holder{
padding-bottom:10px;
border:1px solid red;
overflow:hidden;
}
#sah_name{
float:left;
width:50%;
}
#sah_logout{
float:right;
}
.logout_link{
color:black;
text-decoration:none;
font-weight:bold;
}
or you can see the demo:- http://jsfiddle.net/WnecH/11/
I am trying to align a full name,picture and the post just like they do in most social networks (linked-in or facebook).But i cant align them the well.Can anybody please try to fill the gaps with necessary css commands?Thank you in advance.
<div>
<span class="picture"> <img src="/assets/images/rails.png"/></span>
user-full-name
<span class="post"></span>
</div>
css
.picture{height:40px;
width:40px;
}
.user-name{
margin-bottom:35px;
}
.post{ }
.inline_table{
display: inline-table;
position: relative;
}
is another property you might want to look at ... any element which has both position relative AND inline table .. will be aligned left to right butted up against each other.
so in this example:
<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">
will all be aligned along the same row
Here's a basic example: http://jsfiddle.net/GU2aM/ to get you started.
span.picture {
display: block;
float: left;
margin-right: 10px;
}