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.
Related
Please check the CSS below.
/*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}
div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
The result in browser:
What I need:
This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.
<div class="rex">
<div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>
working demo
It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.
Refer to here for a more in depth explanation of why this occurs.
How to remove the space between inline-block elements?
Just extending answer giving by #Tristan here.
You have repeated the css code unnecessarily. You can minify it by using multiple css like :
.ex, .ex2, .ex3 {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
height: 100%; /* no need of height: 200px; here */
} /* if you need to extend it to parent height */
/* then use height: 100% */
OR
div.rex > div { /* code here */ }
You can keep elements side by side by using any of the below approaches:
Using display: table-cell
Using float: left
Using display: inline-block (check #Tristan's solution)
Add float:left; to your div.ex, div.ex2 and div.ex3 instead.
JSFIDDLE
UPDATE:
Add position:absolute to second and third div if float is not a choice.
FIDDLE
UPDATE 2:
Add this to only 3rd div if you need that space in between.
FIDDLE
You can sue comments like that (this looks little better in code):
<div class="rex">
<div class="ex"><!--
--></div><div class="ex2"></div><!--
--><div class="ex3"></div>
</div>
My trick is to set font-size:0; in the parent element, because it's the font-size that is causing the math to not add up perfectly ( about a 4px overlap per div, depending on screen size ) and causes one div to appear under the other.
.rex{
display:block;
font-size:0;
}
.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}
.ex2{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
vertical-align:top;
margin: 0;
padding: 0;
font-size:16px;
}
I am trying to create a simple html file with 2 column like structure. I managed it but there is no space between each element as you can see in the JSFiddled demo. I tried margin and padding but failed. How can I put some space between input elements for example?
JSFiddle
And here is my css:
.left
{
position:relative;
left:10px;
}
.right
{
position:fixed;
left:300px;
}
You could also use p elements to surround your label-field matches instead of using br line breaks, and would still be valid HTML.
For example:
<p>
<label for="foo">Foo:</label>
<textarea id="foo"></textarea>
</p>
Here's a fiddle.
Try this, but why are you using relative label and fix position for inputs?
.left {
display: inline-block;
left: 10px;
margin-bottom: 10px;
position: relative;
}
.left
{
position:relative;
left:10px;
width:300px;
float:left;
display:block;
}
.right
{
position:relative;
left:0px;
display:block;
}
This works fine with your jsfiddle. Tested it there. Add further margins if you need. The display:block does the trick
Try this using inline-block for this type of thing:
.left {
display: inline-block;
width: 300px;
margin-left: 0.6em;
}
label, input, select {
margin: 0.5em 0;
}
How do I put the smiley(yellow background) immediately after the centered word Peter(red background) in this example?
If you give .name the position: relative property, you can declare a pseudo-element for it, which is absolutely positioned.
.name:after {
position: absolute;
left: 100%;
background: yellow;
content: ': )'; /* the space is non-braking */
}
http://jsbin.com/urodit/20/edit
You should be able to do it with floats like this: http://jsbin.com/urodit/26/
Some googling of 3 column layouts may help you find ideas if this isn't exactly what you want too.
.toggle-me {
background-color: green;
float:left;
}
.name {
background-color: red;
float:left;
width:40px;
margin:auto;
}
.description {
background-color: yellow;
width: 20px;
float:left;
}
.container-one{
float:right;
width:100%;
}
.favourite-food {
background-color: orange;
float:left;
}
Check this http://jsbin.com/urodit/30/edit
Added .container-one { text-align: center; } and .name { display: inline-block; } to center the name. Then .description { display: inline-block; } to make it go after the name. Also removed .name { margin: auto; } because it's no longer necessary. And added .name { text-align: left; }.
Note the HTML comment after .name and before .description:
<div class="container-one">
<div class="toggle-me">|Toggle|</div>
<div class="name">Peter</div><!--
--><div class="description">: )</div>
</div>
This is to remove the white space between inline-block elements, caused by the line-breaks and indentation of the code itself. If you don't want to remove the white space just remove the HTML comment.
This is an ugly solution. It is not a nice solution since you need to fiddle with the width of the element that is floated on the right. You also need to put the element that will be on the right of your centered element before the centered element in your html.
If anyone is able to post a cleaner solution I will accept that answer instead of this one.
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag