I have a div that has a fixed position on a page. It holds two inputs, but the inputs aren't equally spaced inside the div.
HTML
<div class="submit_content">
<input class="btn" value="Cancel"/>
<input class="btn" value="Save"/>
</div>
CSS
.submit_content {
position: fixed;
text-align: center;
width: 50%;
margin-left: 20px;
right: 20px;
background-color: blue;
padding: 10px;
}
.submit_content input {
width: 30%;
height: 25%;
margin: 0 auto;
margin-right: 20px;
text-align: center;
padding: 5px;
}
How do I make the two inputs inside the fixed div equally spaced? The jsfiddle demo shows them hovering closer to the left because i have the margin-right set. Otherwise the inputs would be immediately next to each other. They should be separated, but the spacing inside the div should still be equal
It's simple. The right button also has a margin-right, thus (since the left button does not have a margin-left like the right button), they have a little different spacing.
To get rid of this issue, add this line:
.btn:last-child { margin-right:0; }
jsFiddle demo.
You can achieve this through adding this css to your code:
css
.submit_content input {
width:30%;
height:25%;
margin: 0 auto;
text-align:center;
padding:5px;
margin:5px;
}
See it work in fiddle.
Add this to your CSS
.submit_content input.btn:last-child {
margin-right:0 ;
}
DEMO
Related
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I am new to webdesign, I am using Phonegap (HTML5) I centered my image horizontally this way:
.html
<div id="loginholder" >
<img id="image_person" src="img/icon_login.png" />
...
.css
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
...
#loginholder{
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
}
...
Please why my margin-top is not working?
You need to trigger layout. Add overflow:hidden to #loginholder
I'd add padding-top: 30px; to #loginholder instead and remove the margin-top: 30px; from #image_person:
CSS
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
}
#loginholder {
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
padding-top: 30px;
}
Check out this JSFiddle: http://jsfiddle.net/bazC4/.
Also, if you wanted the #loginholder the same size, just remove 30px from the height so it would be height: 170px;.
The margin might be collapsing with the parent, causing the 30px margin to appear above the loginHolder div (more on margin collapsing). To resolve this, you could do one of the following:
Add a border or padding to loginHolder; this separates the margins so they won't collapse.
Change to using padding-top on the image instead of margin-top.
Try wrapping it in a div:
JSFIDDLE:
http://jsfiddle.net/MBLKs/
CSS:
#loginholder {
width: 300px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#stabilizer {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
Images behave like characters, so entering them doesn't always work. In this case, the position of the wrapping div and the image offset each other, leaving the image in the middle. Now your margin-top and everything else should work.
I have a media query where my two buttons will go on opposite sides of the screen, so clearly I had to use the float property on the buttons.
At first I just put a left float on one button but that didn't centered the two buttons, so I went ahead and put a right float on the other. After doing so, the buttons didn't work.
I made a fiddle, and everything is in there... could someone help me?
Basically, what I want is that the two buttons are side by side and centered in the media query.
#media screen and (min-width: 600px) and (max-width: 1199px){
#mainButtons{
display: inline;
button{
width: 45%;
}
}
#oneButton{
margin-right: 10px !important;
.random-button{
float: left;
}
}
#twoButton{
.picky-eater-btn{
float: right;
margin-top: 0;
}
}
}
Fiddle: here
At first glance, I notice that your CSS syntax is invalid. You cannot put element styles inside another element style definition.
for example, you have button defined inside of #mainButtons. That is invalid.
Is this basically the result you want?
Fiddle - Fiddle link!
HTML
<div id="mainButtons">
<button class="btn btn-hg btn-warning one-button">BUTTON 1</button>
<button class="btn btn-hg btn-danger two-button">BUTTON 2</button>
</div>
CSS
#mainButtons {
min-width: 200px;
max-width: 800px;
margin: 0 auto;
}
#mainButtons button {
width: 46%;
float: left;
margin: 0 2%;
}
.one-button {
color: #FFFFFF;
text-align: center;
border-radius: 10px;
height: 150px;
box-shadow: 0px 10px #FF841A;
}
.two-button {
font-family:'Lato', sans-serif;
height:150px;
box-shadow: 0px 10px #D70A00;
}
.btn:active {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
There were a lot of issues with your code. I will try to explain all of them to you, but first, here is a working fiddle:
JSFiddle
1. You cannot have nested CSS elements:
This is invalid:
#buttons{
button{
width: 100%;
}
}
Instead, use concatenation:
#buttons button{
width: 100%;
}
2. Floating width:100% elements is essentially useless in your case
You were attempting to float #oneButton and #twoButton, which is correct, but as divs, which are block elements, they innately have 100% width, so setting the width of the buttons inside them to 45% will still make them appear on different lines.
#oneButton, #twoButton
{
width: 45%;
}
.one-button, .two-button
{
width: 100%
}
3. Apply margins to the parent divs, not the buttons
Since you want the floated divs to appear on the same line, you should apply all CSS affecting margin, width, padding, etc. to the parent, not the child.
Hopefully this works for you. Remember that clean CSS is good CSS and it makes it easier for us to help you.
Once again, here is the fiddle.
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I'm stuck with this its the problem
<div id="example1">
<div id="example2"> </div>
<div id="example3"> </div>
</div>
I need to align the div with id example3 under example 2 and if it's possible just in the footer and center of the div with id example1. how can i do it?? i have days trying and more close it's like this.
CSS
#example3{
margin-left:auto;
margin-right:auto;
margin:0;
height:80px;
position:absolute;
top:170px;
}
#example2{
height:153px;
width:305px;
float:left;
background:url(Logo.png);
}
thanks for your help
For one thing, position:absolute won't let you set margins.
For another, you've got
margin:0;
which is resetting your auto on the left+right. Try
margin:0 auto;
Here's a JSFiddle which accomplishes what you're trying to do (more or less).
EDIT
OK, but now you've now introduced a third problem, in the float:left, which will override the auto margin and always float left.
Also, the problems I mentioned above haven't been addressed. To summarize: no floats, no absolute positions, and try not to override the margin by styling it twice.
Are you trying to have a 17px space between #example2 and #example3? Here's an updated link, evolved from the last one, that does this new behavior: JSFiddle
Going by the CSS you have I think you need to swap the div that's absolutely positioned to the "logo" (#example2), then you can just margin the top of example 3 to get the top 170px spacing
Example : jsfiddle
try:
#example1{
background: #eee;
height: 250px;
position: relative;
overflow: auto;
}
#example2 {
background: #444;
color: #fff;
position: absolute;
top: 0;
left: 0;
height:152px;
width:305px;
}
#example3 {
background: #007;
color: #fff;
width: 300px; /* adjust to suit */
height: 80px;
margin: 170px auto 0 auto;
}
if you don't know the width of #example3 - and so can't use the auto left and right margins - then you can center it another way by changing it to display: inline-block and setting text-align: center on #example1