I Can't find error. It's like padding, but padding is 0. Please help me if you can. I kill about hour. You can check it http://codepen.io/sergeviper/pen/ONZWEN
It should be two divs in one big div with fixed height and width should be 100%.
"PICTURE"
.card {
padding: 0px;
background-color: rgba(256, 256, 256, 1);
width: 100%;
display: inline-block;
}
.map {
width: 725px;
height: 368px;
display: inline-block;
}
.auth {
display: inline-block;
width: 275px;
height: 368px;
float: right;
font-family: 'Ubuntu';
font-size: 8pt;
}
<div class="card">
<div class="map">
<img class="map" src="img/map.png" height="374px">
</div>
<div class="auth">
<form>
<h1>Вход на сайт</h1>
<input type="text" placeholder="Логин" />
<input type="password" placeholder="Пароль" />
<br>
<input type="submit" value="ВОйти" />
</form>
<h2 style="color:#999999">Войти с помощью:</h2>
<div class="social">
<div id="vk"></div>
<div id="ok"></div>
<div id="fb"></div>
<div id="gp"></div>
<div id="tw"></div>
</div>
<div class="reg">Регистрация
</div>
<div class="subreg">Забыли пароль
</div>
</div>
</div>
The problem is that the image is 'inline(-block)'. This causes the line-height to create space below the image. Change the image to 'display: block' and this problem is solved.
Try to add margin-bottom: 0;
If it doesn't work, read this - How to get rid of the whitespace at the bottom?, possible solution/duplicate.
Related
This example works great on Chrome but not working as expected on Firefox.
We're using IBM BPM for making form-based web applications.
We can't change html codes in BPM. So that we have to do this with CSS. Sorry :/
How can I solve this issue with css?
textarea {
padding: 10px 0px;
height: 150px;
}
.form-control {
display: block;
/* Remove this line */
}
.alignJustify>.layoutSec.hChild>.layoutCell {
display: table-cell
}
.layoutSec.valignTop>.layoutCell {
vertical-align: baseline
}
.CoachView_invisible {
visibility: hidden !important
}
<div class="alignJustify">
<div class="layoutSec valignTop hChild">
<div class="layoutCell">
<div>
Label
<div class="input">
<p id="input-readonly">
</p>
</div>
</div>
</div>
<div class="layoutCell">
<div>
<div class="input">
<textarea class="form-control" aria-multiline="true">Content</textarea>
</div>
</div>
</div>
</div>
</div>
Minimal example would be:
div {
display: table-cell;
outline: 1px solid;
}
textarea {
display: block;
min-height: 150px;
padding: 10px 0px;
}
<div>
Label
</div>
<div>
<textarea>Content</textarea>
</div>
Rendered outcomes:
You need to match the paddings in textarea and in the label. Vertically you should align to top.
textarea {
padding: 10px 0px;
height: 150px;
}
.form-control {
display: block;
/* Remove this line */
}
.layoutSec.valignTop .layoutCell {
display: inline-block;
vertical-align: top;
}
.layoutSec.valignTop .layoutCell:first-child {
padding-top: 10px;
}
.CoachView_invisible {
visibility: hidden !important
}
<div class="alignJustify">
<div class="layoutSec valignTop hChild">
<div class="layoutCell">
<div>
Label
<div class="input">
<p id="input-readonly">
</p>
</div>
</div>
</div>
<div class="layoutCell">
<div>
<div class="input">
<textarea class="form-control" aria-multiline="true">Content</textarea>
</div>
</div>
</div>
</div>
</div>
I'm building a website, but I have a problem.
I have one div that creates the content with a BG color!
The problem is, the text appears in line to the bottom but I want them next to each other!
Here is a link to a screenshot for an example:
http://www.mupload.nl/img/9x7jco1v45f.png
I've tried some code in my CSS but nothing worked.
This is what I have now:
CSS:
#rechts {
float: right;
margin-right: 10px;
}
#lings {
float: left;
margin-left: 10px;
}
.inhoud {
padding-bottom:100px; /* Height of the footer element */
padding-top:150px;
background-color: #f5f5f5;
z-index: 999;
margin-left: 10%;
margin-right: 10%;
}
HTML:
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
utilize display:inline-block; like below
.container {
background-color: lightgray;
}
.section {
display: inline-block;
vertical-align: top;
width: 49%;
}
<div class="container">
<div class="section">
Some random inforamtion here<br/>
more contact information
</div>
<div class="section right">
Name<br/>
<input type="text" /><br/>
Email<br/>
<input type="text" /><br/>
Phone<br/>
<input type="text" /><br/>
</div>
</div>
For the HTML you provided, simply change your css to
.contactInhoudLings{
float: left;
width: 50%;
}
.contactInhoudRechts{
float: left;
width: 50%;
}
Demo
You could use flex to split the container in two or any other number.
.container {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
<div class="container">
<div class="col">
text
</div>
<div class="col">
your form
<form>
<label for=name>Name:<label/>
<input type=text name=name placeholder=name />
<input type=submit />
</form>
</div>
</div>
If you want margin-left and margin-right than try this:
HTML
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// Here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
CSS
.inhoud{
width: 100%;
}
.contactInhoudLings{
background-color: red;
float: right;
margin-right: 1%;
width:49%;
}
.contactInhoudRechts{
background-color: green;
float: left;
margin-left: 1%;
width:49%;
}
Look also the jsfiddle example
I have input fields which are supposed to be shown centered and then the texts to these input fields are supposed to be aligned left and "start" with the input fields.
http://jsfiddle.net/tfbatp5v/2/
.inputdes {
color: #9b9b9a;
font-size:20px;
height: 200px;
}
.blue {
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue">text1<br><input id="inputfield1" /></div>
<div class="blue">text2<br><input id="inputfield2" /></div>
<div class="blue">text3<br><input id="inputfield3" /></div>
</div>
</div>
However, no matter what I do, every time when I use text-align: left; it automatically aligns the inputfields left as well. I tried to group the text areas together with class names but it doesn't work. Does anyone know the answer?
Thanks !
It's recommended to not use align="center", because align attribute is deprecated. You should use the CSS text-align property on the container.
The rule display: table; will make the element to "shrink-to-fit" the content inside, without need to specify the width value.
#parent {
display: table;
margin: 0 auto;
}
.welcome {
text-align: center;
}
.inputdes {
color: #9b9b9a;
font-size: 20px;
height: 200px;
}
.blue {
height: 70px;
}
<div id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue">text1<br><input id="inputfield1" /></div>
<div class="blue">text2<br><input id="inputfield2" /></div>
<div class="blue">text3<br><input id="inputfield3" /></div>
</div>
</div>
Try something like the following. The idea is that we limit the width of the .inputdes div, then put the text in a nested div that has text-align: left. That way we can have the inputs centered but the text aligned left within its div.
.inputdes{
color: #9b9b9a;
font-size:20px;
height: 200px;
width: 200px;
}
.inputdes > div > div {
text-align: left;
margin: 0 15px;
}
.blue{
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<br>
<div class="inputdes">
<div class="blue" ><div>text1</div>
<input id="inputfield1"/></div>
<div class="blue" ><div>text2</div>
<input id="inputfield2" /></div>
<div class="blue" ><div>text3</div>
<input id="inputfield3" /></div>
</div>
</div>
You could give the input around the fields a fixed width and give the inputs a width: 100% to use text-align: left.
.inputdes{
color: #9b9b9a;
font-size:20px;
height: 200px;
width: 200px;
text-align: left;
}
input {
width: 100%
}
.blue{
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue" >text1<br>
<input id="inputfield1"/></div>
<div class="blue" >text2<br>
<input id="inputfield2" /></div>
<div class="blue" >text3<br>
<input id="inputfield3" /></div>
</div>
</div>
Here's the updated Fiddle:
https://jsfiddle.net/tfbatp5v/11/
I have the following fiddle: http://jsfiddle.net/stpra123/7cap7o7s/7/
#my_input flows outside of the cell. I need #my_input to fill up the entire width - no more, no less. (Setting #my_input's width to something less than 100% could correct the issue but on some screen sizes but depending on the screen size it doesn't guarantee that it will always line up well). Is there another way to make #my_input fit better?
HTML
<div class="site-body">
<div class="site-center">
<div class="cell">
<div class="col width-fill">
<div class="container">
<form>
<input id="my_input" value="I am a bit messed up!" />
<i class="fa fa-calendar"></i>
</form>
</div>
</div>
</div>
<div class="cell">
<div class="col width-fill text">
This is some text that goes directly below #my_input and the widths need to match otherwise
everything kind of looks funny.
</div>
</div>
</div>
</div>
CSS
.cell{
border: 1px solid red;
height: 50px;
}
.container{
position: relative;
width: 100%;
}
#my_input{
margin-top: 10px;
width: 100%;
}
.fa-calendar{
position: absolute;
right: 4px;
top: 18px;
}
Just add box-sizing:border-box on the input:
#my_input{
margin-top: 10px;
width: 100%;
box-sizing:border-box;
}
And it will not go outside.
I'm tring to create two horizontal bars like the below example using only html and css. I'm using the following code:
<div style="height: 150px;">
<div style="width: 55px;float:left;">
<div>340.8</div>
<div style="background-color:#95111d; height: 75px;">
</div>
</div>
<div style="width:55px;float:left">
<div>340.8</div>
<div style="background-color:#9e9e9e; height: 115px;">
</div>
</div>
<br style="clear: both" />
</div>
The problem with this is both bars are sitting at the top of their containing div and not at the bottom so you get the 2nd below images effect.
I have some code that will be generating the height of these bars so I can't just add top padding/margin to push them into position. Is there any way to do this without resorting to javascript to calculate a margin and bottom align them?
Here is the CSS and markup that should do the work (no absolute positioning used)-
DEMO
HTML:
<div id="wraper">
<div id="c1">
<div id="h1">340.8</div>
<div id="b1">
</div>
</div>
<div id="c2">
<div id="h2">340.8</div>
<div id="b2">
</div>
</div>
<br style="clear: both" />
</div>
CSS:
#wraper {
height: 150px;
}
#c1 {
width: 55px;
vertical-align: bottom;
display: inline-block;
}
#b1 {
background-color: #95111d;
height: 75px;
}
#c2 {
width: 55px;
margin-left: -4px;
display: inline-block;
}
#b2 {
background-color: #9e9e9e;
height: 115px;
}
DEMO
You can use absolute positioning to fix an element to the bottom of its container.
HTML:
<div class="container">
<div class="bar">
<div>
<div>340.8</div>
<div style="background-color:#95111d; height: 75px;"> </div>
</div>
</div>
<div class="bar">
<div>
<div>340.8</div>
<div style="background-color:#9e9e9e; height: 115px;"> </div>
</div>
</div>
<br style="clear: both" />
</div>
CSS:
.container {
height: 150px;
}
.bar {
width: 55px;
float: left;
position: relative;
height: 100%;
}
.bar > div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
Example: http://jsfiddle.net/grc4/pAnqe/1/
<html>
<body>
<div style="height: 150px;position:relative;" >
<div style="width: 55px;float:left;position:absolute;bottom:0;left:0px;">
<div style="background-color:#95111d; height: 75px;"> </div>
<div>340.8</div>
</div>
<div style="width:55px;float:left;position:absolute;bottom:0;left:55px;">
<div style="background-color:#9e9e9e; height: 115px;"> </div>
<div>340.8</div>
</div>
<br style="clear: both" />
</div>
</body>
</html>
jsFiddle
You can get the desired effect by using inline block elements and giving them a vertical-align value of bottom. here is some simple html and css.
html
<span class="bar" style="height:75px;background-color:#95111d;">
<div class="label">340.8</div>
</span>
<span class="bar" style="height:115px;background-color:#9e9e9e;">
<div class="label">350.1</div>
</span>
css
.bar {
display:inline-block;
width: 55px;
vertical-align:bottom;
}
.label {
position:relative;
top:-1em;
}