I'm trying to create an upload layout that contains a box with a row inside of it. The row has two buttons (with inputs wrapped inside them) and one h3. I cannot get them to stay on the same height. The following code illustrates this:
HTML
<div id="mi-wrap">
<h1>Title</h1>
<div id="main-wrap">
<div id="inner-wrap">
<div id="wide-bar">
<button id="upload-button">
<input type="file" id="upload" value="PDF"/>
</button>
<h3 id="file-preview"><i class="fa fa-arrow-left"></i>Upload je bestand</h3>
<button id="send-button" type="submit" name="search-button">
</button>
</div>
</div>
</div>
</div>
CSS:
#mi-wrap {
width:100%;
margin:0 auto 0;
height:200px;
}
#main-wrap {
background-color:blue;
width:90%;
margin:0 auto 0;
height:100%;
}
#inner-wrap {
width:100%;
height:100%;
display:table;
}
#wide-bar {
height:60px;
}
#wide-bar button, #wide-bar h3 {
background-color: green;
height:60px;
display:inline-block;
}
#wide-bar button {
width:25px;
}
#wide-bar button input {
display:none;
}
#wide-bar h3 {
width:50%;
}
The code is not finished (i.e. it is not exactly the same as my own), but it does illustrate the problem. Also in this jsFiddle
You need to put another display, as inline-block combined with vertical-align
#wide-bar h3 {
width:50%;
display: inline-block;
vertical-align:top;
}
See it working:
https://jsfiddle.net/89u30vhx/1/
try this way
#wide-bar button, #wide-bar h3 {
background-color: green;
border: 0 none;
/*display: table-cell;*/ /*Remove this property*/
float: left;/*Add this property*/
height: 60px;
margin: 0;
padding: 0;
}
This will do:
#wide-bar {
vertical-align: middle;
max-height:60px;
display:table;
}
#wide-bar button, #wide-bar h3 {
margin:0;
padding:0;
background-color: green;
display:table-cell
}
#wide-bar button {
width:25px;
height: 60px;
}
Change your css as follows:
#wide-bar {
height: 60px;
}
#wide-bar button, #wide-bar h3 {
margin: 0;
padding: 0;
background-color: green;
height: 60px;
display: inline-block;
float: left;
}
JSfiddle demo
Related
I have tried the normal techniques for horizontally centering a div within a div. I must still be doing something wrong. Check out the following jsFiddle and help me center the depiction of a tank under the "Inner Level" heading. For convenience I have added a border to all the div tags.
jsFiddle Source
HTML:
<body>
<a href="#">
<div class="div-inline-block" style="text-align:left;width:150px;">
<h2>TEST</h2>
<p>A description</p>
</div>
<div class="div-inline-block"><p><b>Last Update:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Flow Rate:</b><br />??? gpm</p></div>
<div class="div-inline-block"><p><b>Inner Level:</b><br />???</p><div class="tank-level-outer"><div class="tank-level-inner"></div></div></div>
<div class="div-inline-block"><p><b>Outer Level:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Battery Voltage:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Rainfall:</b><br />???</p></div>
<div class="div-inline-block" style="text-align:left;width:100%;"><p><b>Notifications:</b><br />???<br />???</p></div>
</a>
</body>
CSS:
a{
text-decoration:none;
}
div{
border:1px solid red;
}
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
}
.tank-level-outer {
border:1px solid black;
width:25px;
height:32px;
display:table-cell;
vertical-align:bottom;
margin:0 auto;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
}
add this
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
margin:0 auto;
}
.tank-level-outer {
border: 1px solid black;
width: 25px;
height: 32px;
margin: 0 auto;
padding: 0;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
margin-top:7px;
display: table;
vertical-align: bottom;
}
Updated Fiddle
http://jsfiddle.net/czgoxafr/22/
Add this:
.tank-level-outer {
display: table;
margin: 0 auto;
}
change the css of div .tank-level-outer and add margin zero auto , remove display table-cell
.tank-level-outer {
border: 1px solid #000;
width: 25px;
height: 32px;
margin: 0px auto;
vertical-align: bottom;}
This works:
.tank-level-outer {
width:25px;
height:32px;
display:block; // not necessary since this class is applied to a div
vertical-align:bottom;
margin:0 auto;
}
try this:
//css
.firstDiv{
padding:25% 25% 25% 25%
height:400px;
width:400px;
background-color:red;
}
.secondDiv{
height:200px;
width:200px;
background-color:pink;
}
//html
<div class="firstDiv">
<div class="secondDiv">
</div>
</div>
I have a navigation inside which I have two divs, one for the logo and the other for menu. Logo div was floated to left. So, it's parent's height is now the same as the logo div. But, the floated menu div sits at the top. I want to align it in the middle. How can I do the same? Please help me...
My code is given below...
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div class="navigation clearfix">
<div class="logo">
<img src="logo.png" />
</div>
<div class="navigation-menu">
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
</div>
</div>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
}
.logo {
float:left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.navigation-menu {
float:right;
background-color:red;
}
And, here's the fiddle...
http://jsfiddle.net/ZghVk/
Without defining a fixed height, you can change your layout to use display:table to facilitate easier vertical alignment.
Try changing your CSS to:
Demo Fiddle
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
You can set the line-height:
JSFiddle
.navigation-menu {
float:right;
background-color:red;
line-height:120px;
}
This is what you have to do
.navigation-menu {
border:1px solid black;
background-color:red;
margin-left:40px;
}
.navigation-menu a{
margin-left:20px;
}
you are trying to ".navigation-menu" you should use for "a" anchor tag
Try this:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
Hope it helps! :)
How can I fill a <div> element with text and input so if the <div> get resized the input becomes shorter/longer?
I'm sitting since 2 hours and I just can't get it right.
Here's a Cross browser solution, Pure CSS
Demo
HTML:
<div class="Container">
<label>text</label>
<div class="Fill"><input type="text" /></div>
</div>
CSS:
.Container
{
background-color:#B5E51D;
padding: 5px;
}
label
{
float: left;
padding: 0 10px;
}
.Fill
{
overflow: hidden;
}
input
{
width: 97%;
margin: 0 1%;
}
Like this
demo
css
.divbg{
background-color:#B5E51D;
padding:5px;
overflow:hidden;
width:100%;
}
label{
float:left;
margin:0 0 0 20px;
}
input{
float:left;
background-color:#ED1B24;
color:white;
border:none;
padding:2px 5px;
margin:0 0 0 20px;
min-width:200px;
}
.pull-left{
float:left;
}
There is the following HTML code:
<div class="row">
<label class="resume-form-label" for="ResumeForm_languages">Languages</label><textarea class="resume-form-input" name="ResumeForm[languages]" id="ResumeForm_languages"></textarea></div>
And the following styles:
.row
{
margin: 5px 0;
}
.resume-form-label {
display: inline-block;
width:100px;
background: yellow;
}
.resume-form-input {
width:300px;
}
.row {
vertical-align:middle;
}
I need to have label and div aligned by vertical. How can I do it? Now it doesn't work.
like this: http://jsfiddle.net/matias/BGwBp/
CSS:
.row
{
margin: 5px 0;
}
.resume-form-label {
display: inline-block;
width:100px;
background: yellow;
vertical-align: middle;
}
.resume-form-input {
width:300px;
vertical-align:middle;
}
Why are my Columns not aligning correctly? There seems to be a gap above. Is there away that I can make them automatically set a width of the wrapper its in 892px;
http://jsfiddle.net/pJefg/
HTML:
<div class="leftColParts">
Text Left
</div>
<div class="rightColParts">
Text Right
</div>
CSS:
.leftColParts{
width:215px;
background-color:red;
}
.rightColParts{
float: right;
display: inline-block;
width:440px;
clear:both;
background-color: green;
}
Is this what you need?
http://jsfiddle.net/pJefg/7/
HTML:
<div class="wrapper">
<div class="leftColParts">Text Left</div><!--
--><div class="rightColParts">Text Right</div>
<div>
--
CSS:
.wrapper {
width: 892px;
}
.wrapper:after {
clear:both;
content: ".";
height: 0;
visibility:hidden;
}
.leftColParts {
float:left;
width:215px;
background-color:red;
}
.rightColParts {
float:right;
width:440px;
background-color: green;
}
.leftColParts{
width:215px;
background-color:red;
float: left;
}
.rightColParts{
float: left;
width:440px;
background-color: green;
}
Try this.
Alternatively this:
.leftColParts{
width:215px;
background-color:red;
display: inline-block;
}
.rightColParts{
display: inline-block;
width:440px;
clear:both;
background-color: green;
}
I have edited the fiddle with what I think it is that you want.
What I've done:
Floated both divs left
Added a div with a clearfix (clear: both;)
You can check it here: http://jsfiddle.net/pJefg/2/