In Bootstrap 3, inline forms (http://getbootstrap.com/css/#forms-inline) -
I cannot seem to find the reason for the spacing between .form-group classes.
fiddle: https://jsfiddle.net/6ek1oa3s/1/
The reason I'm asking is because on my dev environment I have this spacing, but after I build with gulp, in the deployment version - the spacing is gone.
That space is generated by the property inline-block is compared to treating the elements as text, if you have on your markup each element on a new line this generates a space and each element is a "new word".
Check the Snippet
section {
background:white;
margin:20px auto;
}
div {
display:inline-block;
height:50px;
width:30%;
margin:20px auto;
background:red;
border:thin solid orange
}
<section>
<div></div>
<div></div>
<div></div>
</section>
I guess when you build with gulp you minify your html making your html with no spaces between items and then has no space making all elements "one word".
Check the Snippet
section {
background:white;
margin:20px auto;
}
div {
display:inline-block;
height:50px;
width:30%;
margin:20px auto;
background:red;
border:thin solid orange
}
<section>
<div></div><div></div><div></div>
</section>
To solve this you can add on your style a margin-right value like:
.form-inline .form-group {
margin-right:4px;
}
Add margin-right or left to your form-group inside your form
You can see on the developer tools where the spacing comes from.
.form-group {
margin-bottom: 15px;
}
Related
I am stuck trying to figure it out how exactly inline element and floated element behave when are next to each other. I have following code in which inline element comes before the floated one and the second situation when inline element comes after the floated one and in both situation.
html code is the same in both examples so I am gonna put it just here:
<body>
<p class="first">first paragraph</p>
<p class="second">second pargraph</p>
<p class="clearBoth"></p>
</body>
So here is first example in which is the inline element before the floated one, along with following css:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
display:inline;
background:yellow;
color:black;
}
p.second{
float:left;
background:black;
color:white;
}
and here is the link what this code does
Here is second example where the floated element is first element, along with the following css code:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
float:left;
background:yellow;
color:black;
}
p.second{
display:inline;
background:black;
color:white;
}
And here is link what it does
In both cases I've noticed that the float element will be first to the left no matter which one is first in html document, but I find this align very strangeto happen since I would normally expect both to be in same line.
That's because web browsers apply a margin property to the top and bottom of the <p> element.
For instance, Google chrome applies the following:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You need to reset the default user agent style sheet by using CSS Reset
As a tiny fix, just for the demo:
* { margin: 0; padding: 0; }
/* Or just:
p { margin: 0; }
*/
UPDATED DEMO #1
UPDATED DEMO #2
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I can't seem to figure this out.
I have the following code:
<div id="wrapper">
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
//
</div>
I want the div #wrapper to of fixed width. And I want each .schedule to be also of a fixed width. I then want, it I have too many in the div, I could just scroll left and right inside that page.
I can't do this!! No matter what I try, when I add more .schedule, they pop to the bottom of the page, and start filling the next row!
Cheers
Kousha
EDIT: Thank you. All the results work. EXCEPT I need to be able to use float: left; or something so that all divs are stock to each other! How can I do that?
It can be done with the following CSS:
#wrapper {
overflow-x: auto;
white-space: nowrap;
max-width: 300px;
border: 1px solid red;
}
#wrapper .schedule {
display: inline-block;
padding: 5px;
}
I've put together a basic JSFiddle demonstration.
Live Demo
Hi now used to this css
#wrapper{
min-width:200px;
background:red;
font-size:0;
white-space:nowrap;
}
.schedule{
height:100px;
font-size:12px;
width:100px;
background:green;
margin:1px;
display:inline-block;
vertical-align:top;
}
Demo
Now change to width or height according your layout .........
I suspect what you want is the schedule-divs to float to align themself on the same height.
Try adding this to your css:
#wrapper{overflow:auto;}
.schedule{float:left;}
Sorry if I missunderstod your specification, but I think that's what you really want.
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
How can I make div 'left' and 'right' look like columns side by side?
I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/
the guy says it is possible, I can't get it work though...
Code:
<style>
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/
.container div {
display: inline-block;
}
Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.
Floats are also more flexible, in most cases.
A div is a block level element, meaning that will behave as a block, and blocks can't stay side by side without being floated. You can however set them to inline elements with:
display:inline-block;
Give it a try...
Another way is to place them using:
position:absolute;
left:0;
and/or
position:absolute;
right:0;
Note: For this to work as expected, the wrapper element must have a position:relative; so that the elements with absolute positioning stay relative to their wrapper element.
You can also use CSS3 flexbox layout, which is well supported nowadays.
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background:black;
height:400px;
width:450px;
}
.left {
flex: 0 0 300px;
background:blue;
height:200px;
}
.right {
flex: 0 1 100px;
background:green;
height:300px;
}
See Example (with legacy styles for maximum compatiblity) & Learn more about flexbox.
I am currently working on this, and i have already a number of solutions.
It is nice to have a high quality site, that i can use also for my convenience.
Because if you do not write these things down, you will eventually forget some parts.
And i can also recommend writing some basic's down if you are starting any kind of new programming/design.
So if the float functions are causing problems there is a couple of options you can try.
One is modify the div alignment in the div tag it self like so <div class="kosher" align=left>
If this does not suit you then there is another option with margin like so.
.leftdiv {
display: inline-block;
width: 40%;
float: left;
}
.rightdiv {
display: block;
margin-right: 20px;
margin-left: 45%;
}
Don't forget to remove the <div align=left>.
Use display:table-cell; for removing space between .Left and .Right
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
.container > div {
display: table-cell;
}
<div class="container">
<div>
<div class="left">
LEFT
</div>
</div>
<div>
<div class="right">
RIGHT
</div>
</div>
</div>
You can try with margin for right div
margin: -200px 0 0 350px;