This piece of code works, but I would like to know if it is the best way to place a dom element on the top right of a container.
the prerequisites are the following:
1) the DOM cannot be changed.
2) the CSS code with comment with original code cannot be changed.
demo: http://jsfiddle.net/jBme9/1/
<div class="control-group">
<div class="controls">
<div class="prize-item">
<div class="control-group ">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="form-prize-item-name" value="prize2">
</div>
</div>
</div>
<button type="button" class="btn" data-toggle="collapse" data-target="">
Edit
</button>
</div>
</div>
.controls button{
float: right;
position:absolute;
top:0px;
right: 0px;
}
/* original code */
.control-group {
background-color: #D9EDF7;
padding: 13px;
margin-bottom: 20px;
}
/* original code */
input {
box-sizing: border-box;
height: auto;
padding: 8px 4px;
width: 100%;
}
You can simply do what you have done, but if you want to place that somewhere in the middle of your web page you need to have an outer div with position: relative;
First of all things you wont need :
1) float: right; /* In .controls button */
2) You have a class called .btn so you don't need .controls button simply use .btn else your styles will apply to all buttons in .controls
3) button doesn't require type=button attribute...(Unless you are not using it to reset/submit anything than you need to specify)
My Fiddle
Looks fine. But you don't need float:right line. position:absolute will do.
Your absolutely positioned element (the button) needs context for its absolute positioning, this can be done by declaring a parent element of it with position: relative. If you do not do this, the button will be positioned absolutely relative to the outer most parent element, ie the html tag.
Also your CSS has a redundant property, the float. No float is needed when absolutely positioning.
This is all you need:
position: absolute;
top: 0;
right: 0;
You can make element class like
input[type="button"]
{
float:right;
}
input[type="text"]
{
float:right;
}
or
input[type="text"], input[type="button"]
{
float:right;
}
Related
An Example: Only DIVs, that containing a LABEL should get the style text-align: right
Following try did not work:
div label:only-child {
text-align: right;
}
Not the label but the div should get this style.
you can use this way
div class="test" style="text-align:left"
div class="test" style="text-align:right"
The solution is to set the width of the label and display property to block. Here's the code
div{
width: 500px;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
}
div>label:only-child{
text-align: right;
width: 100%;
display: block;
}
<div>
<label>adfasdf</label>
</div>
this cannot be done with CSS .
CSS = Cascading Style Sheets so by definition you can select elements from top to bottom of the HTML structure, not the other way around.
so you can't select a parent depending on it's children
you can do this with JQ , there are a number of ways to do it but this would be one of them :
$( "div:has(label)" ).css({ "text-align":"right" });
.div {
height:50px;
border:2px solid red;
margin:2px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<label>Has Label</label>
</div>
<div class="div">
<p>
i am NOT a label
</p>
</div>
<div class="div">
<label>Has Label</label>
</div>
You can't style parent element based on child element using CSS.
Since, it seems that you are trying to align the label element to right, you can do that using float as shown below:
div label:only-child {
float: right; /* instead of text-align: right */
}
Updated (parent has flexbox layout):
div label:only-child {
flex: auto;
text-align: right;
}
You cant't do this in CSS only. Well, of course you can add class to div but there is no parent selector.
But there will be in the future (selectors lvl4 - see last row of selectors overview): https://www.w3.org/TR/selectors4/
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
I have some divs and buttons inside a div placed in a div with position: absolute, as in this jsfiddle
The code:
<div class="buttons">
<div class="button-line">
<div>Edit</div>
<div>Cancel</div>
<input type="submit" class="wd-edit" value="Submit">
</div>
</div>
Where:
.buttons {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 100%;
}
.button-line > * {
display: inline-block;
}
See the jsfiddle for complete content.
My problem is that whether I use display: inline-block of float-left for the childrens of the div .button-line, the buttons inside wrap, and I don't want that. I want the width of the .button-line div to adapt to the size of it's content, and all the buttons on the same line.
Thanks.
Try adding:
.button-line.b3 {
white-space:nowrap;
}
jsFiddle example
Is this the crux of what you need? Fiddle me this
Basically the meat of the operation is done with
white-space:nowrap;
I've taken off all of your styling so you can see what's going on more clearly.
I'm not a CSS expert. I'm trying to place an <input type="button"> in the center of an <img> and I'm having some trouble doing so. Here's a fiddle and here is my HTML:
<div id="avatar">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
<p>Text</p>
</div>
I want the input to be displayed over the image, also, the text need to be at the right. I tried using:
img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}
But it only works on chrome / safari, on other browsers, the button is placed after the image and not in front of it.
What is the best way to do this?
Obs.: The space where the button is, needs to be empty, or else, the text will move up.
This is how it's displayed on chrome:
This is how it's displayed on firefox:
You need to specify the x and y positions on an absolute position. Change the css for input to this:
input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
There is a simple and clean method for doing this code. The trick is to use the DIV tag to contain and position everything in place.
Use a main DIV to contain everything and give it the position:relative property.
Place the img and input tags in a single DIV and assign this DIV the float:left property.
Using CSS to select the P tag and float it to the left. This will position the text beside the DIV containing the img and input.
Now assign the input tag the position:absolute property while using the properties TOP & LEFT to postion it into place.
Here's an example:
<div id="avatar-container">
<div id="avatar-image-btn">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
</div>
<p>Text</p>
</div>
<style>
#avatar-container { position: relative; }
#avatar-container p { float: left; }
#avatar-image-btn { float: left; }
#avatar-image-btn img { }
#avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>
See, clean and simple, works every time and is multi-browser compatible.
*The margin property can cause a mess when used without caution. Best practice is to use it for stacking tags in divs and not for positioning with large gapping margins.
use z-index
input { position: absolute; margin:140px 0px 0px 130px; z-index:2}
this is pushing your button one layer up
after understanding the question correctly here is a solution
img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}
as mentioned bellow in comments the problem was in positioning
You may add position:relative for #avatar and give #btnAvatar top:0; left:0;
This should do it: http://jsfiddle.net/a6tA7/9/
I would recommend you use top: and left: to position the input element rather than margin:
Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link.
I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.
HTML Code:
<div class ="main-div">
<div class = "wrapper">
<div class ="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div class ="second-div">
//this only appears after clicking on a link
<form>
<textarea>
</textarea>
</form>
</div>
</div>
</div>
CSS:
div.wrapper {
width:inherit;
float:left;
bottom:6px;
position:absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div {
padding-top: 2px
}
div.main-div{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
padding:8px 13px 4px 13px;
min-height:61px;
position:relative;
}
Thanks in advance for any help.
I think the solution entails doing the following. Have a wrapper div:
<div id="my_wrapper">
content
</div>
Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.
<div id="my_wrapper">
<div id="visible_item">Item</div>
<div id="may_become_visible">Not Visible Now Item</div>
</div>
Then you can show/hide as necessary and position the inside content correctly.
Ok, with you updated question I believe I've created what you're looking for with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
HTML
{
margin: 0px;
padding: 0px;
height: 100%;
}
BODY
{
margin: 0px;
padding: 0px;
height: 100%;
}
div.first-div
{
width: inherit;
float: left;
bottom: 60px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div
{
display: none;
position: absolute;
float: left;
bottom: 0px;
}
div.main-div
{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
min-height:61px;
position:relative;
float: left;
height: 100%;
}
</style>
<div class="main-div">
<div id="firDiv" class="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div id="secDiv" class="second-div">
//this only appears after clicking on a link
<form>
<textarea></textarea>
</form>
</div>
this is my content
</div>
</body>
</html>
Now, what this does is absolute position both the first and second divs at the bottom of the page, positioned so that they don't overlap each other. If you don't like the fact that the first div is up so high from the bottom of the page, you can modify the first-div style as such:
div.first-div
{
width: inherit;
float: left;
bottom: 20px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
and then update the link to
<span>my link</span>
Basically, what you're doing there is changing the first div to be closer to the bottom of the page but then moving it when the link is clicked so that there's more room for the second div.
It's not solving the underlying issue of displaying a relative positioned div under an absolutely positioned div, but hopefully is resolves your specific problem.
Just a guess, but have you tried adding the style clear: both to the second div? I doubt it will help, but it might.
You can also try adding a top margin for the second div that is equal to the height of the first div. Basically, something like:
<div id="second-div" style="padding-top: 40px">
Where 40px is the height of the first div. The issue there is that you'd need to know what the height of the first div is and if it is variable then this approach will not help.