I'm learning how to make a simple template with CSS e HTML5 but i've got a problem: i want to make a container with sidebar and articles list but it dosen't work.
See to believe: http://informaticalab.com/template.html
That black line, should be a simple border that contains both the elements.
Thanks for help and sorry for bad english,
Federico
It looks like you have an extraneous </div>, which is one problem :) It's removed in the fiddle below.
If you're using floating elements, which you are, you will need to clear those floats in order for the container to 'stretch' to the bottom of the content.
An easy way to do that is create a new class called "clear" or something similar with the following:
.clear {
clear:both;
}
However, the downside is that you're introducing a new dom element simply to modify the layout.
Another solution (courtesy of Quirksmode http://www.quirksmode.org/css/clearing.html) is to tell the containing element to deal with these floated elements:
#container {
....old code...
overflow: auto;
width: 100%;
}
This has a few quirks under certain circumstances, so it's up to you which you choose to use.
See the fiddle here: http://jsfiddle.net/callseng/kZB5j/
This uses the clear element method.
Related
I'm working on a project using the Vue.js 2.0 framework and a bit of Bootstrap 3. This project has required me to work more on the front-end than I am normally used to so I was wondering if anyone here could give me some useful insight into a few CSS issues I appear to be having.
The Project can be found here: http://rgmotorhomehire.com/project
If you give the source a quick inspection, you will probably notice that the body element is only the height of the navbar, and that the container div's for my various 'Pages' are actually totally outside of the parent body element.
The main thing I'd like to know is:
How I can force the Body to 100% height via CSS, so that it wraps it's child elements properly, and I can then add a Footer to the HTML.
Please note that I have already tried:
html,
body {
margin: 0;
height: 100%;
}
However, if you try this for yourself in the inspector, you will notice this then introduces a new issue of the HTML element now having an empty space below it.
This whole scenario has left me more than a little lost and confused. Hoping someone out there can inform me on whats causing my issues.
Note: I'd like to apologise in advance for any pointless info this post contains (including this note), I've had complaints in the past about my questions not being direct enough but I've tried my best to be as clear and concise as possible, Thank you.
UPDATE: Literally straight after this post, I discovered the solution is to use clearfix on my wrapper divs as they had a 0 height bug. This post can probably be closed now. I found this solution here: http://www.jqui.net/tips-tricks/css-clearfix/
clearfix is a bootstrap class. It clear out all float property. that is right or left.
If you have a div of calling float left property.
for the class pull-right have the property float right. So for the next div we want to clear all the floating property that called before, so we call clearfix it clear all the floating property. so that it works fine.
I'm playing with the isotope js library and I've got the general concept working. My issue occurs when I put normal html/css such as inputs & charts in the isotope div it's not behaving as I expected. This html works as expected outside the isotope div.
When an isotope div is clicked I'm expanding it and showing details for that item, including inputs, charts etc.
My Goal:
Make the table containing the inputs visible in jsfiddle.
Understand why this was happening so I can put whatever content I like in here for the future.
JsFiddle showing answer
Code:
Css that was causing the issue. By adding the asterisk this says applyt he style to all child elements. Hence the reason that my table wasn't showing was that the table, rows, cells, elements were all absolutely positioned.
.containerDiv * {
margin: 0px;
position: absolute;
}
The solution css (apply relative position to the table elements):
#chartFilters * {
position: relative;
}
I've done a quick brush up on CSS and solved my problem - see question for updated fiddle. Was a very simple one in the end, it probably looked hard due to my question hence why there were no answers from the community within the last 24 hours.
I hope my steps help someone else who's new to solving these types of issues, browsers have some great tools built in these days for trouble shooting.
Steps I used for solving:
1.) The first useful step I found was to inspect the element with internet explorer via right click on the page. Then use the right click option in the source it shows to copy element with styles. This gave me a smaller version of the html for testing which I saved into a standalone html.
2.) I started pulling out html elements that appeared unrelated and making the sample simpler. Once I pulled something out I'd refresh the html in IE and check what happened.
3.) When I had a simple html I saw the absolute positioning and the asterisk, I then did a quick google to find this stack question explaining what the asterisk does.
4.) I need to leave the absolute styling in so that isotope works, but I can specify relative positioning inside the isotope, I've done this by using the asterisk myself now I know what it does! :)
#chartFilters * {
position: relative;
}
Is there a way to display a row of links horizontally without using float:left? It's way too hard to center a div when using float:left, I can never get it to work.
Use display:inline;
http://jsfiddle.net/tcQzL/3/
If your elements are inline elements they will display in one row, otherwise you must make them inline.
I'm not sure if I understood correctly, but just make new div-where your buttons are in. And in that new div make your links have float:left
Then just normally position that new divyou made.
But I think that those those earlier answers from Andrei S and mesiesta are more better.
you could try display: inline or inline depending on your needs (from what I know, inline-block offers more flexibility than just inline)
here, check this fiddle
There's a catch though if you use these, if you look in the fiddle, my first two elements are written one after another so that I don't have any gaps between them (that's why I added the borders) and the other ones are written one below each other and as you can see, there's the gap I was talking about. So keep that in mind while writing your code.
There are different workarounds about this, but if you do need borders, and not just the text, you should really consider using float to avoid any workarounds
You can use display:inline-block for that. Write like that
.link{
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
vertical-align:top;
}
Check this http://jsfiddle.net/tcQzL/10/
Browsers I'm using for testing: IE, Chrome, FF;
Ideal layout example pdf: http://designobvio.us/dov2/Homepage1.pdf
Heres the link to the direct page http://designobvio.us/dov2/index.html
While Grid systems are excellent for laying out by width, I always stumble when using height constants.
Inside my code I have 2 major problems:
Ideally, I want to be encapsulate sections of my code by using
parent div that controls the height, margin-top. I've tried to
create this div colored a pale green and padded it for visuals.
this class is shown here:
siteBody #businessSection{ padding-bottom:200px; background:#0F9;}
I've also demonstrated idea in this imageURL: http://www.designobvio.us/dov2/Homepage1Encapulate.pdf
While trying to do this I've come up completely empty handed.
2.So next, I tried breaking down each section individually by using a class .businessInfo
#siteBody .businessInfo{height:200px; background:#ccc;}
Unfortunately this also didnt work and I have no idea why because all the grids line up perfectly.
I hope what I've stated above is understandable. I prefer solution one; however, if not possible 2 will work.
If I'm missing anything I'll response ASAP.
Thanks!
this problem stems from the use of float. For example problem : http://jsfiddle.net/GAvcL/
you can use clear attribute for solve problem.
Solution:
http://jsfiddle.net/qeDs3/
This is a common problem in html. Before closing the div that encapsulates the divs using float, use a div has clear attribute.
I've made this html box, that is supposed to have a title and some buttons on right,
http://jsfiddle.net/vqpmt/17/
Everything seems fine except that the edit button as you can see is a little bit below the title, that shouldn't be the case they should both be at the same exact level.
How do I achieve that, and is my code a mess? Is there a better way of doing something like this?
I moved h1 and the edit link tag inside a div container. Check my version of your code here
To be on the exact same level, the html elements has to be either inside a container (as in my fiddle) or should use 2 inline html elements.
Try reading w3schools on html and css which has lot of information that you can learn in short time.
w3schools HTML reference here
w3schools CSS reference here
Edit: h1 is a block element which means it will add a new line. So I added a new css style .inline and changed the block property to inline.
.inline { display: inline }
Your H1 element extends the width of the page and is pushing your edit link down. I've provided an alternative solution here.
Fiddle: http://jsfiddle.net/GvGoldmedal/vqpmt/32/