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;
}
Related
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
HTML is not whitespace ignorant. For example,
<div>
<a class="test">A</a>
<a class="test">B</a>
<div>
with CSS
.test
{
display:inline-block;
min-width:100px;
background-color:#F00;
}
will result in a space between the two links. Is there any way to get rid of this (perhaps a CSS property of the wrapping div)?
Here you can find a lot of solutions :
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
To my mind, the best one is to use a display: block with float.
.test {
display: block;
float: left;
}
You can set the font-size of the parent to 0, but then you have to reset it on all children.
div {
font-size: 0;
}
.test {
font-size: 12px;
display:inline-block;
min-width:100px;
background-color:#F00;
}
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.
I have an issue with elements. When I type any text in any place inside search_groups_wrapper, the right colum fall to the bottom. If there is no text, it is displayed as should be. What is the problem?
Here is jsfiddle - http://jsfiddle.net/csYU8/ with problem. Remove 'Here is some text' and element will move top.
I can't find what causes this but I found a solution:
Just add the styles below to your #search_wrapper
top:0;
position:absolute;
CSS
#search_wrapper
{
height:50px;
width:100%;
top:0;
position:absolute;
}
DEMO
Add align: left to your search_groups_wrapper and existing_groups_wrapper.
FIDDLE DEMO
instead of using display:inline-block you should use float:left property. and to clear the float you can use clear:left on parent div.
or you want to still use the display: inline-block.
#search_groups_wrapper
{
display:inline-block;
height:100%;
margin:0;
padding:0;
border:0;
width:70%;
position:relative;
top:0;
vertical-align:top; /*I've just added this line*/
}
Here is the another working Demo . http://jsfiddle.net/kheema/csYU8/7/
#search_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
position: relative;
top: 0;
width: 70%;
}
#existing_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
width: 30%;
}
Here is a Demo. http://jsfiddle.net/csYU8/
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.