I am trying this:
there is a picture element Which is wrapped inside a container div
<div id="container">
<div id="a">
<img src="b.jpg" alt="b" />
</div>
</div>
Now I want to place the child elements such a way that the top and left of the picture is always 25% of the height & width of the container div. How can I achieve this?
If that is the only requirement, you can just do it by adding a padding on the inner div.
According to W3C, it those percentages should refer to the dimensions of the outer div.
Like margin properties, percentage values for padding properties refer
to the width of the generated box's containing block
http://www.w3.org/TR/CSS2/box.html
For the height, it will only work if your inner div is the only element inside your outer div (because the inner div will determine the height of the other). So for you example, it'll work.
Try this:
#container {position: relative;}
#container #a {position: absolute; left: 25%; top: 25%;}
Here's a working fiddle: jsFiddle
Try:
#container { position:relative; }
#container img { position:absolute; top:25%; left:25%; }
Live demo: jsFiddle
Related
<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>
<div id="content"></div>
CSS
#show01{
margin-top:14px;
position: relative;
height:auto;
border:thin solid blue;
}
#show01 img {
position: absolute;
max-width:70%;
}
#content{
background:#999;
height:45px;
}
img must be position:absolute because they are subject of jquery slide show.
but, in that case div content goes to the top of page, because div #show01 has no height. It's just a blue line at the top.
So, how can I keep img position:absolute and show01 to have height as the img inside.
I cannot define div show01 height in pixels, because of keeping responsive layout.
fiddle is here
This is semi-hack(ish).. but you could set a margin for #show01.
Try margin-bottom:24%;.. see the example and let me know if this is what you were aiming for.
Example
Basically you are going to have to set a margin equal to the size of the images to displace the unspecified height.. It seems to work responsively when you resize the browser too..
I want to center some text in a fixed height div.
I've made the following fiddle
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h1 style="vertical-align:middle;">Contact</h1>
</div>
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h2>Welcome to the</h2>
<h1>AAA</h1>
<h4>system</h4>
</div>
I've tried various options of the vertical-align:middle applying it to the different elements but it doesn't seem to work.
I did see other questions where the line-height was set to the same height as the font-size but in the second example I have multiple lines of text at different heights.
Is there a good way to do this?
Used to display table-cell
as like this
.parent{
height:180px;border:1px solid black;vertical-align:middle;
display:table-cell;
}
Demo
Don't use to inline css write a class in external css and define css
Vertical alignment always comes with some trouble. You should apply that css property only to table (td) elements and inline elements, not block elements like divs.
To position something in the middle you can use very simple solution - by using absolute positioning.
Create child block and set it's position to absolute, move it 50% from top, and set margin-top to negative value with amout equal to half of parent's height. Set your parents position to relative.
#parent {
position: relative;
height: 180px;
}
#child {
position: absolute;
top: 50%;
margin-top: -90px;
}
<div id="parent">
<div id="child">
<h1>sample</h1>
<h2>sample</h2>
</div>
</div>
I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.
Assuming the elements are after body. Give 100% to the body, and all the div
body, #div1, #div2 { height: 100%; }
If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.
#parent { height: 800px; }
#div1,#div2 { height: 100%; }
Enclose those divs in a parent div, and set their height to 100%.
You simply need a three-column (X)HTML + CSS Layout.
It's here
Let insert a parent div (container of those two adjacent divs)
add a property 'display: flex;' to the parent div
.parent{
display: flex;
}
.child1, .child2{
padding: 10px;
border: 1px solid gray;
}
<body>
<div class="parent">
<div class="child1">
CHILD 1 AREA<br />
CHILD 1 AREA
</div>
<div class="child2">
CHILD 2 AREA
</div>
</div>
</body>
This is a snippet of the code
<div id="container">
<article>
<p>contents</p>
<img ... />
<footer>meta data</footer>
</article
</div>
#container{
width:960px;
}
article{
width:640px;
}
footer, img{
width:960px; /*well I may want it 640px but float right all the way back to the edge of #container*/
}
The footer and image do not take that width; I tried the position:absolute and it works, but they go to the top, even when I add position: relative to the container.
Normally I would close the article tag, add the image, and then start with the article. This is not an ideal solution.
First thing is that they need to be block or inline-block to accept a width. Floats could cause weird wrapping. You could try overflow: visible to see if it helps.
You are on the right track with positioning. You want to set the container to relative and then the inner element set to absolute, pinned to the top right corner:
#container{ width:960px; position: relative; }
img, footer{ width:960px; position: absolute; right: 0px; top: 0px;}
An absolute positioned element is relative to its first positioned ancestor, so the inner element is positioned based on #container.
I need to set a child div as fixed (position: fixed) in relation to its parent div. The parent div is set as overflow: auto.
Just to make my point very clear: I don't want the child div to be fixed in relation to the HTML screen, but in relation to the parent div. The parent div scrolls, because it is set as overflow: auto. It has a lot of text, which causes the scrollbars to appear (not the screen scrollbars, but the div's). I need the child div to hold a fixed position in relation to its parent div.
Is there a pure HTML+CSS solution for this, or is it only possible to achieve through javascript?
I see what you're saying... basically this is the problem. With fixed position you get the element to stick there while you scroll but that has to be relative only to the window. If you try to make it relative to the container with position:absolute, it doesn't stick but scrolls with the content... the solution? a wrapper of course! :D
basic structure is this:
HTML
<div class="blah">
<div class="inner">text content</div>
<div class="meh">fixed content</div>
</div>
CSS
div.blah
{
position:relative;
}
div.inner
{
width:500px;
height:500px;
overflow:auto;
}
div.meh
{
background-color:#f00;
position:absolute;
left:20px;
bottom:20px;
}
enjoy :)
Its kinda tricky to say without looking at HTML, but you can try :
.child {
position: absolute;
top: 0; /* or any other value */
left: 0;
}
.parent {
position: relative;
}
You also need another child div to wrap your scrolling content.