Here is the failed jsfiddle link. I want to have the buttonCenter div located in the black box in the following image:
How do I have to change the css class for buttonCenter:
#buttonCenter {
width: 250px;
height: 100px;
margin-right:auto;
margin-left:auto;
margin-top:100px;
background-color:gray;
}
Thanks in advance,
You will need position: relative; and add z-index (Just for a safer side) as well..
#buttonCenter {
width: 250px;
height: 100px;
margin-right:auto;
margin-left:auto;
margin-top:100px;
background-color:gray;
border: 1px solid #000;
z-index: 1;
position: relative;
}
Demo
Though would like to tell you that the positioning is just weird, you are floating the elements for no good reasons.
For example, you are applying float: left; for #row1, #row2 and #buttonsContainer which isn't required as they take up entire horizontal space.
Don't use id to identify each element, better use classes, so that you can share a common class between elements holding common styles, because you cannot use same id on a single document, they should be unique.
Also, you are using huge margins, consider using position: absolute; instead
Related
I am trying out forms in HTML.
Fiddle
For the div #status, the CSS rules are-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40%;
}
But I cannot understand why the height of divison does not get altered by height rule in the CSS. More over If I try out-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40px;
}
JSFiddle
This leaves the text on the bottom while div is placed at some random place.
Could some help with placing this division below E-mail ID field so that text appears inside it?
Also, which rule in my CSS is responsible for this positioning of div.
You're inserting the div under elements that are floating. You need to add clear: both to your #status CSS rules:
#status {
margin: auto;
width: 50%;
border: 2px solid red;
background: white;
height: 40%; /* or 40px, which will look slightly different. Your choice. */
clear: both;
}
Updated Fiddle
Is there a way to make .formColumn2 div move up within the parent div .bookingForm? It is float:left but I am not sure how to position it. I have tried margin. Is there a way if possible other than positioning:absolute?
http://jsfiddle.net/eF3am/
CSS code:
.bookingForm {
height:450px;
background-color: #D3412A;
}
.bookingForm img {
width:200px;
margin:90px 0 0 170px;
}
form {
padding:20px 0 0 70px;
margin-left: 10%;
color:#fff;
}
.formColumn2 label {
width: 150px;
display: inline-block;
}
.formColumn1,
.formColumn2{
float:left;
}
.formColumn2 {
margin-left: 50px;
}
select,input,textarea {
width:200px;
margin:8px 0;
}
You can either add padding-top:50px to column 1 or you can either mark column 2 with position:relative; top:-50px; or margin-top:-50px;. Those are the safest ways to make this cosmetic change :)
Let me know if you it works in your case!
From what i understand about your question try making the parent div absolute and floated left with .formcolumn2 positioned relative, tho im not sure exactly how you would like it to look, if this doesn't work a little more detail about desired outcome would be great.
Why aren't the two boxes floating side-by-side in the following code?
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background: purple;
float:left;
}
.box2{
width: 300px;
height: 300px;
background: yellow;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
jsFiddle describing question.
The float css property removes the element from the regular flow of the page. This means that its position will not be affected by other elements (which are not also floating). For this reason, in your example, the two elements end up on top of each other.
If you assign .box2 the property float:left as well, they will sit next to each other, as I believe you are expecting.
Just a Small Change:
.box2{
width: 300px;
height: 300px;
background: yellow;
float:left;
}
Working Fiddle
The answer given by Will and Jatin are correct but you can also try wrapping both the div`s in a single wrapper div and display both the divs in the same line
Example:
.container
{
display:inline-block;
}
.box1{
width:50px;
height:200px;
background: purple;
float:left;
}
.box2{
width: 50px;
height:200px;
background: yellow;
float:right;
}
JSFiddle
You need to do two things:
1) Wrap the two boxes in a div
2) Add float:left to both the boxes
In this way you need not clear the float for subsequent containers
Let's say I have the following rectangle box (this is a div) and I would like to represent an arrow on the left side. I was searching for a really simple way of doing but every solution I found is a little tricky for my purpose.
<div class="redbox">
<b>Hello world</b>
</div>
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
http://jsfiddle.net/3N6yP/
How to transform this simple div to show an arrow on the left side?
Something like it:
Here am using a CSS triangle which is positioned absolute to the element, and than and using :before pseudo, so that, it creates virtual element for you. This will just save you few characters in the DOM. Just make sure you use position: relative; for the element having class .redbox, so that the absolute positioned virtual element doesn't fly away in the wild.
Demo
.redbox:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right:15px solid #f00;
top: 0;
left: -15px;
}
You can use this cross-browser generator: http://cssarrowplease.com/
I've found that the "border trick" sometimes has unpredictable margin offsets across different browsers (and of course depending on your markup) and prefer other methods.
I'd personally use a proven method and use an image. Depending on your situation you can just have one sprite image or you can wrap your arrow and content.
http://jsfiddle.net/3N6yP/5/
HTML:
<div class="redbox">
<span></span><div>Hello World</div>
</div>
CSS:
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
.redbox div{
height:30px;
background:#ff0000;
display:inline-block;
line-height:30px;
}
.redbox span{
float:left;
display:block;
height:30px;
width:20px;
background:#333333 url(http://i.stack.imgur.com/cUsjz.png) center left no-repeat;
}
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.