I'm having trouble with keeping a layer both fixed and centered at the same time. I can't apply margin: auto as my layer doesn't have any width value, it's a fulid thing.
I found this one: https://stackoverflow.com/a/1777282/2114455
It's a great solution to center the layer, but how do I keep this centered layer fixed (I mean, no move when scrolling)
I put them all in a position: fixed; div but this did not work. Any solution?
Maybe I'm not understanding your question, but if you change the position of the outer div from the solution you linked to "fixed" it should work.
<div style="position: fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
(fiddle of this in action: http://jsfiddle.net/Rykus0/TQw2j/)
Related
I have 2 divs which I need to arrange horizontally, I know the width of the second one and I need the first one to take all the remaining free space. can anyone help me and tell me the css in order to achieve that?
You could do something like this:
<div style="width:500px;">
<div style="width:100px;float:right;background-color:cyan;">bar</div>
<div style="margin-right:100px;background-color:magenta">foo</div>
</div>
bar floats in the right 100px, on top of foo's margin. foo takes the other 400px.
Try to do something like that:
<div style="width:200px; float:left;"></div>
<div style="width:auto;"></div>
Try to set the width of the second container to your known value and the first one's to width:100%;
You can use percentages, which is handy when you don't care about exact width. If you need an exact width, use javascript to get the offsetwidth of the div you KNOW, and floating both divs. Then, set the width of the other div accordingly. What I would caution against is setting the other div's value in pixels- if the user resizes the window you have to account for it which is more work. If you don't need it to be perfectly exact, set the other div as a percentage, which will automatically handle window resizing.
Other issues crop up around it but basically thats one way of achieving it.
What you're asking for is a little tricky. But this should work...
http://jsfiddle.net/2hseV/2/
What this does is use div positioning. This should be cross-browser compatible. The reason I'm doing things this way is that there is no easy way to say "have two sibling divs, one of which consumes all available space" without pushing the second div off to the right.
For example, if you try using a percentage you'll either push the div to the right or come up short:
<div style="width: 200px; height: 100px;">
<div style="width: 100%; height: 100%; float: left;"></div>
<div style="width: 90px; height: 100%; float: left;"></div>
<div style="clear: both;"></div>
</div>
So instead, I'm suggesting that you overlap the second div onto the first one using absolute positiong, like this:
<div style="width: 200px; height: 100px; position: relative;">
<div style="width: 100%; height: 100%; float: left; position: relative;"><!-- Content of first div here --></div>
<div style="width: 90px; height: 100%; float: left; position: absolute; right: 0; top: 0;"><!-- Content of second div here --></div>
</div>
The one thing you have to keep in mind here is that the content of your first div will go under the second div if it becomes too wide - so you may need to restrict the width!
I'm trying to display on one line:
a H1 element aligned to the left of the containing box
several "buttons" (A elements here) aligned to the right of the containing box
all being on the same baseline
Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.
<div id="block1">
<h1>What a great title</h1>
This link can kill you
Click if you dare
</div>
The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically):
http://jsfiddle.net/GlauberRocha/bUsvX/
Any idea?
I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:
Code:
<div id="side_bar" class="clearfix">
<h2 style="float: left;">Charity Map</h2>
<button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
You have a potential problem with that layout - what if your H1 is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.
However, what you want can simply be accomplished using absolute positioning:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right">
This link can kill you
Click if you dare
</div>
</div>
If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-width and overflow properties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
This link can kill you
Click if you dare
</div>
</div>
To round off, you cannot achieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)
It's hard to achieve without any wrapping elements or fixed values...
Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.
Align your Links with 'display:block; float:right' to the right.
Now Set "line-height: 40px;" to both the heading and the links
Should work, but only when the size of the heading doesn't change....
One potential approach to this, depending on your exact needs, is to use a table layout:
#block3 {
display: table;
width: 100%;
box-sizing: border-box;
}
#block3 > * {
display: table-cell;
}
#block3 > *:last-child {
text-align: right;
}
JSFiddle: http://jsfiddle.net/bUsvX/39/
If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:
JSFiddle: http://jsfiddle.net/bUsvX/40/
I had the same issue.. Add display:inline to the h1, then for buttons: float:right; display:inline;
example (with use of Twitter Bootstrap):
<h2 style="display:inline">Users</h2>
<i class="icon-download-alt"></i>XLS
<form style="display:inline; float:right;">
<input type="text" class="input-medium search-query" name="search">
<button class="btn" type="submit">Search</button>
</form>
On the page there are two divs adjacent to each other. Now when I resize the browser, one of the div overlaps the other one. What I want is to move one of the div down (below the other div) when there isn't enough space to display both. Can it be achieved using css? How?
The body:
<div id="container">
<h1 align="center">Title</h1>
<div id="image1">
<img src="back1.png" alt="a" />
</div>
<div id="image2">
<img src="back2.png" alt="b" />
</div>
</div>
The CSS
#container {position: relative; height:800px; width: 720px; background: #f0f0f0;}
#container #image1 {position: absolute; top: 10%; left: 0;}
#container #image2 {position: absolute; top:0; right:0;}
Although you have not posted your code, I'm guessing that you style the div's by positioning them using relative or absolute positioning, which makes them overlap. I would instead use display:inline-block; to make adjacent divs in the manner you want.
Click here for an example of what I mean. Try resizing your browser to see that it works.
Is this example more of what you mean? I just used floats.
Let's say I have a DIV that's styled as a square, and it has squares (DIV) inside of it. I'd like the squares inside the main DIV to stack in the lower right. I can use float: right to to get them on the right edge, but how do I make them stack at the bottom rather than the top?
Should you not find a good CSS solution, jQuery can easily handle this:
Fiddle
$('.inner').each(function(i) {
$this = $(this);
var bottomPos = ($this.outerHeight())*i;
$this.css('bottom', bottomPos);
});
HTML and CSS
<style type="text/css">
#outer {
width: 400px;
height: 600px;
background-color: #eee;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #aaa;
position: absolute;
right: 0;
}
</style>
<div id="outer">
<div class="inner">One</div>
<div class="inner">Two</div>
<div class="inner">Three</div>
<div class="inner">Four</div>
</div>
To get a child to stick to the very bottom of a container, set the position:relative and bottom:0px. However this will not stack them, you'd have to set the bottom to another value for a child to be above another child. You could use javascript or jquery to dynamically fit them if the sizes are variable like this:
$('#second_element').css('bottom', $('#bottom_element').height() + 5);
Note: 5 is just for padding
You can use display:table-cell with vertical-align:bottom
Here's a good tutorial on using "table-cell" layout:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
Depending on what you mean by "stack at the bottom", you can achieve this with the use of an inner container div that is aligned at the bottom. Then these child squares can be float right inside of this container div, causing them to stick to the bottom of the main div, like so:
<div id="main_div" style="position: relative; height: 500px; width: 500px;">
<div id="container_div" style="position: absolute; bottom: 0; right: 0;">
<div class="right_floated_square">Square 1 Content</div>
<div class="right_floated_square">Square 2 Content</div>
<div class="right_floated_square">Square 3 Content</div>
</div>
</div>
What this would do is flow these squares right to left at the bottom of the main div. However, these child squares would still flow top to bottom inside the container div. If you wanted them to vertically flow in reverse (bottom up), I'm not sure if that would be possible without some complex layout javascript.
Obviously, the exact styling of "right_floated_square" has been removed for brevity.
Here is a pure css version: http://jsfiddle.net/zkhWA/1/
Basically place your little squares in another absolutely positioned element that is grounded to the bottom right corner of the big square using:
position: absolute;
right: 0px;
bottom: 0px;
Then make all the little squares float right:
float: right;
Don't forget to apply position:relative to the big square.
I want to be able to center some icons over a banner which is in the middle of a div that has been ofset. I can't use absolute positioning as it would center it but not ofset it. How would I be able to achieve this?
might margin: auto; work? Or do you need vertical centering as well?
EDIT:
Maybe something along the lines of:
<div>
<div style="width:208px; height: 58px; margin: auto;">
<img src="some_image_somewhere.png" width="208" height="58" style="position:absolute;">
<img src="some_image_somewhere.png" width="208" height="58">
</div>
</div>
This shows both images over one another centered in the top div, but it's not pretty (code-wise, imo).
you need to set both to an absolute position
the outter div needs to be relative
also the outter div should have a width set (this way when you specify a full width to the image's container, it will align it to the middle (because you set a text-align: center to the div you need centered)).
every image needs to be in its own div with an absolute position (the z order is as it is in the code, the one after will be on top).
code:
<div style="width:300px; height: 100px; position: relative;">
<div style="position: absolute;"><img src="http://i.stack.imgur.com/1aBfM.png" width="300" height="100"></div>
<div style="position: absolute; width: 100%; text-align: center;"><img src="http://i.stack.imgur.com/DH3Qw.png" width="100" height="100"></div></div>
example: http://jsfiddle.net/Y9PhP/
jackJoe is right.
you can also use style="position: absolute; top:10000px" to adjust the height of the overlapping image.