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/
Related
I realize that I'm using Bootstrap's form-horizontal class in a way that isn't quite documented, but I still don't understand why this doesn't work.
If I create a div with the form-horizontal class and add a couple of controls to it with widths specified using Bootstrap's grid layout classes, it works fine. For example, this displays as I'd expect:
HTML
<div id="container">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-11">
<input type="text" class="input-sm form-control" placeholder="Enter some text">
</div>
<div class="col-sm-1 text-right">
<button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-info-sign"></span></button>
</div>
</div>
</div>
</div>
CSS
#container {
padding:10px;
background-color: gray;
}
The result is form which spans the full width of the page, with 10px of padding all around. Ideal, except that I want to contain the form within a div with a fixed width, and that's where it goes wrong.
Simply adding width:400px; to the #container class in the CSS causes the form to overflow the width of the div.
Is this a bug? How can I fix this so that the form stays within its container?
I've created an example fiddle here: http://www.bootply.com/pP9gsJQipi. Note that simply removing the width value from the #container class causes the form to display as desired, albeit at 100% width of the page.
Simply add a width of 100% to the .form-group. The .form-group will now size 100% according to the width of the #container.
CSS
#container {
padding:10px;
background-color: gray;
width: 400px;
}
.form-group {
width:100%;
}
Bootply
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 ?
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;
}
So I have a bunch of elements that need to have a specific width, height and padding and need to be centered within their parent element:
<div class="pages">
<a>Page 1</a>
<a>Page 2</a>
<a>Page 3</a>
</div>
How do I do this? I don't know how many elements there will be so .pages can't have a defined width so margin:auto; won't work.
In the stylesheet or style tag:
margin-left: auto; margin-right: auto
You can wrap all those in one single div and center this one, this will be the usual approach I believe.
<div id="wrapper" style="margin-left:auto; margin-right:auto">
<div id="page1"> ... </div>
<div id="page1"> ... </div>
...
</div>
If you have working code, please post it.
It sounds like what you're looking for is margin: auto on the elements you want to center, like so:
#my_div {
margin: auto;
}
CSS CODE
div {
display:table-cell;
width: 200px;
height: 200px;
vertical-align:middle;
background: red;
}
HTML CODE
<div>
Hello...This is Vertically Centered!
</div>
<div>
Hello...2!
</div>
<div>
Hello...3!
</div>
SAMPLE DISPLAY
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>