I want to know if its possible to made appear the main content to the left and the header to the right BUT the HTML is like that
<div id="header" style="float:right; height:1000px; width:60%;">
head
</div>
<div id='main' style ="float:left; height:1000px; width: 40%;">
main
</div>
I already try that but it doesnt work
By the way, the header absolutely needs to be first.
Thank you
jsfiddle everything is working as you needed. But I would add after these blocks blank div with style clear to further avoid problems with the following blocks.
Or may be you want this? jsfiddle
Related
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
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
This jsfiddle example shows what I'm talking about, I gave the div in question a red border to show how it's displayed.
I'd expect the #searchwrapper_3 div to go inside the #col_st_cautare one, but for some reason that's not how it works. I've been staring at it for a while now and I got no idea why it's showing like that
I also have an example of it looking ok simply because i've added another element after the #searchwrapper div here.
Issue's fixed, TIL a div will collapse if it contains only floating elements.
You need to do a clear:both; - see the end of http://jsfiddle.net/wzYry/3/
<div style="border: 1px solid red;" id="col_st_cautare">
<div style="float: left;" id="searchwrapper_3">
.... code ....
</div>
<div style="clear:both;"></div>
</div>
On a side note, it may be easier to make clr class in your styles.
.clr{clear:both;}
This way you can use this anytime you need to clear
<div class='clr'></div>
If a div contains only floating elements, it height will collapse.
You can add a <div style="clear:both;"> or use some techniques from this article, for example overflow:hidden:
<div style="border: 1px solid red;overflow:hidden" id="col_st_cautare">
This is happening because the child elements inside are floated and parent lost track of the how to wrap them.
Probably the easiest fix for this
#col_st_cautare { overflow: hidden; }
Demo
Other than this, the stable solution would be to add <div style="clear:both;"></div> before the closing the element.
Issue
As far as I know clearing floats mostly works on parent items. But there is one issue in my template after the post thumbnail, where the clear: both acts on the whole content wrapper. Without clearing the float, the thin line will stick to the text right to the thumbnail.
What I want to do is to have the line 45px below either the thumbnail or the text (depending on what height is higher).
Preview
Please have a look at this sample.
Any help would be highly appreciated!
Just use the overflow: hidden; hack to end floats.
Add the CSS overflow: hidden to the parent element.
EDIT
As a bonus. If you want to use some fancy CSS3 stuff (like dropshadows) the above hack will fail.
There is a new hack: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
Although this hack also has some issues.
And it would take some time before you can make some serious use of fancy CSS3 stuff.
You could use it, but the browser support will be poor for a long time :)
I would recommend using a .clear class that could be used anywhere to clear floats, it would look like this:
.clear { height:0; overflow:hidden; clear:both; }
Insert it under your floated elements to clear them, it
Float the thumbnail div left and the text div left as well. after them, set a div
<div style="clear:both"><!-- --></div>
The div that contains all 3 of these will take the length of the heighest div.
Basically:
<div class="container">
<div class="thumbnail" style="float:left; width: 50%;"><img src="whatever.png" /></div>
<div class="text" style="float:left; width: 50%">My text</div>
<div style="clear:both;"><!-- --></div>
</div>
I have a sidebar div to the left of my main content area and a footer below. How do I get my side bar div and main content div to both extend to my footer without filling it with content?
I think you are looking for the min-height CSS attribute. I don't know exactly how the markup is structured, but applying it to both divs (left and main), or a surrounding container should do it.
If you need it to work in older versions of IE, you should check out one of the CSS hacks like: http://www.dustindiaz.com/min-height-fast-hack/
Is this what you're looking for?
<div style="width:80%; margin:0 10% 0 10%">
<div style="background:red; width:20%; float:left">side</div>
<div style="background:blue; width:80%;float:right">main</div>
<div style="background:green; clear:both;">footer</div>
</div>