I have 3 divs, all positioned: absolute, but the div I want to fill the width of the window will only adapt to the length of the text within it. I want the yellow div #help to fill the remainder of the window.
I know this sounds noob but I cannot find the solution anywhere.
<div id="tab1">tab1</div>
<div id="tab2">tab2</div>
<div id="help">help</div>
#tab1 {position: absolute;
bottom; 0px;
right: 0px;
width: 50px;
height: 20px;
background-color: green;
}
#tab2 {position: absolute;
bottom; 0px;
right: 50px;
width: 50px;
height: 20px;
background-color: yellow;
}
#help {position: absolute;
bottom; 0px;
right: 100px;
height: 20px;
background-color: red;
}
JS Fiddle: http://jsfiddle.net/FBWzX/
If you want #help to stretch, you can set the left and right values at the same time. This trick also works with top and bottom. Absolute positioned elements are quite flexible.
#help {
position: absolute;
left: 0;
right: 100px;
}
jsFiddle Demo
Related
I have many div, which are in position:absolute.
I try to avoid their superimposition only with CSS rule. I don't want to change the top value.
.try {
/*some magic?*/
}
#pos1 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 50px;
left: 30px;
}
#pos2 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 90px;
left: 30px;
}
#pos3 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 300px;
left: 30px;
}
#pos4 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 400px;
left: 30px;
}
#current {
position: absolute;
top: 5px;
left: 50px;
}
#expected {
position: absolute;
top: 200px;
left: 50px;
}
<h1 id="current">Current</h1>
<div id="pos1" class="try"></div>
<div id="pos2" class="try"></div>
<h1 id="expected">Expected</h1>
<div id="pos3"></div>
<div id="pos4"></div>
Here is also a jsfiddle :
ps: I supose this behavior it's stupid because I ask for position absolute.
Absolutely positioned elements are removed from the normal flow of the document. That means surrounding content ignore them and occupy their place:
9.6 Absolute positioning
In the absolute positioning model, a box [...] is removed from the
normal flow entirely (it has no impact on later siblings). [...] The
contents of an absolutely positioned element [...] may obscure the
contents of another box (or be obscured themselves), depending on the
stack levels of the overlapping boxes.
So either don't use absolutely positioning, or move your elements (e.g. with margins).
I have this div here...
<div class="gallery"></div>
and here is the CSS:
.gallery {
background-color: #000;
height: 125px;
text-align: center;
position: fixed;
width: 100%;
z-index: 99999999;
top: 10%;
}
Now my site is broken up into <section> and I am trying to have that element at the top of the section at all times, not that top of the page. How would I accomplish this ?
Add css position: relative to your <section>. Then for .gallery, change fixed to position: absolute; top: 0; left; 0;
Remove that top; 10% stuff too...
You would have to modify the position to be absolute and and top: 0;
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
div#ipsko changes width and height to satisfy absolute positioning.
Why img#utas doesn't?
JSFiddle: http://jsfiddle.net/pejh7/1/
HTML code:
<div id="upsko">
<img id="utas" src="http://kharg.czystybeton.pl/108.png" />
<div id="ipsko"></div>
</div>
CSS code:
div#upsko {
position: relative;
top: 200px; left: 200px; width: 100px; height: 100px;
background: rgba(255,0,0,0.5);
}
img#utas {
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
}
div#ipsko {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,255,0,0.5);
}
Put the img tag in a div, give the image 100% width and height, and then absolute position the container div, e.g.
HTML:
<div id="upsko">
<div id="utas">
<img src="http://kharg.czystybeton.pl/108.png" />
</div>
<div id="ipsko"></div>
</div>
CSS:
#upsko {
position: relative;
top: 200px; left: 200px; width: 100px; height: 100px;
background: rgba(255,0,0,0.5);
}
#utas {
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
}
#utas img { height: 100%; width: 100%; }
#ipsko {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,255,0,0.5);
}
Fiddle
The issues you describe are cause by the image width being unspecified (as other answers have stated) unfortunately without stating a px value for the image size (or converting the top/left/bottom/right and height+width to %) there's no way around this without adding an extra div.
I know adding extra div's is generally considered bad practice, but when it gives you flexibility as above, I think it's generally fine to do.
see the the div "div#ipsko" does not has its own height and width so it inherit its parent height and width . But the image has its own height and width . so you have to specify the height and width of image to make in fit in the div.
img#utas {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
div#upsko {
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background: rgba(255,0,0,0.5);
}
img#utas {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
iv#ipsko {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,255,0,0.5);
}
please try above code.
You image's actual width and height are overriding things. (The browser will adjust an img element's dimensions to match that of the actual image, once it's downloaded it and can tell what they are, if no width and height are specified as attributes of the img or in the CSS.)
With a normal div rather than an image, you could reset the width and height back to auto if they were being set somewhere else, but auto for an image takes you back to the actual image dimensions. If you just wanted the image to match the size of the container, a 100% width/height would fix things, but that's not going to work if you want a different size implied by fixed positioning.
The only thing I can think of would be to change the markup so that your image loads inside a div, and then has 100% width.
Example jsFiddle here:
<div id="container">
<img id="utas" src="http://kharg.czystybeton.pl/108.png" />
</div>
div#container {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
width: auto;
height: auto;
}
img#utas {
width: 100%;
height: 100%;
}
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}