this is more of a mathematical question than a programming question, but here goes:
I have a container div that is 100% wide.
Within, I have two floated divs. The left div is 66% wide and floated left. The right div is 30% and floated right.
I have an h2 element within the left hand div and I'd like it to extend beyond the constraints of its parent and extend to the far right edge of its parent.
What is the formula to figure out the percentage width of the h2 element, if its parent is 66% of the top container.
I currently, through trial and error, have it set to 151.5%, but I hate that it's just an eyeballed guess. I'd really like to know how you would figure out the correct percentage.
Since it is a responsive design, I can't use a fixed dimension, it has to be percentage.
You can more easily place your <h2> in an absolute position like so
h2 {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
and then add position: relative; to your left column. But this will work well if you only have one tag in that column. Otherwise you'll need either to do some more math when you're trying to place other <h2> elements or use javascript to calculate the width of the bigger container
Never mind, figured it out. 100% (container width) divided by width of left div (66%) = 151.515152
My mistake was rounding my css percentages to 66% instead of 66.66666667%.
Thanks for all the help
If I understand correctly this is the solution to your problem: http://jsfiddle.net/pgJeC/1/
NOTE: Colors are set only to show the layering
.id1 {
width:66%;
float:left;
background:maroon;
}
.id2 {
width:30%;
float:right;
background: green;
}
h3 {
color:red;
width:100%;
white-space: nowrap;
display:block;
}
Related
I have a div with variable dimensions that I need to dynamically horizontally center within its container. Here is the current structure...
<div class="outer">
<div class="inner">Sample</div>
</div>
...the "inner" div is the one that will very in height and width based on its contents, and it needs to be horizontally centered (equal space at its left and right sides) within the "outer" div, which may or may not have fixed dimensions (so the "inner" may be within the "outer" div's width, or it may spill out, but always be centered in it). Here are the styles I currently have...
.outer {
width: 10px;
margin: 0 auto;
position: relative;
}
.inner {
position: absolute;
bottom: 0;
}
...the properties of the "outer" work well to center it within what it's contained in, but the properties of the "inner" have it aligned to the left edge of the "outer" div.
I tried a few options with negative margins and left/right values for the "inner", but they seemed to depend on fixed pixel values whereas I need the dimensions of it to remain variable relative to its content.
The caveat is that the "inner" div needs to be absolute positioned because it has to fix to the bottom edge of the "outer" (hence the "bottom: 0") even when the height of the "outer" is shorter than the inner.
Here's a running example: http://jsfiddle.net/bVC3J/
Anyone have any thoughts on how I can achieve this without using JS? If there is no CSS solution I am open to JS, so you're welcome to suggest that as a last resort. Thanks.
This might do the job for you: http://jsfiddle.net/fF3A4/1/
.outer {
width:300px;
height:300px;
display:table-cell;
background:#333;
vertical-align:bottom;
text-align:center;
}
.inner {
width:200px;
margin:0 auto;
background:#ccc;
display:inline-block;
}
I'm trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:
.container {
position: relative;
}
.content {
position: absolute;
left: 10%;
top: 50%;
}
<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>
The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!
The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.
10% and 50% of that zero height and width are, of course, zero.
If you give your container a height and width, your percentage positions will start to work as you want.
Here is a working example.
.container { position: relative; width:500px; height:500px; }
Welp, my first post in SE. For those of you seeing this in the future, you can actually use viewport height as a measure of percentage.
.container {
position: relative;
top: 10vh; // 10% of height from top of div
}
You will likely need to add height: 100% to your .container div:
.container { height: 100%; position: relative; }
and possibly all the ancestor elements:
html, body { height: 100%; }
#Jaime Dixon's answer was great. Beautiful, two great concepts given there.
The percentage, the relative units are relative TO SOMETHING, you must understand what's the reference container to which those values are calculated.
Even if you have a container, there CAN BE an arbitrary behavior if the container has it's dimensions as "auto". So, to have a predictable behavior, be sure that the container has a dimension better than simply saying "auto". OR, if your container also has 100%, and its parent and so on, make sure you have a css instruction in which you have specified the height of the elements html, body:
example:
html, body {
height: desired_value;
}
i'm having a problem with divs.
I've been searching but couldn't get a solution.
I have 2 divs in a header. One containing logo and other contanining other things. First is 210px width and the second is 100% width (Fill available space).
I want to have the two on the same line.
I've been trying playing with display: inline, inline block, float left, but not working, second div is taking 100% of page and displaying below logo div.
Thanks in advance.
Source: http://jsfiddle.net/ukDQS/1/
You don't need most of that junk. It's pretty easy. You're over thinking the problem.
First, a div is 100% by default, so you don't need to have the 100% on it. Second, you just need to float the logo left, and assign a width to that. That's all there is to it. Get rid of all the display and other float and other kinds of positioning elements.
http://jsfiddle.net/QYftP/
Follow the solution:
http://jsfiddle.net/ukDQS/3/
div#header-right-content { div.logo }
#logo {
float: left;
height: 80px;
padding: 5px 0 0 5px;
width: 210px;
}
#header-right-content {
height: 80px;
margin-left: 210px;
position: relative;
}
You don't need to set width 100% to the second div, because it'll expand to the fullr est of space.
I know this has probably been asked a million times, but how do I center a div that has absolute positioning.
I have tried this and it does not center it.
You can view the site here password:springy88
#logo{ position:absolute; width:243px; left: 50%; margin-left: 121.5px; }
Centering a div is very easy of you know the width and height of the Div.
Assuming that your div has 100width and 100 Height
div {
position:absolute;
left:50%;
top;50%;
margin-left:-50px;
margin-top:-50px;
}
if you are not sure about the dimentions , then probably you can go for a jquery method.
You need to use negative margins - margin-left:-121px. That will center the logo. After that you'll need to properly position your nav...
You could set the % value half of 50%, ie: left: 25% or right: 25%; Providing the wrapper is twice the width of the element.
Test Here..
There are tons of articles about centering an absolutely positionned element, but all of them are for fixed dimensions and a fixed window.
However, the dimensions of the position:absolute element I want to center are variable (mxn-width) according to the size of the browser. I want my element to remain horizontally centered regardless of the size of the window and even when the user changes the window size.
Is that possible to achieve without JS ?
From what I understand of your problem, this could be solved by
# divId {
margin-left: auto;
margin-right: auto;
max-width: 300px;
}
You could do this:
#myDiv {
width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
}
Take in account though that the percentages will need to be adjusted based on the size of your div. If you have an element that is 400px wide and you use left 50% it won't be exactly in the middle because it calculates 50% from the left border of your div, not the center of the div.
By using percentages, a block element can be made to center, regardless of the size of the element or the browser window. This is accomplished by setting the element's upper left corner to the center of the screen using left:50%; and top:50%;, then offsetting that backwards 25% with margin:-25%;.
Height and width must also be set to 50%. Setting top and left (and/or bottom and right) pulls the block out of the normal flow and treats it much like position:fixed and position:absolute does. Thus, it is on a different z-index layer and will overlay the elements that are in the normal flow.
This CSS class applied to a <div>, makes it half the size of the browser window, both horizontally and vertically, and centers it. Since the <div> will not be in the normal flow, this works well for creating pure-CSS popups...
.blockCenter {
display: block;
height: 50%;
left: 50%;
margin: -25%;
top: 50%;
width: 50%;
}
Instead of being 50% wide and 50% tall, this class would make the element 50% wide and 90% tall. Notice how the top margin must always be negative one-half the height to keep it centered...
.blockCenterTall {
display: block;
height: 90%;
left: 50%;
margin: -45% -25%;
top: 50%;
width: 50%;
}