input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
I am trying to edit a code that has on the left side an image and on the right side the text content. Below the text content there is a button. What I am trying to do using width=percentage is to create a third column where I will put the button into it and some other text.
I have posted my code into the jsFiddle for better understanding.
http://jsfiddle.net/cm9UC/
.blog-post {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
}
Better explanation
Suppose that now there are two columns. The first one is the picture, and the second is the text. What I want to do is to decrease the width of the text so that will let me to take the created space and make it a third column. The new column should have the button in it.
All you need to do is wrap the h2 and p in one div and wrap button in another div.
and define the width for them and use {float:left;} for each.
It will surely work.
Try this one:
updated jsfiddle
What I did is make your p into:
display: inline-block;
vertical-align: middle;
width: 80%
and then your a into:
width: auto;
vertical-align: middle;
can your vertical-align into top,middle, or bottom depends on your need.
like this you can change the column without making another div.
But of course the better work round is wrap them up with extra divs, that will be sleeker and cleaner.
I've just added 2 new line in your CSS and wrap the h2 and p inside a div.
.post-type+ div{max-width:80%; display:inline-block;}
.post-type~ a{display:inline-block; border:1px solid red;vertical-align:bottom;}
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
overflow:hidden; /*new line added*/
}
Here is the working Demo. http://jsfiddle.net/cm9UC/60/
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 8 years ago.
Here's a fiddle that shows my code in action
The result seems crazy to me: in Chrome second button is slightly above the first.
In Firefox it is slightly below.
<div id="accounts">
<button class="account">
<h1>VISA Card</h1>
<span class="balance">-433.18</span>
</button>
<button class="account">
<h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
<span class="plus-text">Add Account</span>
</button>
</div>
What is even more confusing is that padding on the h1.plus affects the position of the whole div.
What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?
UPDATE:
Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.
You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.
This is a diagram from the specs which illustrates exactly that:
You can see in the first two boxes how padding and the font size of the content influence the positioning.
As a fix, use vertical-align: top or bottom, or even middle.
Edit: The image is from the table section and the situation is slighty different for inline-blocks.
Add this to your button.account: vertical-align: middle; .
And you can lose the display: inline-block; property, as it is not needed.
Check below code
button.account {
display: block;
float: left;
height: 80px;
margin: 10px 10px;
padding: 10px 5px;
width: 170px;
}
.account h1 {
font-size: 16px;
height: 16px;
margin: 0 0 5px;
padding: 4px 0 2px;
}
.account .balance {
display: block;
font-size: 24px;
}
.account h1.plus {
font-size: 24px;
padding-top: 0px;
}
Here is the fiddle http://jsfiddle.net/Gq3U8/13/
If you are using inline-block, the main concern is about the whitespace (you will see the default margin around the element). To fix this just add vertical-align:top, instead of using float:left. It will align the element to the top.
.account {
display: inline-block;
vertical-align: top; /*add this one*/
margin: 10px 10px; /*remove this one then can see whitespace*/
}
I want to build a list of itens. Each item should be in one line, like several paragraphs.
Why my div.empresa elements are on same line? I think they should be on different lines because the display property of them is block.
Take a look at code:
http://jsfiddle.net/Yz8Cq/
You need to remove float: left;
#ListaDeEmpresas .arrow {
height: 50px;
width: 20px;
background: url("/Content/SetaBrancoh40.png") no-repeat center center;
background-color: #A9462F;
}
http://jsfiddle.net/spacebeers/Yz8Cq/5/
Floats can be a bit tricky to get your head around at first. This article is excellent - http://css-tricks.com/all-about-floats/
Actually, removing float: left from the label will make the arrow span appear to the left of the label. Assuming you want the arrow spans to continue to show up on the right of the labels, then you want to add:
#ListaDeEmpresas div.empresa {
clear: left;
}
This will make sure each label/span set appears below the previous one.
Get rid of the float: left; in #ListaDeEmpresas .arrow
The float: left; is making them do that.
here's the code (and, yes, i'm using a basic reset.css):
.checkbox { border: 1px solid black; width: 10px; height: 10px; }
<ul>
<li>
<p><div class="checkbox"></div>I will!</p>
</li>
<li>
<p><div class="checkbox"></div>I won't!</p>
</li>
</ul>
you can see what i'm trying to do. essentially create a checkbox. the reason i'm NOT using a checkbox tag is because i have to export this thing to PDF so that it can be printed and hamfisted bogots can drag their X mark through the box. if i use the checkbox tag, it's too small. if i use and image, PDF doesn't line up right.
so. i need the CSS box to line up as expected. what am i missing? i've tried changing the div to display: inline; but it freakin' disappears! inline-block useless.
i tried like mad to search this one out, but to no avail, so if this showed up somewhere else, apologies.
WR!
.checkbox {
border: 1px solid black;
width: .65em;
height: .65em;
display: inline-block;
margin-right: 4px;
}
See it working here: http://jsfiddle.net/ZeaLM/
inline-block is the display you need for this.
Your browser might be persnickety about empty elements. Try adding a into the <div>.
<div> is not allowed inside of <p> elements (which doesn't allow any block-level elements inside of it).
See this example
In this example, I've used display: inline-block; and changed the <p> element into a <div>.
There's many ways to do it, one of which is this
Just to make sure - did you put the .checkbox selector inside a <style> tag in the actual HTML?
<style type="text/css">
.checkbox { border: 1px solid black; width: 10px; height: 10px; }
</style>
1) Get rid of the <p> elements
2) Add float: left to your .checkbox style
3) Add after the div or a padding: right to the div block to make it look better
4) Add li { list-style-type: none; } in your style block
5) Play around with vertical-align in your .checkbox style until you're happy