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;
}
Related
I have 3 div's:
.left, .right {
width: 30px;
resize: none;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
max-width: 960px;
margin: 0 auto;
}
What I want to achieve is that only the middle one resizes when resizing the browser. In the left and right div there is an image that is part of the design.
When I make the browser smaller, the left en right div will narrow at one point and it seems that it is getting pushed into the center div. This makes the content of the center being pushed down. How can I make sure the 2 div will stay #30px?
Strange thing is, in the jsfiddle it does work...
jsfiddle
The issue is with the <img /> element you have in the header. When you hide it you can see that it no longer interferes with your layout.
The problem is because the <img /> element will expand to the maximum size of the container, which is 100%. That 100% does not include the 30px you have reserved for each side, as floated elements are taken out of the document flow. Declaring 100% of a child element means it will expand to the width of its parent elements, without taking into account the extra space taken up by floated siblings. Therefore, a solution would be using CSS calc to constrain the width of .center, and float it to the left, too:
.center {
width: calc(100% - 60px);
}
Alternatively, you can give .center a margin of 30px on the left and on the right. The floated divs will ignore margins because they are taken out of the document flow, and will fit perfectly within that 30px corridor you have created for them.
.center {
margin: 0 30px;
}
Both methods I have tested and verified by playing with the Inspector on the link you have provided. The calc() method might suffer from lack of support in older browsers, while the margin method will work for most browsers that are in use today :) pick any one.
Try setting the horizontal margin for your center div to the known width of the left and right divs:
.center {
max-width: 960px;
margin: 0 30px;
}
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;
}
I'm busy with creating a website that preferably needs to have a background picture that covers the whole screen but when the visitor scrolls down other content appears.
So far I got this working with creating 2 div's (which I call #container_page1 and #container_page2). This is the css of the first div:
#container_page1 {
background-image:url(images/background.jpg);
background-size: cover;
position:absolute;
margin:0px;
width:100%;
height:100%;
}
This is the css of the second div:
#container_page2 {
background-color: #F00;
height: 2000px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
The problem is that the content of the second div appears underneath the first div, obviously caused by the fact that the first div is absolute positioned.
Of course I could get the content of the second div to be placed lower with margin or padding but this won't work nicely because of different screen resolutions.
Here you can see what I did so far: http://kmnew.kadushimarketing.com/index.php. You'll also see the "learn more" button that links to an anchor in the second div.
Does anyone has a suggestion to get the second div starting where the first div ends?
Wrap the two divs into one parent div. Then give that parent div an absolute position and position the two inner divs next to each other inside that div.
If you need each section to have it's own special background and be exactly the size of the browser, why do absolute position at all?
Using a style like:
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
}
section{
width:100%;
height:100%;
background-image:url(images/background.jpg);
background-size: cover;
}
Then positioning all your content divs relative, you should be able to maintain browser-sized background and let the sections stack in order.
If you want to control the position of the section contents you could use a structure like:
<section>
<div class="content">
Section content goes here
</div>
</section>
With corresponding CSS:
section .content{
width: 500px;
margin:0 auto;
}
Which would fix the content to a width of 500px and center it on the screen. Hope this helps!
Im trying to float an element right outside of the main page content and want to avoid the horizontal scroll bar from cutting it off
Example
http://www.warface.co.uk/clients/warface.co.uk/test
I've noticed its been achieved in the footer here, but can't figure it out how
http://www.webdesignerdepot.com/
HTML
<div class="wrapper">
wrapper
<div class="imageright">
</div><!-- imageright END -->
</div><!-- wrapper END -->
CSS
.wrapper {
background: yellow;
margin:0 auto;
max-width: 1140px;
height:500px;
}
.imageright {
background: aqua;
width:520px;
height:285px;
display:block;
position: absolute;
float:right;
right:-100px;
}
The position: absolute; and the right:-100px; is pushing your element past the right edge of the viewport. Floating does not affect absolutely positioned elements.
If you want the element to be 100px away from the edge, make that a positive 100px. Or, if you want it right up against the edge, make it 0. If you truly want to float it, remove the absolute positioning.
Hopefully I understood the question, and I hope this helps!
Edit: I re-read the question and think an even better solution would be to add position: relative; to the wrapper. Right now, your absolutely position element is positioned relative to the viewport. If you give wrapper relative positioning, it will cause imageright to be positioned relative to wrapper.
you can apply overflow:hidden; to the body, which is how you get what you're after, but it's highly inadvisable. Another way to take the div "out of flow" is to make it position: fixed; but that will mean it will be visible as you scroll down.
I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.