I have this markup:
<div>
<div class="inner"></div
<img src="blabla" />
</div>
How to make .inner 100% width and 100% height of its parent div dimensions? Parent div's dimensions rely on img dimensions.
Is it possible to do this with CSS? I don't want JS solution as it's obvious. Thanks
http://jsfiddle.net/7cSzV/
See this fiddle : http://jsfiddle.net/vSE7S/2/
CSS
.outer { position: relative; }
.inner {
position: absolute;
top: 0; left: 0;
background: black;
height: 100%;
width: 100%;
}
img { display: block }
(I just gave an .outer class to the outer div, for the sake of the simplicity)
note: try also to assign display: inline-block to the outer div: the resulting effect is slightly different, see http://jsfiddle.net/vSE7S/3/ — just choose the effect that fits best to your needs.
You might change the css and add a class to that parent div
.inner {
background: black;
/* position: absolute; */
width: 100%;
height: 100%;
/*width: 100px;
height: 100px;*/
}
div.parentDiv{
position: relative;
}
Related
What's the proper way to position an HTML element according to a center handle?
In this example:
XXXXXXXXX
|
|
123px
Assume the element should be position at absolute position left: 123px; but the text should be centered at that point, not start at it. The element text is dynamic, so I have no way of setting a static negative margin-left on it.
Is there a pure CSS way to achieve this? The JS way of measuring offsetWidth and then setting left after calculating width / 2 won't neccesarily work in my case due to various limitations.
One posibility is to set a transform translateX -50%
p {
position: relative;
display: inline-block;
left: 100px;
transform: translateX(-50%);
}
<p>ONE</p>
<br>
<p>TWO, LONGER</p>
<br>
<p>THREE, the longest</p>
It's fairly easy to achieve that and there are several ways to do it. Since you didn't post any HTML construct for your example, I'll just make up some.
The trick is to have an inline-block parent element which has the desired offset (123px) and inside that element you'll have another inline-block element with a left margin of -50%. Position both relative and you'll have the effect you are looking for.
#container {
position: relative;
}
#line {
width: 100px;
height: 100px;
left: 123px;
position: absolute;
border-left: 1px solid red;
}
#text {
left: 123px;
top: 50px;
display: inline-block;
position: relative;
}
#text p {
position: relative;
background: green;
margin-left: -50%;
display: inline-block;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
<div id="container">
<div id="line">
<-- 123px
</div>
<div id="text">
<p>
This is some dynamic text<br>the div has no absolute set width.
</p>
</div></div>
There are other ways as mentioned, probably depends on your general layout/HTML structure. I would definitely take a look at the flex-box properties, this might also be suitable here.
If you want to play around with it, here's a fiddle.
Some of various ways to do this with css:
If your element is a block:
.element{
width: 200px; /* Full width */
left: 50%;
margin-left: -100px; /* Half width */
position: absolute;
display: block;
}
or, if you're using css3:
.element{
width: 200px; /* Full width */
left: calc(50% - 100px);
position: absolute;
display: block;
}
You can also have a non-absolute approach, but the parent element position should be relative:
.element-parent{
position: relative;
}
.element-parent .element{
margin: 0 auto;
}
If you use text-oriented element (inline-block), this works with IE 7+:
.element-parent{
text-align: center;
}
.element-parent .element{
display: inline-block;
}
I have a problem with margins. I want to have image inside div element. Height should be of the image, but width should be of the parent div minus padding.
<div class="inner">
<img width="100%" src="http://pawelek-moj-aniolek.blog.onet.pl/wp-content/blogs.dir/505303/files/blog_bg_734362_1406866_tr_morze.jpg" alt="There is no image"/>
</div>
and styles
.inner {
width: 100%;
height: 100%;
margin: 10px;
position: relative;
}
.inner img {
width: 100%;
}
and the problem is easy to see on the image.
http://i59.tinypic.com/zn6mc2.png
I want to have 10 pixels of white place around each side of the image
Remove width:100% from the inner class. Update your CSS like below.
.inner {
height: 100%;
margin: 10px;
position: relative;
}
DEMO
I would use another div to wrap the image and give:
padding:10px;
insteed of margin.
here is a demo: http://jsfiddle.net/f6jju2mn/
Remove the width:100%; for inner class
.inner {
height: 100%;
padding: 10px;
position: relative;
}
DEMO
Here's a simple example:
<div class = "has-scrollbar">
<div class = "long"></div>
<div class = "overlay"></div>
</div>
.has-scrollbar {
width: 200px;
height: 100px;
overflow-y: scroll;
position: relative;
}
.long {
height: 200px;
width: 50px;
background: blue;
}
.overlay {
width: 100%;
height: 100%;
background: red;
opacity: 0.5;
position: absolute;
top: 0;
}
JsFiddle
The red overlay should completely fill the parent container. The height of .long is not known in advance. The .has-scrollbar div should still be scrollable (and not covered).
Any solution using position: fixed on .overlay will not likely work. The real-world scenario is far more complex. Consider the position of .has-scrollbar within the body to also not be known in advance.
So you don't know about long, but seems like you do control has-scrollbar, so you can make overlay fixed and position it in the same place as has-scrollbar:
.overlay {
height: 100px;
margin-top: 8px; /* just to compensate for body margin in the example */
pointer-events: none; /* mouse events will pass through */
position: fixed;
width: 200px;
}
Updated JSFiddle.
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each