I know that im missing something simple, but i can't get what exactly
HTML:
<div class="form-captions">
<div class="form-text">
Caption
</div>
<div class="form_error" style="display: block;">
sfgsdfg
asdf safgsafdgsdfgsdfgsdfghsdfhsdghs
asfdasssssssssssssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssfgsdf
</div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix{
clear: both;
}
.form-captions {
width: 100%;
height: auto;
display: block;
clear: both;
padding-top: 20px;
min-height: 20px;
position: relative;
}
.form-text {
width: 100px;
font-size: 16px;
height: 20px;
color: rgb( 29, 29, 29 );
text-align: left;
position: relative;
float: left;
clear: left;
bottom: 0;
}
.form_error {
color: darkred;
float: right;
display: none;
margin-left: 5%;
width: 65%;
}
For the form-text block bottom works not from the bottom of the form-captions block (same position "with top: 0;"). But it works and reacts on value changes.
jsfiddle
How can i make it works from the bottom or how can i move the text to of this block to the bottom of the "form-captions"?
Thanks
If I understood right your question, the solution I found is based on display:table solution described here
In form-caption I added display:table-row, while in form-text I removed all fide sizes and make it display as table-cell.
.clearfix{
clear: both;
}
.form-captions {
width: 100%;
height: auto;
display: table-row;
clear: both;
padding-top: 20px;
min-height: 20px;
position: relative;
}
.form-text {
font-size: 16px;
color: rgb( 29, 29, 29 );
text-align: left;
display: table-cell;
bottom: 0;
}
.form_error {
color: darkred;
float: right;
display: none;
margin-left: 5%;
width: 65%;
}
<div class="form-captions">
<div class="form-text">
Caption
</div>
<div class="form_error" style="display: block;">sfgsdfg
asdf safgsafdgsdfgsdfgsdfghsdfhsdghs
asfdasssssssssssssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssfgsdf</div>
<div class="clearfix"></div>
</div>
May be you can try this -
.clearfix {
clear: both;
}
.form-captions {
width: 100%;
height: auto;
display: block;
clear: both;
padding-top: 20px;
min-height: 20px;
position: relative;
border:1px solid red;
}
.form-text {
width: 100px;
border:1px solid red;
font-size: 16px;
height: 20px;
color: rgb( 29, 29, 29);
text-align: left;
position: absolute;
float: left;
clear: left;
bottom:0
}
.form_error {
color: darkred;
float: right;
display: none;
margin-left: 5%;
width: 65%;
}
<div class="form-captions">
<div class="form-text">
Caption
</div>
<div class="form_error" style="display: block;">sfgsdfg asdf safgsafdgsdfgsdfgsdfghsdfhsdghs asfdasssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssssssssssssssfgsdf
</div>
<div class="clearfix"></div>
</div>
Why don't you just use margin?
.form-text {
margin-top: 20px;
}
I have updated your JsFiddle https://jsfiddle.net/RajReddy/181Lky0n/2/ .Let me know if this is what you were looking for. Also the changes was just increasing the div width.
.form_error {
color: darkred;
float: right;
display: none;
margin-left: 5%;
width: 100%; // this is the change
}
EDIT: here is the updated JsFiddle and the result is
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I'm trying to center a text between two floating divs. The problem is, that the text does not center properly, even though I followed every step I could find online.
Here's the code I used to try to accomplish my goal:
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}
<div className="EditingApp">
<div className="EditingApp-head">
<div className="EditingApp-head-logo">
<img src={logo} className="EditingApp-head-logo-image" alt="logo" />
<p className="EditingApp-head-logo-text">SyncPad</p>
</div>
<div className="EditingApp-head-end" />
<p className="EditingApp-head-title">Title</p>
</div>
<div>
<p style={{textAlign: "center"}}>center</p>
</div>
</div>
The text 'Title' centers slightly to the right, so it somehow ignores the right div.
Does anyone see the problem?
Put <center></center> around your paragraph and if i understand well it will help.
After some playing around, I got it to work. Thanks to all who tried to help me. Here's the final CSS:
.EditingApp-head {
background-color: #222;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
}
.EditingApp-head-logo-text {
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}
It's because of the floated content. The inline content in your p is going to wrap around the floated content, which will offset it depending on the width of the floated content. To center the title p, apply margin: 0 10% so that the inline content in the p isn't affected by the surrounding floated content.
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
width: 80%;
float: left;
}
<div class="EditingApp">
<div class="EditingApp-head">
<div class="EditingApp-head-logo">
<img src={logo} class="EditingApp-head-logo-image" alt="logo" />
<p class="EditingApp-head-logo-text">SyncPad</p>
</div>
<p class="EditingApp-head-title">Title</p>
</div>
</div>
Examine this code:
HTML
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
CSS
.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size:34px;
font-weight: 800;
}
.one:after { clear: both; }
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
}
JSfiddle
Why is the clear both with the after element not working in this example above? while the clearing with <div style="clear:both"></div> inside the layout it self do work.
Try this, add display: block to input:
CSS
.one {
display: block;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size: 34px;
font-weight: 800;
text-align: left;
}
.two {
font-size: 150%;
width: 200px;
height: 20px;
display: block;
margin:0 auto;
}
HTML
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
DEMO HERE
The :after clear float trick works on floated element inside the pseudo elements parent.
If you would put the <div style="clear:both"></div> inside the h1 it will not clear the float either, so it has to be a sibling or a parent element of the floated element
So in your case just clear the float on the input
.one {
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ccc;
font-size:34px;
font-weight: 800;
}
.two {
display: block;
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
clear: both;
}
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
It would be good if you provide clearfix to parent element try this snippet hope this could help you. I'm also including :before but this is the best way to clear the floats. here is the jsfiddle link https://jsfiddle.net/rhulkashyap/jjv6t6gd/
.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #111;
font-size: 34px;
font-weight: 800;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
}
<div class="clearfix">
<h1 class="one">Sometext over here</h1>
</div>
<input type="text" placeholder="E-mail" class="two">
I have this code and I want the css code with a max-width: 780px, the .second in a line alone because it is the logo, and the .first and .third on the line below. I don't know how to do it.
Normally, this elements are Ordered in one line with a wider width than 780px. The normal order: first, second, third
The order I want with a max-width: 780px:
.................second..............
........first........|.......third......
<header>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</header>
header {
background: #FFF;
width: 100%;
height: 160px;
}
.SearchBar {
width: 30%;
height: 130px;
display: inline-block;
float: left;
text-align: center;
}
.SearchBar:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.SearchBar>p {
padding-right: 0;
padding-left: 0;
display: inline-block;
}
.SearchBar>p>input {
background: url("../images/search_icon.png") no-repeat scroll 0 0 transparent;
background-position: 90% 50%;
width: 230px;
height: 50px;
border: 1px solid #c8c8c8;
font-family: FuturaLight;
text-indent: 20px;
font-size: 18px;
}
.SearchBar>p>input:enabled {
cursor: text;
}
.logo {
width: 40%;
height: 130px;
display: inline-block;
margin: auto;
text-align: center;
}
.logo:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.logo a {
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
}
.shoppingcar {
width: 30%;
height: 130px;
display: inline-block;
float: right;
text-align: center;
}
.shoppingcar:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.cartletter {
padding-right: 0;
padding-left: 0;
display: inline-block;
font-family: FuturaLight;
}
<header>
<div class="subheader"></div>
<div class="SearchBar">
<a> FIRST</a>
</div>
<div class="logo">
<a> SECOND</a>
</div>
<div class="shoppingcar">
<p class="cartletter">
<a> THIRD</a>
</p>
</div>
</header>
hmm, well since there's no css code and jsfiddle, I'm assuming this can do the trick ? try it on and let me know please ?
#media all and (max-width: 780px) {
.second {
display:inline-block;
}
.first {
display:inline;
float:left;
}
.third {
display:inline;
float:right;
}
}
I made a chart with html+css (i really need it to work in all browsers)
its ok but the bars are on the top and i need them to stick to the bottom
i tried vertical-align and tried some other things but neither of them worked
Here is a jsfiddle (if you see it you'll know what i mean)
JsFiddle
Code:
CSS:
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
}
.vbottom {
display: block;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
HTML:
<div id="chart">
<div id="scale">
<i>500</i>
<i>450</i>
<i>400</i>
<i>350</i>
<i>300</i>
<i>250</i>
<i>200</i>
<i>150</i>
<i>100</i>
<i>50</i>
<i>0</i>
</div>
<div id="chartwrap">
<div id="chartbox">
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<br class="clear">
</div>
<div id="days">
<i>02-17</i>
<i>02-18</i>
<br class="clear">
</div>
</div>
<div id="description">
<div id="indes"><i></i><span>Received</span><br class="clear"></div>
<div id="outdes"><i></i><span>Sent</span><br class="clear"></div>
</div>
<br class="clear">
</div>
here is your new CSS code :
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
position: relative;
}
.vbottom {
display: block;
position: absolute;
bottom:0px;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
To sum up, I just added position: relative; to the end of .thisday, and I also added position: absolute; and then bottom:0px; to .vbottom.
Also, this method will still work if one day you enlarge your graphic. It will stick to the bottom of your graph and you will not have to reajust from top. If you want the bars to go a pixel more or less from the bottom, just do bottom:-1px; or bottom:1px; instead of 0px and it will be readjusted !
This will make the bars always align along the bottom of the chart. It's a nice solution as long as you don't need to support earlier versions of IE than 8.
.thisday {
display: inline-table;
height: 170px;
margin: 0 18px;
width: 40px;
}
.vbottom {
display: table-cell;
vertical-align: bottom
}
.thisday is the container and has been given display: inline-table, and the area supposed to be in the bottom has display: table-cell and vertical-align: bottom.
EDIT: since .vbottom is not absolutely positioned, width on .thisday can be left out altogether, in case you might want to add more bars per day or so. That's one clear advantage of this method.
Forked fiddle: http://jsfiddle.net/7VvZA/1/
Add position relative for chartbox class:
position: relative;
and position absolute for vbottom class:
position: absolute;
bottom: 0;
UPDATE (I work in devtools and don't save changes here is updated version):
http://jsfiddle.net/QzHzT/2/