I just need help making an element fit the remaining space of a div, that is covered by a fixed position element.
Over-simplifying: I have a left-fixed menu and it has 25% of total width BUT a limit: max-width: 350px and min-width: 280px.
I also have a center aligned div that has 80% of width.
I want to put content in the second div, between the point where the divs touch, and the left margin.
I already tryed to put a spacing div between the div start and the menu end, (to the content take the rest of the space), but i reached the conclusion that it is imposible to make those calculations with css due to the min and max widths. (If i change the screen res. the width may change OR NOT).
How can i fix this?
Its javascript a good idea?
I think either this fiddle or this fiddle may get you what you want. In either case, I used a pseudo-element to generate a float to space it.
#container:before {
content: '';
display: block;
float:left;
margin-left: -12.5%; /* push float to left edge based on 80% container width */
width: 31.25%; /* make float 25% of total width based off its 80% container */
max-width: 350px;
min-width: 280px;
height:100%; /* or 90% in first fiddle */
}
The second fiddle also has overflow: hidden set on the #content if you want it kept right always. Both also require a height: 100% set on the body and html tag.
you can use this type javascript
var a =$('#id of outer div').height();
var b = $('#id of inner div').height();
var c = a-b;
$('#id of filling div').css("height",c);
Related
Whenever I append new element the div's width will increase. I want it to act as a static one. Why don't I just put it to static pixel value? Well I need to have it working on all monitors and resolutions. I need the width of 100% so it goes to the right border and after appending it acts as the static one letting me scroll through the div.
In JSFiddle I set the width to 50% so you can see how it acts(In real environment it will be 100%) Try clicking 10 or more times on Add Tab to see what's happening. After that change the width to static one to see how I want it to behave.
fiddle
Change this code:
.l_tabs {
height: 57px;
display: block;
width: 50%;
/*Changing this to px works as i want it to work but then i have screen resolution problems TRY to set the width to 500px to see*/
background: #474544 none repeat scroll 0 0;
overflow: hidden;
}
Okay I apologize if this is a repeat - but I couldn't find any working answers anywhere.
I want to have two divs (50% width each) side by side... so a left and a right - inside of a content div (see photo below).
I want them to have min-widths at 300px and once the page gets smaller than 600px (which is when both divs will reach their mins) I want to divs to wrap.. so one on top the other.
I've tried to do that here: fiddle but am having problems.
Here is EXACTLY what I want:
You're making things hard for yourself! This can be done quickly and easily with inline-blocks. Have a nice JSfiddle.
Lets explain the code:
.wrapper
{
text-align: center; /* specifies that the inline-blocks (which are treated
like text here) will be centered. */
font-size: 0; /* Explained later */
max-width: 1000px; /* Your desired max-width */
position: relative; /* These two lines center your wrapper in the page. */
margin: 0 auto;
}
Now for the inside 50% elements:
.left, .right{
display: inline-block; /* This will treat these divs like a text element.
This will work with the parent's "text-align: center" to center the element. */
min-width: 300px;
width: 50%;
font-size: 16px; /* Explained below */
vertical-align: text-top; /* Explained below */
}
You might be wondering why font-size is included. It is because with this method comes a little quirk - if a font size is kept at default, the div's will have an annoying gap between them that can not be eliminated with margin.
However, adding font-size: 0; to the parent element eliminates this gap. It's weird, and you then have to specify the font-size for your children elements, but it's well worth it for the ease of use.
But there's still a problem - the blue element is pushed down, and isn't flush on the top. This can be remedied with vertical-align: text-top; This will make sure all Div elements are aligned by the tops, so they lay in a more pleasant pattern. This is just another little quirk to remember when using inline-blocks. I know it seems like a lot of things to fix just for something this simple, but compared to your other options using inline-block is the cleanest and easiest way of going about this. (Though if you prefer, jshanley offers a very good alternative using float elements)
Also, because these children are now treated like text, they will automatically reposition themselves when the window gets too small! No media-queries needed. Yay.
Good luck.
Instead of using inline-block which causes some sizing quirks, you can use block elements, and float both .left and .right to the left, giving each a width of 50%.
Then to make them stack you need to do a little calculating. Since you specified that the wrapper is 80% of the page width, and the break point for the content is at 600px (each element 300px) the page's breakpoint would be at 750px since 80% of 750 is 600.
You can make a media query that will only apply styles when the page width is less than 750px and set .left and .right to width 100% to make them stack.
#media only screen and (max-width: 750px) {
.left, .right {
width: 100%;
}
}
It's very simple to implement, and gives a good result, here's the fiddle.
I think both #jshanley and #emn178's answers do the trick, but I want to point something out:
The display: inline-block; css property doesn't work with float: right nor float: left, since when you use the float property, it ALWAYS automatically set the display property to block.
Since you're doing this:
.right{
min-width:100px;
background-color:purple;
height:100%;
margin-left:50%;
display:inline-block;
}
The display: inline-block; property is doing nothing.
left and right could have same layout, so I add a class block.
To use float:left and width:50%, it should work.
http://jsfiddle.net/emn178/mzbku/7/
I add media query, it should be what you want.
But you need to calculate how to set the size.
I have three components, a #parent, and 2 of it's children #top and #bottom.
#parent is not of a fixed size.
#top has children that are floated, and does not have a fixed size (it's children can change size). To fix it's height because of floating children, it uses this:
#top:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
I want #bottom to take up the remaining height in the parent, If I use height:100% like normal it makes it overflow the same size as #top's height.
I have also seen people use overflow:none; but this makes some of my content in #bottom get cut off.
How can I make #bottom take up the remaining height in #parent?
EDIT: I made a jFiddle to show the problem. Also, I need to support back to IE 7. I am open to using Javascript/jQuery.
if you float the top element then use height: 100%; this should solve the issue:
#top{
background-color: blue;
width:100%;
float:left;
}
see: http://jsfiddle.net/SKkAp/1/
What this does is now bottom actually fills the full parent since top is floated. But the content of bottom is pushed out of the way of the floated top making it appear as if bottom is filling the remaining space, where it's really filling the whole parent. Hopefully you can make sense of that. Haha
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}
I am using 5 banner images with hover effects and using below code
#banner
{
float:left;
width:99.025%;
padding:0 0 0 10px;
margin:0;
height: 16.714em; /* 234px*/
position:relative;
overflow:hidden;
display:block;
background:url('/pages/images/bottom_wood_repeater.jpg') 0 104px repeat-x;
}
#banner img
{
float:left;
width:19.435%; /*197px;*/
}
#banner a img
{
float:left;
display:block;
}
#banner a:hover img
{
float:left;
position:relative;
top:-16.714em; /* 234px*/
}
Can i use height in percentage instead of em?
height: 16.714em; /* 234px*/
Actually i am creating responsive design and it is creating problem for smaller resolution or for mobile.
Current site : http://new.brandonplanning.com/home
Thanks in Advance :)
Yes and no.
Specifically, you can not do that if the parent element does not have a fixed height. Think about it: if an element could have a height equal to a percentage of its parent's height, then the parent's height would need to be calculated first. But to calculate the parent's height, you need first to calculate the height of its children. But before you calculate the height of this child, you need to calculate the parent's height. You see where this is going.
If the parent does have a fixed height then percentage heights on children are fine.
If the parent does not have a fixed height and you set a percentage height to a child the browser will simply give up and treat the child as having height: auto.
Can i use height in percentage instead of em?
Yes you can. with height:25%; but probably not going to achieve what you want if other properties are being factored in.
Height can be
auto - The browser calculates the height. This is default
length - Defines the height in px, cm, etc.
% - Defines the height in percent of the containing block
If you are still having issues with the layout you can detect if the client is on mobile and present them with a different CSS.
Make sure you are adding the "%" sign to your css you can always use %.
I cannot see why not. As technically it's OK. Did you try using %?
Simply put yes we use height in percentage in css.