I am into designing my page and I've got troubled aligning the header.
As you can see here:
I wanted the "Add" will align with the employee list. How would I do that?
By the way here's the html code:
I've used bootstrap. But a native css suggestion is still good.
<div class="title">
<h4>Employee list</h4>
<span class="pull-right">Add</span>
</div>
Thanks
Move the Add to before the <h4>. When you float right, the target element should be before the other element if you want them to align.
Demo
HTML
<div class="title">
<span class="pull-right">Add</span>
<h4>Employee list</h4>
</div>
CSS
.pull-right {
float:right;
}
give h4 width auto and float left
CSS
h4
{
float:left;width:auto
}
and span float right width auto
.pull-right
{
float:right;width:auto
}
Related
I have this simple HTML:
<a style="display:block;text-align:right" href="link.com">Test Link</a>
I want to place a link to the far right of a parent DIV. However, I tried the above code but it leads the link to fill all the space meaning it's clickable across the whole width of the div.
The only ways to avoid this are to give a fixed width to the link or to wrap the link in another DIV. Is there any other way? Or to float the link but it will break the layout
You can use a float for 'floating' it to the right side of your div.
<a style="float:right" href="link.com">Test Link</a>
See this fiddle:
http://jsfiddle.net/wstmrtgz/
JSFiddle example
I've used display:inline-block and float:
.parent {
display:inline-block;
width:100%;
}
.link {
display:inline-block;
float:right;
text-align:right;
}
EDIT: Having seen your comment about not being able to use floats, you can also do this using display:inline-block and fixed widths.
float will fix this
dont forget the clear the float !
<div style="width: 200px; background-color: red;">
<a style="float:right;" href="link.com">Test Link</a>
<div style="clear:both;"></div>
</div
see the difference with and without the clear in the following fiddles!
With clear
http://jsfiddle.net/j9q8jgvm/
without clear
http://jsfiddle.net/j9q8jgvm/
I'd like to position two DIVs in another container so that the first is against the parent's left edge and the second is against the parent's right edge. Here's the markup I have so far:
<div class="parent">
<p class="flushleft">
This paragraph should be aligned left.
</p>
<p class="flushright">
This one should be aligned right.
</p>
</div>
How can this be done without using floats? I'd like to keep everything in the normal flow, if possible. Thanks!
Use display: inline-block in your css code.
Using your HTML, here's the CSS:
.flushleft{
width:50%;
display:inline-block;
}
.flushright{
width:50%;
display:inline-block;
}
Or since they're both identical - if you don't intend to style them further - you can use one class.
I am having trouble making the <h2 class="feature_description_content"> vertically align with the image to it's left. You can see that it's quite a bit lower than the top of the image, and I can't seem to find the css that is responsible for it.
Here's an image:
Here is the code:
<div class="feature feature-item-248">
<img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p>
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
<p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p>
</div></div>
</p></div>
Thanks
This issues is must be due to default margin and padding of default HTML elements you must try out by setting
h2
{
margin:0px;
padding:0px;
}
and then change padding as required
Set its margin-top: 0; - simple :)
The image suppose to be floated to the left and cleared both ways, so text can be aligned properly...
img .main {
float: left;
clear: both;
}
How can I right align a button inside a div without wiping it from the Markup Flow with valid CSS and HTML? Is applying margin-leftthe only way to do this?
I have a structure like this
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
<button type="button">Enviar</button>
</div>
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
</div>
If I apply button { float: right } or button { position: absolute } the next div will get over the button. It happens that I just want to make the button position at the right side
what you want to read up on is clearing
if you have floated elements, they go out of page flow, but any element with clear:both will stay in page flow, but not allow anything on either side of it, floated or not.
in practice, adding a clear:both element after you floats makes things work the way you want them to.
.navContainer { text-align: right; }
#Matt is right. What you need to do is clear the div elements.
.navContainer {clear: both}
If you want your button aligned at the top of the containing div, you might have to move it before your div element of class "title".
I am facing problem while aligning two text, one in center and other text in right.
I used a Div to align it:
<div style="text-align:center">
<h1> Sample Heading</h1>
<div style="float:right; text-align:center">
sample link
</div>
</div>
When I used this my heading comes left, its not a centrally align properly please tell is this the correct way or is there any other way to handle this scenario.
Thanks
If you want the item to not mess with the layout, try absolute:
<div id="header" style="position:relative;text-align:center;"><!-- define relative so child absolute's are based on this elements origin -->
<div id="sampleLink" style="position:absolute; top:0px; right:0px; >Link</div>
<h1 style="text-align:center;">Heading</h1>
</div>
You do not need to use div's to do this, you can style the elements themselves. The < a > tag by default does not understand text-align, as it is an inline element, so I have placed the link in a paragraph, which accepts text-align. I have placed the two lines in a < div > tag with a small width so it is easy to see what is going on.
<div style="width:400px;">
<h1 style="text-align:center"> Sample Heading</h1>
<p style="text-align:right">sample link </p>
</div>
It works fine to me.
But if you have some issues with positioning of h1, try make it block: h1 { display: block; }.
On other hand, if you want to display h1 and a at the same line, you just have to put right-aligned a before h1.
For anyone using pug
To quickly align a link to the right, this seems to work:
html
head
style.
rite {
font-family: monospace;
font-size: 10pt;
text-align: right;
}
and then ...
rite
p
a(href='/logout' align=right) logout
Note that this won't work:
rite a(href='/logout' align=right) logout
And this won't work:
rite
a(href='/logout' align=right) logout
As #superUntitled explained. Great tip from #superUntitled.