I am trying to float a button next to a jQuery accordion panel. Currently it looks like this:
Here is the markup
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" style="width: 80%;" role="tablist">
</div>
<div id="export" style="width:20%">
<form method="post" action="/InstrumentList/Export">
<div class="button-container">
<button id="btnSubmit" class="ui-button-text-only ui-button ui-igbutton ui-widget ui-widget-content ui-corner-all ui-state-default" style="width: 100%;" value="Export" type="submit" role="button" aria-disabled="false">
</div>
</form>
</div>
<div id="grid">
</div>
I have put inline styling in at the moment but I will move that out to a CSS file once I have managed to get it working. The grid div is represented in the picture by the light grey row which needs to stay positioned under the dark grey rows.
I assume that you meant to close the #accordion div before opening the #export div.
Your question preempts the answer: you should be able to simply put a float:left property on each div.
#accordion {
width: 80%;
float: left;
}
#export {
width: 20%;
float: left;
}
You may need to also ensure that for both divs the margin-left and margin-right are both set to zero.
Update: to ensure that the #grid does not overlap the floating elements, you should use clear:both on it.
If I'm understanding the question correctly, you need this:
#accordion, #export {
float: left;
}
#grid {
clear: both;
}
Related
I'm doing this simple web page and I'm having a problem while trying to set float:left to a bunch of div's. I created the class aluno and applied float:left, the problem is that other div's from other classes following this one also got floated to the left. What can I do to prevent this ?
My html code:
<div class ="main">
<div class = "aluno">
<p>
Cena
<button type="button" onclick="show('img')">+</button>
</p>
<p><img id="img1" src="img/img1.png" ></p>
</div>
<div class = "aluno">
<p>
Cena
<button type="button" onclick="show('img')">+</button>
</p>
<p><img id="img" src="img/img.png"></p>
</div>
<div class = "teste">
</div>
My css code:
.aluno{
float:left;
padding-left: 70px;
width: 300px;
margin-left: auto;
margin-right: auto;
}
You can use float:none on your other classes.
Add clear:both to .teste.
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them.
.teste{
clear: both;
}
JS Fiddle: http://jsfiddle.net/LhtrC/
I am trying to stack to elements : div and span.I want them to be ordered as a list and it is fine but when the length of the text in the span gets changed it also changes the position of the div above it.
Here is an example:
<div style="top: 25px; left: 200px; display: block;">
...
<span id="selectedSearchedItem">This is a span that changes its text dynamically</span>
http://jsfiddle.net/W4ZNJ/
I want the part with the button and the textbox to be always at the same offset from the right border and when the text length changes not to afect the controls above.
float it to right and add a margin to right
set positioning property to fixed.
also set overflow attribute equal to hidden or scroll.
Apply a style like this:
style="float:right; margin-right: 5px;"
EDIT:
You can wrap your div and span inside a , like this:
<ul>
<li>
<div class="block-controls">
<span id="navigation-text-matches-title" style=" width:auto;">Menu</span>
<input id="button1" type="button" style="width: 90px; " value="Button1" />
<input id="textbox1" type="text" style="width: 50px; left: 50px;"/>
</div>
</li>
<li>
<span id="selectedSearchedItem">This is a span that has dynamically changing text</span>
</li>
</ul>
I believe this is what you want. As Lajos Arpad mentioned you add the float/margin-right to position the button/textbox.
The only extra thing i'm adding here is a div element between your div/span with the clear property set to both.
<div class="block-controls">
<span id="navigation-text-matches-title" style=" width:auto;">Menu</span>
<input id="button1" type="button" style="width: 90px; " value="Button1" />
<input id="textbox1" type="text" style="width: 50px; left: 50px;"/>
</div>
<div class="clearFloats"></div>
<span id="selectedSearchedItem">This is a span that has dynamically changing text</span>
<style>
.block-controls
{
float: right;
margin-right: 5px;
}
.clearFloats
{
clear: both;
}
</style>
fiddle
If you want to find a little bit about how clear:both works i suggest looking at:
What does the CSS rule clear: both do?
I want to add buttons beneath a <h1> tag, but don't know what CSS to use to make it so. The image below shows a likely scenario, with the "Main_Page" title and the buttons forming each part of a separate div. I tried using the margin-top property, but wish to know which other techniques can I use.
I used the following CSS for the buttons div, while nothing for the name div.
#wiki-page-head .buttons
{
float: right;
margin-top: -30px;
text-align: right;
max-width: 500px;
}
<div style="display:inline;">
<h1 style="display:inline;vertical-align:-3px;" >Ton titre</h1>
</div>
<div style="display:inline;">
<input type="button" value="Edit"></input>
<input type="button" value="Discussion"></input>
<input type="button" value="History"></input>
</div>
With this code, you should get a result like that the image below, is that what you want ?
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>
When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
i had a similar problem with positioning a hoover-text centered below a floated image button list.
for me the solution was using the "fixed" value for the "position" property
position: fixed
then you can position your error message from top left of the body again.
i use another wrapper div to position all hoover texts center center.
found the solution here:
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
stylesheet in less format (see http://lesscss.org/)
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
I have found a solid CSS solution here:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
Let’s add another parent and move the position:relative one level up
(or, in your context, you could maybe simply use an existing upper
parent).
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result: