I have a main div that it re-sizes with re-sizing window. I want to add 2 div inside the main div (float left and right). left one width is 165 and right one width is the rest size of main div. can I simply use something in CSS?
#leftDiv{
height:100%;
width:165px;
float:left;
background-color:#244378;
}
#rightDiv {
height:100%;
width:100% - 165px;
float:left;
background-color:#244378;
}
If you really want do it this way, you can use the CSS3 calc property, but keep in mind that this isn't supported in all browsers:
#rightDiv {
height:100%;
width:calc(100% - 165px);
float:left;
background-color:#244378;
}
No! you cannot use a value like "100% -165px".
Instead you can just remove "float:left" and "width:" from #rightDiv.
That should work for your case.
You have to remofe float:left from #rightDiv and set width to auto in this way:
#rightDiv {
height:100%;
width:auto;
background-color:#ff0000;
}
If you do this, the right div will always appear near the left div and will have a dynamic width.
Take a look at this: http://jsfiddle.net/b9BrB/1/
Related
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
I need to position 2 divs alongside, first's width %20 of the page and second's width %80 of the page. I don't know which position I must give divs. Relative, fixed, absolute, inherit?
How can I do it?
You can write like this:
.firstdiv{
width:20%;
float:left;
}
.secdiv{
overflow:hidden;
}
Check this fiddle
Don't give any position to divs just use float:left; and set the width to 80%(or 79%) and 20% as usual
div_first
{
float:left;
width:79%;
}
div_second
{
float:left;
width:20%;
}
is there a simple css way to achieve the following layout?:
here you can see 2 div containers which are 100% in height. The right div is for menu and is 200px in width. And the left div should be also 100% in width but with a 200px margin-right (this solution is not working for me :/ ) at least not in all browsers.
If it is not possible, can anyone recommend maybe a jquery plugin?
You do like this :
CSS
.right{
float:right;
width:200px;
height:100%;
background:red;
}
.left{
overflow:hidden;
background:green;
height:100%;
}
html, body{
height:100%;
}
Check this http://jsfiddle.net/RDyY5/
https://stackoverflow.com/a/13726054/14493760
In searching I came across this and it worked far better for me than the solution listed above
I was trying to horizontally center an image (logo) for every screen size doing something like this
#container {position:relative width:100%; height:100%;}
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}
and it's not working. Do I maybe have to use a width for container in pixels?
#logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}
#logo { height:100px; margin:0 auto; width:500px; }
This is the standard way of centering an image by telling it to automatically determine the space on both the left and right of a fixed size container.
And an example.
I guess it depends on how you define "responsive", but if you mean responsive in the sense that content resizes to accomodate the width of the viewport, then all of the other answers don't meet this criteria since they rely on fixed pixel widths. For example, what happens if the view port is less than 500px?
A similar concept will work with percent widths, and actually be responsive, in that the thing you're centering will be flexible too:
#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}
If you don't want the "logo" element to get to big (on huge screens), you can add max-width:600px; to limit it, but you'd need to add some media-queries to keep it properly centered on large screens.
I have two floated collumns side by side. The user can hide/collapse one of that collumns. In that case I want the other collumn to expand to fit the entire container.
Is this possible with CSS?
In resume, it's possible to make a float to expand to the size of it's container?
Even if the element is floated, if it has width:auto it should expand. At least that´s way I think it should work.
Nup, I don't think the accepted answer actually works. I was just attempting the same thing, and this is the solution...
.left {
float: left;
}
.right {
overflow: hidden;
/* don't float this one */
}
Play around with the code here: http://jsfiddle.net/simoneast/qPHgR/2/
set overflow:auto; height:auto; for floatet element
:)
If your left column has an implicit size, say 250px and your right column is ONLY floated with no set size, then it should fill the container when the left column is collapsed. Code would be as follows:
#leftcol{
width:250px;
float:left;
clear:none;
}
#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}