I have some child divs placed in a parent div. It looks like that:
Now I need to place an image with a relative size into the red(brown) div.
But every time when I place the image into the div the layouts expands.
And that is a problem for me.
So how can I put an image with a relative size into my div without expanding the div layout?
HTML:
<div class="textContentContainer">
<div class="FirstSectionContentHeader">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="FirstSectionHeaderintroText uppercase">
SOME TEXT
</div>
</td></tr></table>
</div>
<div class="FirstSectionLogoArea">
<img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
</div>
<div class="FirstSectionIntroText usualText">
ddd
</div>
<div class="FirstSectionBottomLayout">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
</div>
</div>
CSS
.FirstSectionContentHeader{
height:10%;
width: 100%;
font-weight:200;
text-align:center;
background-color: aqua;
}
.FirstSectionLogoArea{
height:10%;
width:100%;
background-color: chartreuse;
}
.FirstSectionTitleLogo{
height:80%;
width:100%;
object-fit:contain;
}
.FirstSectionIntroText {
height:70%;
width:100%;
background-color:white;
}
.FirstSectionBottomLayout{
height:10%;
width:100%;
background-color: brown;
}
.FirstSectionBottomArrow {
height:10%;
width:10%;
object-fit:scale-down;
}
the image has position: staticby default, which is "inserted" in the parent element and "takes some space" there, causing the parent element to become larger. You can give it position: absolute(which requires that the parent element has position: relative) and still use percentage values.
Related
How to set flexible height for parent div. In my code popup is there inside div. If I open the popup i want to increase the height of the parent div. I have used height:100% but it is not working. So, How to resolve this issue.
HTML:
<div class="main">
<a href="#" open-popup>Popup</a>
<maincontent class="content">
shadow-root(open)
<popup class="popup"> ..content..</popup>
</maincontent >
</div>
CSS:
.main{
height:100%;
width:100%;
display:table;
border:2px solid #ccc;
}
.content{
display:flex;
justify-content:center;
}
Getting like this:
Expected like this:
You can use auto height
height: auto;
instead of
height:100%;
to not disturb height of parent div
To main class you can use display "block" property instead of "table" and heigth will be "auto" or just don't define it will take automatically take.
<div class="main">
<a href="#" open-popup>Popup</a>
<main class="content">
shadow-root(open)
<div class="popup"> ..content..</div>
</main>
.main{
height:auto;
width:100%;
display:block;
border:2px solid #ccc;
}
.content {
display:flex;
justify-content:center;
}
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
HTML:
<div>
<img>
<div>
<table>...</table>
</div>
</div>
CSS:
#img {
position: absolute;
right: 0px;
}
Both divs are the same size as the table.
I want the image to float top right of the table.
This results that the img is at the right side of the screen and not in the div.
You need to add position:relative; to the containing div. Also, I would advise against using tables unless you will be displaying tabular data, they should not be used for layout.
.container {
position:relative;
width:500px;
height:500px;
border:1px solid black;
}
.container img {
position:absolute; /* absolute misspelled in your example */
top:0;
right:0;
}
<div class="container">
<img src="http://placehold.it/250x250" />
<div>
<table></table>
</div>
</div>
img ignore width set to their parent. Apply width to img itself instead.
Also, you misspelled "absolute".
I have a div container in my html page and i want set its height to expand all remaining page in the screen..
How can i do that ??
That's my code :
HTML
<div class="row">
<div id="builder-container" class="col-xs-12 col-lg-9">
<div id="builder-content" > </div>
</div>
</div>
CSS
#builder-container {
background-color: #ccc;
height: 100%;
}
You have to give all of the parent elements, including the div you want to extend, a height of 100%.
Actually it would not get cover your whole page without enough content, but the best way is to give it 'position:absolute/fixed/relative' and give the same div top:whateveryouwant px; and bottom: 0px/0%; width and height :100%
JSFiddle - Edited: Check it now
CSS
body
{
margin:0;
width:100%;
height:100%;
}
#builder-container {
display:block;
position:absolute;
margin-top:5%;
left:0%;
bottom:0%;
background-color: #ccc;
height: 100%;
width:100%;
}
html
<div class="row full_height">
<h1>Test elem</h1>
</div>
css
.full_height {
height: 100vh
}
I am trying to position the second image inline next to the one before, the second image is smaller and i want it to sit on the same bottom line next to the larger one next to it. this will create a gap above the second image where i can put a small bit of text.
My problem is when i play around with background-size:, height: and width: to change the size of the image it just goes to the top left hand corner of its surrounding div.
I plan on having 4 more small image next to the small one so I'm asking please could anyone sort out the positioning of the divs and css so that i can easily add more next to the prior one,
Here is an image to give you an understanding of what i am trying to achieve, The red box shows where i want it to be positioned, and the other red box is where i will have the next skin.
LINK
Things i have tried:
Bottom:0
margin-top ( to push it down ) though this does not leave room for me to add text above the smaller images
padding-top:
Here is my current CSS:
#secondinner {
width:980px;
margin:0 auto;
overflow: hidden;
}
#dailyskin {
width:120px;
height:20px;
background-color:#336699;
color:white;
font-size:14px;
text-align:center;
padding-top:1px;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#downloadbutton1 {
width:100%;
}
#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin {
width:100px;
overflow:hidden;
float:left;
padding-left:10px;
}
Here is the HTML:
<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>
<div id="firstskin">
<div id="topskin"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
<div id="secondskin">
<div id="topskin2"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
</div>
This is the third section to the index page.
</div>
Here is a JS fiddle to show you what i mean,
http://jsfiddle.net/bjbear123/qdwgpaqc/
display: table-cell; with a vertical-align: bottom could be a good solution.
Have a jsBin!
HTML
<div class="skin-wrap">
<div>
<img src="http://www.placehold.it/100X300" />
<button>Download</button>
</div>
<div>
<p>text above </p>
<img src="http://www.placehold.it/100X200" />
<button>Download</button>
</div>
</div>
This is the third section to the index page.
CSS
.skin-wrap {
display: table;
}
.skin-wrap > div {
display: table-cell;
width: 100px;
vertical-align: bottom;
padding: 10px;
}
And if you don't want / are not able to use table-cell as misterManSam answered you can use nested divs with position absolute.
.wrapper{
position: relative;
height: 200px;
width: 100px;
}
.content{
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="content">
<img src="whatever.jpg" />
</div>
</div>
And there you have a little jsbin http://jsbin.com/jiqakefu/1/
One easy solution is to increase the top margin of topskin2.
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
i tried this on jsfiddle both download button were inline.
You can set margin as per your need, if you want space between both then you can use margin-left to create gap.
you were right doing it through bottom:0;
The thing you missed was to set position:absolute; and for outer div position:relative;
Here's a fiddle: http://jsfiddle.net/Nive00/qdwgpaqc/2/