I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css...
<style>
.container{
width: 100%;
}
.box{
float: left;
width: 49%;
}
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
</div>
I have tried to give .image a relative position and then give the img tag within it 'position: absolute: bottom: 0px;' however this does not seem to work as .image has no fixed height.
Thanks, any help would be appriciated.
That should do the work. In fact, your container has no height at all with 2 floated div inside of it. I use a clear:both to... clear the floats and give the container the proper height.
<style>
.container{
width: 100%;
position: relative;
}
.box{
float: left;
width: 49%;
}
.image img {
position: absolute;
bottom: 0;
right: 0;
}
.clear { clear: both; }
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
<div class="clear"></div>
</div>
You can find more infos about floats and clear on this nice article on css-tricks.com
Related
I need to
1.Middle center align a div(contentcontainer) which contains image and text inside another div container.
2.Render the image and text for different devices so it looks nicely on both mobile and desktop devices.
Please note
1.The content html for the image and text will be sent dynamically so the height of the content container is flexible.
2.The size of the original image and length of the text are different each time so the width and height of the maintainer cannot be fixed values
3.This needs to support android and ios browsers(mainly safari and chrome).
**JSFIDDLE*
http://jsfiddle.net/1o8vuqbd/1/
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
#maincontainer {
height:100%;
width:100%;
padding:5px;
background-color:red;
}
#contentcontainer {
height:100%;
width:100%;
position: relative;
background-color:pink;
}
Here is the updated code.
HTML:
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150" style="float: left;">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
CSS:
#maincontainer {
height: 500px;
position: relative;
width: 500px;
background-color:red;
}
#contentcontainer {
background-color: #FFC0CB;
overflow-y: auto;
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.
I have two divs with two images:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
Second one is some smaller than first. How can I put second image on first image without using
#div2{
position: absolute;
}
I need to get similar result but without using position absolute property;
The main issue is that there are a lot of other elements, in parent div, not only div2.
Negative margins
You can do lots with negative margins. I've created an example with just two images without any divs.
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
My question to you is why must you do this WITHOUT
#div2 {
position: absolute;
}
If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:
#div1 {
position:relative;
}
Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>
You could nest div2 inside div1:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }
I have a fixed container and inside of that is an additional container which houses a number of DIVs based on user choices. I need these additional DIVs to line up horizontally and provide horizontal scrolling (but not vertical scrolling).
Such as this:
[x] [x] [x]
Essentially, my setup looks like this:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
</div>
</div>
The CSS breaks down as such:
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
#final {
display: inline-block;
float: left;
}
This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:
[x]
[x]
[x]
Any suggestions on how to fix this?
Several problems here. For a start:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
<div style="clear:both"></div>
</div>
</div>
You should have a DIV after your floats that remains constant, telling your browser not to float any subsequent elements (clear:both).
And you have several "final" DIVs, so they be in a CSS class, not an ID.
.final {
float: left;
}
That should do it!
Edit: That will fix your HTML/CSS errors, at least. But I've just noticed that you want the document to scroll right. The only way to do that is to set the width of the #container div to be wider than the sum of all the widths of the .final divs. Otherwise your browser will attempt to push everything "down".
Try this......
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
</div>
</div>
<style>
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
.final {
float: left;
}