I have 3 scripts in my HTML file and I'm having trouble with positioning.
As you can see my vertical gauge is on top on my second circular gauge.
I tried multiple positioning options but I'm not able to fix this.
How can I make my vertical gauge be on the right side of my first circular gauge?
This is how my code looks at the moment.
<body>
<div id="containerTno" style="height:300px;width:800px;margin:0px;position:static">
<div id="circularGaugeContainer" style="height:300px;width:300px;position:relative"></div>
<div id="linearGaugeContainer" style="height:300px;width:300px;position:relative"></div>
</div>
<div id="circularGaugeContainer2" style="height:300px;width:300px;margin:0px; position:static"></div>
</body>
For expected layout try assigning following css for the first container as
width:60%
and second container as
width: 30-40%; float: right;
and display as
display: inline-block
for both the container
I believe if you use this two lines instead it should work
<div id="circularGaugeContainer" style="height:300px;width:300px; float: left;"></div>
<div id="linearGaugeContainer" style="height:300px;width:300px; float: right;"></div>
I didn't use JFiddler but I'm quite sure this works. let us know its an easy fix
Related
I have more than 6 divs and I want to set it with float left and one after another with auto resize as per the content size using css
As per image below
here is my code:
<div class="main-container">
<div class="container">
<div class="title">test1</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test2</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test3</div>
<div class="content">Testing of css html Short Content</div>
</div> <!-- And so on ... -->
</div>
any help will be appriciate. Thanks
You should use JQuery plugins like wookmark or masonry for what is you expected output. Using CSS you can not fill upper space.
You can also try http://suprb.com/apps/gridalicious/ which is very good using JQuery.
From all I know, you cannot achieve that using CSS only. The following CSS solutions are possible, but each of them fails to meet all your requirements.
float: left; with clearing
This is all you can achieve using float:
For that to work, you have to clear the float every 4th element. Recommendation is to use
.container:nth-of-type(3n+1) { clear: both; }
display: flex;
What you can achieve using display: flex; is similar, but all .container in one "row" will have the same height which will be determined by the "highest" .container.
CSS columns
The only way I know of to create a type of layout like you showed is using css colums. This does have the massive drawback that your containers will be stacked first in vertical order, and only if a column is filled the next .container will be pushed to the next column. So 2 will be below 1, not right of it.
Javascript-based solutions
As mentioned in another answer, there's a load of solutions available based on Javascript.
Find the two mentioned before here:
http://masonry.desandro.com/
http://www.wookmark.com/jquery-plugin
Add this style:
<style>
.main-container{
border:solid green 1px;
width: 500px;
height:200px;
}
.container{
border:solid gray 1px;
width:50px;
height:auto;
float:left;
}
</style>
By using height /width = auto can make your div flexible to its content as per your hint
hope this help.
maybe this is a stupid question but I have a doubt about CSS clear propery use.
I have this template: http://onofri.org/example/WebTemplate/
Why if I delete (you can try with firebug) the propery clear: both from the #footcontainer div I obtain that this div is placed at the top (it seems almost below the header and below the two columns)
My idea is this thing happens because the two columns #content and #sidebar are floated to the left and without setting clear: both on the #footcontainer div the browser try to put also this div on the right of the #content* div but have no space and put at the top.
Is this a right intuition or am I missing something?
Tnx
Andrea
This is happening because everytime you float an element, its container loses its auto height.
If you want to prevent that from happening, there are somethings you can do:
Set a given height to the container
Ex:
<div class="my-container" style="height: 100px">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
Be aware that if you have set a given height, the div won't resize as the content becomes higher than the container.
Append a div with style="clear: both" right after the floated elements
Ex:
<div class="my-container">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
<div style="clear:both"></div>
</div>
Yeah, it works. But only noobs do it like that. It's not elegant and pollutes your code.
Set overflow: hidden to the parent container
<div class="my-container" style="overflow: hidden">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
This one is great, but you are in danger if you have someting positioned absolutely and have to move it outside the parent div, for example. You'll have an unpleasant surprise.
Use the ClearFix Hack.
This is the way I do it: easy to implement and works like a charm. Check this link out: http://www.positioniseverything.net/easyclearing.html;
If you mind about not having valid CSS (like me), you can target IE browsers with a different stylesheet and conditional comments, for example.
Further resources about the subject:
Quirks Mode Site: CSS Clearing
http://www.quirksmode.org/css/clearing.html
Chris Coyier's ClearFix Tutorial
http://css-tricks.com/snippets/css/clear-fix/
I see you code
your code is too complicated according to me but any way you can used to this css than your problem is solve
Used to this css
#c{position:relative;}
#c:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: -42px;
background: url('http://onofri.org/example/WebTemplate/images/footerRight.jpg') no-repeat -3px 0px;
height: 43px;
}
#footerRight{display:none;}
You have no height set on your container. If you change the height of container to the height of its' contents, which in this case is 596 px then when you take away the clear both property on the footer it won't move one iota.
I think it's because if you float an object, the parent object doesn't resize accordingly.
For example, if you had:
<div class="1px-border">
<div class="float">
<h3>TEST</h3>
</div>
</div>
The border would be completely flat, and not resize to the header. You could fix it by having overflow: auto in the container div.
That said, I could be massively wrong.
I have to build mobile views for an existing website. HTML is like:
<div class="container">
<div class="right_column">
<img .....>
</div>
<p>...</p>
<p>...</p>
</div>
right_column has a float: right.
For mobile view I'd like to move right_column to the end of the container. Trying it with position:absolute doesn't work well, because the container doesn't grow.
Any ideas?
Alex
If the height of the container is fixed you can play around with padding-bottom and use position: absolute; bottom: XX but I am afraid you cannot guarantee the height of the container.
Another option would be to put the div at the end of your HTML and make it float to the right in normal view, that's what I would do.
Use table display properties. display: table on the container, display: table-footer-group on the right column.
Beware, this might have some fun side effects on the container.
http://jsbin.com/abivis/1
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
I'm making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third "login box".
However, I can't seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).
Also, margins don't seem to be affecting the newly created box either.
Here is what I want it to look like: http://i.stack.imgur.com/Kmm1g.jpg
And here is the current website: http://www.winterlb.com/
So my question is, what is the easiest way to accomplish this? Thanks.
You can put your login box and your nav box in the same div. Float this div and the main content div like so:
HTML:
<div id="navBar">
<div id="loginBox">
...
</div>
<div id="navBox">
...
</div>
</div>
<div id="mainContent">
...
</div>
CSS:
div#navBar {
float: left;
width: 200px;
}
div#mainContent {
float: left;
width: 600px;
}
Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.
Style the approriate login div and navigation div. Float them left if needed.
Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ
You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are:
<!DOCTYPE html>